VUE 事件模式

开头前我先吐槽vue 2.0 是面向过程的思想极致产物

1、在vue  script 中不能使用继承对象。

2、Data：数据层。中的循环嵌套多层数据，如果修改里面的值 vue 自称的数据动态改变是有问题的，当然解决方式多样。

3、vue官网的js 分布是坑大头鬼的。

 

言归正传：

在vue 如果涉及2个页面的处理方式，大部分人都会直接想到官方推出来的，vuex 来响应二个没有任何交集的vue 页面来处理数据的响应传递。

 

先描素vue 中vuex 介绍：

任何要使用vuex 的vue 文件都需要引入

Import Vue from ‘vue’;

Import vuex from ‘vuex’;

两个文件。并且 需要Vue.use(vuex);

注入在这个vue 方法内部增大打包js 大小 还很客观。

 

还需要分开内容识别创建内部交流 actions.js、mutations.js 、index.js

在action.js 定义一个接收function，然后在此中间间再抛出一个消息。

在mutations.js 定义一个接收消息function 然后处理中间逻辑，需要修改保存数据.

在index.js 保存数据中间间中，保存并且替换数据。

下面官网的图；

当需要跑一次事件修改情况会走store 中的3个步骤。如果项目小点，公共数据保存量少情况下，使用VU是没有什么问题的。

当需要协助的人员多一个情况下，代码会经常跑冲突情况。如果2边的mutations逻辑代码大面积的修改。那个场景不可描素。中间vuex 的传递如果量多，不分开action和mutations会导致混乱的使用和阅读困难，并且 公共数据还会经常出现重复获取字段问题。

特别是中间层的公共数据模式。

 

如果会react就不要用vue 做多人开发项目。

 

现在我介绍的是从flash actionscript 3.0 搬过来用的。事件模式。

DOM2级规定事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。处于目标阶段是指实际的事件目标接收到事件，再后续的事件处理阶段，它被看作是事件冒泡的一部分。

在这个基础上面如果body 层级有多个子层级时候大部分人就会在最顶部获取消息后在处理body级别的对应的层级数据。

所以如果直接在div 与div 中间加一个中间器 如vuex 那样，但是事件的冒泡处理不在vuex 组件里面。事件与事件之间的使用

 

独立的建立一个中间事件，这个中间件只做事件的帧听和冒泡指定帧听处理的。

 

处理事件帧听处理

static addListenter(type, listener) {
   let ts = this.getInstance();
   if (!ts.typeObj.hasOwnProperty(type)) {
     ts.typeObj[type] = [];
   }
   ts.typeObj[type].push(listener);
   return listener;
}

处理冒泡事件

static dispatch(type, data, ...age) {
    let ts = this.getInstance();
    if (ts.typeObj.hasOwnProperty(type)) {
        if (ts.typeObj[type].length > 0) {
            let len = arguments.length;
            let obj = {
                'type': type
            };
            ts.typeObj[type].forEach(function(value, index, array) {
                if (len > 0) {
                    obj.data = data;
                }
                value(obj, ...age);
            });
        }
    }
}

删除注册事件

static removeListenter(type, listener) {
    let ts = this.getInstance();
    if (ts.typeObj.hasOwnProperty(type)) {
        if (ts.typeObj[type].length > 0) {
            let index = ts.typeObj[type].indexOf(listener);
            if (index != -1) {
                ts.typeObj[type].splice(index, 1);
            }
            // ts.typeObj[type].remove(listener);
        }
    }
}

其中里面使用一个单例模式，使用静态方法来全局使用。

具体思想 看java 的https://www.cnblogs.com/garryfu/p/7976546.html

 

 

对应打印和哪个vue 触发的值

测试demo

https://github.com/yu305306/vueDispatcher