​ vue可视化项目暂时告一段落了，后续整理项目结构会更新上来，今天闲来无事先更新一把vue一些奇淫笔记，之所以称之为奇淫，可能是因为觉得有意思，也可能是觉得比较好玩，并不一定建议开发中用，这些奇淫的技能有些可能透过代码熟悉vue的运行机制等问题；

奇淫笔记一：

​ 如果你只在子组件里面改变父组件的一个值，不妨试试 $emit('input'),会直接改变 v-model
我们正常的父子组件通信是 父组件通过 props 传给子组件，子组件通过 this.$emit('eventName',value)通知父组件绑定在 @eventName 上的方法来做相应的处理。
​ 但是这边有个特例，vue 默认会监听组件的 input 事件，而且会把子组件里面传出来的值，赋给当前绑定到 v-model 上的值
正常用法 - 父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
  <subComponent :data="param" @dataChange="dataChangeHandler"></subComponent>
</template>

<script >
  export default {
    data () {
      return {
        param:'xxxxxx'
      }
    },
    methods:{
      dataChangeHandler (newParam) {
        this.param = newParam
      }
    }
  }
</script>

最近一直在做可视化拖拽系统，一期基本功能已经完成，二期在完善系统，第一步就是把所有组件异步加载，这样有些组件不用的话不必要加载，js也就没那么大了，本来认为很简单一件事，但当异步组件遇上vuedrag就出了问题；研究了很长一段时间vuedraggable的实现方式，最终找到了问题，首先说一下问题

我们可视化系统拖拽组件，当把组件异步处理后会出现连续拖拽两个相同的异步组件会出现store里的JSON Tree多出一个非DOM节点，这个DOM节点是在component组件名进入前已经把左边组件DOM放到了这个JSON Tree里，这样就出现DOM树结构解析出现问题，我查了一下vuedraggable的API，发现并没有任何一个执行顺序可以控制add的插入节点字符串，这样就导致了后边再拖拽就会导致component解析问题；

在查找代码后发现，其实在draggable拖拽松手那一刻到add回到那一刻分别由vue和sortablejs执行了两个事件，一个是vue的input事件（也就是v-model用到的数据绑定）另一个是sortable里的change事件源码如下：

很早之前申请的域名和服务器到期，一直没把文章移过来；现在把文章全部转移到github上来，今天线上第一篇：移动端的pageshow和pagehide；

文章最后更新一把最新遇到的问题与解决思路！

手机上的浏览器有一个特性，名叫“往返缓存”（back-forward cache，或bfcache），可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发load事件。尽管由于内存中保存了整个页面的状态，不触发load事件也不应该会导致什么问题，但为了更形象地说明bfcache的行为，Firefox还是提供了一些新事件。 第一个事件就是pageshow，这个事件在页面显示时触发，无论页面是否来自bfcache。在重新加载页面中，pageshow会在load事件触发后触发；而对于bfcache中的页面，pageshow会在页面状态完全恢复的那一刻触发。

已经停更一年了，平时不是没时间更新，就是不知道记录什么！平时遇到的问题和解决思路都简单的弄了个list作为文章更新点，今天忙里抽闲，在单位的电脑装上blog环境，开始更新一个从零到一纯手动搭建的关于vue可视化系统，组件拼接页面

，从开始的毫无头绪，到目前的一步步踩坑经历了从绝望看到希望，感觉自己变牛逼了（其实并没有）！好了废话不多说，内容比较多和杂，一步一步来；

对于inspect很多前端开发并不陌生，我们经常用inspect调试我们移动端页面嵌套进原生webview的页面；但这个调试方法需要安卓4.4以上版本支持，但同时由于安卓本身是开源的国内很多手机厂商都在安卓的基础上做了封装再开发，导致有些手机我们即使在inspect里识别了当前手机，但用浏览器或webview打开页面时却不能看到我们的html，之前在开发时遇到，在google搜索了一堆的解决方案，都是要安卓开启debug模式，但app内部测试版本就是开启状态，那么如何解决我们才能调试我们自己的html页面呢？之前搜到过资料没有进行记录，今天调试时又遇到了这个问题是个小米手机，安卓版本4.4.4；接下来看看怎么解决这个问题；

基于webkit核心的webview端调试

从 Android 4.4 开始，webkit是支持远程调试的，不过需要将app的debug模式打开，可以使用如下代码：

1

WebView.setWebContentsDebuggingEnabled(true);12

由于大部分 App 的 debug 模式是关闭的，即便是内部 App，比如 QQ/微信，要去找一个开启了debug 模式的版本还是比较麻烦的。因此需要使用借助第三方工具来强制开启任何 App 的 Android webview debug模式，使之可以使用 chrome inspect。而这个工具就是 Xposed 。

我们已经提供了一份要安装的文件，请首先到 https://github.com/feix760/WebViewDebugHook 下载文件。

1、root设备

因为涉及到 root 权限，因此需要将手机进行 root。有很多工具可以来 root，比如KingRoot、一键root、360一键root等。如果你安装了QQ电脑管家，可以在“电脑管家-工具箱-其他”列表里面看到KingRoot。

这两周手里的项目第一期0的阶段已经基本结束了，后边的迭代还没有开始，所以这两天闲来没事在梳理在做项目时遇到的问题和需要优化的点，昨天晚上加班点击做过的东西发现一个可优化的问题，之前没有做是因为时间紧任务重，所以用了一个比较暴力的方法暂时解决了，但是当时我思考中有一个思路觉得可以解决却没有用，所以就用了一点时间解决这个问题，下边就来说说场景：

在app里有个列表页和详情页，列表页大概就和朋友圈布局差不多，有内容和图片，详情页里只是多了个评论，列表的页面是原生的，详情页是h5的，下面问题来了，在原生里图片是正方形的，不管我上传什么样的图片都是正方形，看上去是图片裁剪，但实际上如果宽>高这个正方形里展示的是图片高度100%，宽度截取然后展示平铺展示，这样看没有变形效果；我们在h5页面当时没有做太多想法，因为公司用的是七牛云的图片存贮，所以用了七牛云的API里的裁剪，直接硬生生的搞成了正方向，就变成了如下效果：

app详情效果

​ 周末来加班准备下周项目从线工作，坐着等QA和审核等部门的问题解决，目前帝都的外边下着忽大忽小的雷阵雨， 昨天下班在雨中漫步回家，今天早起去体检又雨中漫步来上班，有一种说不出的感觉；好了天气预报说完了，下班就来说说我在上一片文章提到正在做的项目遇到的一个小问题，这里和大家分享下；

就像题目看到的在ios中动态加入的dom元素是不支持click绑定方法的，当时遇到这个问题我没有细想直接换成了touchstart来检测，发现可以通过，由于项目紧张就没有详查原因，记录下来今天做了一个查询：

大概意思是,如果要用$(document).click()来绑定新生成的DOM元素,必须给此DOM添加css样式

1

cursor: pointer;

或用touchstart方法；我并没有亲测css样式这个解决 方案，这里做个记录，下次遇到用一下试试！如下是解答地址：

http://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery

​ 最近忙的暗无天日的节奏，不过收获很多很开心能同时3个项目的从0到1的过程，今天开始项目已经进入优化迭代阶段，基础功能和东西都已经弄好了，再也不用早九晚十一周七天的工作节奏了，说实话突然弄完了可以喘口气了还有点不那么适应了；

​ 在整个项目开发过程中其实没遇到什么特别难的技术问题，主要是公司的node框架使用上可能有很多不是太了解踩了一些坑，这里就不多说了；同步开发的三个项目其中两个是vue+nuxt+公司node架构搭建中间成做的后台系统，vue对于我来说没什么挑战性分配给我的工作早早就解决了，之后主要工作就是一直带一个校招新手做一个h5页面，嵌套在APP中的一个项目，由于这个新手没做过项目所以基本手把手教，之前在大数字也带过一个校招研究生两个对比还是大数字的校招基础扎实一点，没带多久基本就已经出师了；现在这个貌似带了这一整个项目进步也不是很大，主要是基础不扎实，很多东西都不了解；主要在这个项目中遇到很多坑，主要内部的node框架用了lite模版，这个模版之前从未听过有一些不太习惯；不过在做这个h5项目中还是有一点收获的，仔细想来最大的收获是在教的过程中发现自己的不足；感觉在做项目的时候遇到很多问题都像闯关一样，每过一关都觉得好爽；

​ 好了废话不多说，进入主题，不知道谁遇到过，反正我遇到了，（我的应用场景：在一个详情页最下边有一个发布评论的div，这个div是fixed的，里边有个input和submit按钮，在详情的content里有一个评论的click事件，点击后我会让这个fixed里的input聚焦，在APP里会唤起键盘，做完后发现安卓没有问题，在IOS里可以唤起键盘但是fixed这个div会被键盘遮挡住，体验不好，所以需要解决这个问题，就有了之后的一切摸索过程……）之前没遇到过第一次遇到我 首先百度原因，各种说法都有如下是查到的两个比较靠谱的评论链接，或许你也回遇到相同的问题，希望对你有所帮助：

有时候我们在开发环境用node运行本地项目的时候会爆出“Error: listen EADDRINUSE :::8080”这样的错误提示如下图：

这种情况我们都知道是8080端口被占用了，也许我们有其他的项目在运行占用这个端口；但今天我之所以要暴力解决是因为我发现我其他项目并没有运行，也看不到哪个应用占用这个端口，这时候我们怎么办，貌似我们只有重启电脑这种办法，今天我来分享一个暴力敲码关闭占用这个端口的应用步骤如下（此处以8080端口为例）：

​ 上次说最近再开发项目用到了react开发，今天第一个迭代基本完成，已经在预发布阶段；

​ 现在闲下来继续记录一下react的一些看法；

​ 首先在这次迭代中用的react的功能不是太复杂，但是回顾起来却觉得代码很复杂；当回顾我的js文件发现好混乱啊，由于react是单数据流的开发模式，一开始想把每一个小的功能都单独做一个文件出来，但是我却发现一个很严重的问题，，如果想让子组件修改父组件的数据，只能通过父组件定义一个方法方法里用this.setState()的方法，把这个方法传子组件，在子组件中运行把数据传出来，这正方法很痛苦，目前还没有寻找便捷方法；

​ 第二个问题，现在目前发现对于执行事件还是有一定的局限性，比如我想在一个提交事件中调去某一个dom元素的onblur事件，这时想操作这个流程很复杂，目前还是没有客观的解决方案

​ 第三个问题，就mvvm的开发而言，我觉得react的可独行不是那么客观，可能之前写前端和vue习惯了，对于这种jsx的写法不太习惯，但目前来说传参，方法，事件，html，css，入参，state，props这些东东弄在了一个js里，如果没有一个很好的组件功能的前期规划，那么写完代码发现这个文件代码行数很多不说，可读性也不是那么好，就连我自己写完之后回顾我写的代码有时候都觉得乱，这个事件是父组件传来的，那个数据是父组件传来的，这是在给子组件传输数据，那个是在给父组件传输数据！整体代码的美观性也不是我想象的那么美，我想如果另外一个新人浏览代码的时候可能会花更多时间来查找一些事件和方法的关联性吧；

​ 目前来说我对react的了解还停留来表面，只是觉得react和vue相比，api少了很多，更像js的编码习惯，缺点也很明显，局限性很大，不想vue那样用个api就能实现，可能一个很小的事件需要写一坨代码来完成；react的坑都在深层，vue的坑都在表层；这是我目前遇到的一些react的坑，还在继续填坑中……或许我的理解和看法不对，希望看到小记的朋友可以批评指正；之后的react之路还在进行，更深入的东西还在挖掘，有兴趣的可以一起探讨交流，今天就先到这了，之后的填坑之路有时间会和大家分享交流！