JavaScript组件设计思想（二）

2016年3月份曾写过一篇文章《JavaScript组件设计思想》其中描述了一些实现组件化的方式，以及降低各组件耦合度的说明。其中“事件机制”不失为好的选择！经过了更多实践给我带来了更多的思考。

事件实现，日常开发中我们经常需要这样的事件去完成某些操作：

function Event() {
    this._events = Object.create(null);  // 存储所有事件
}
Event.prototype = {
    constructor: Event,
    // 监听事件 key：事件类型，listener：事件处理函数（可以同时绑定多个不同类型事件）
    on: function (event, fn) {
        var eventTarget = this;
        (eventTarget._events[event] || (eventTarget._events[event] = [])).push(fn);
        return eventTarget;
    },
    // 只监听一次
    once: function (event, fn) {
        var eventTarget = this;
        function on() {
            eventTarget.off(event, on);
            fn.apply(eventTarget, arguments);
        }
        on.fn = fn;
        eventTarget.on(event, on);
        return eventTarget
    },
    // 移除指定类型事件
    off: function (event, fn) {
        var eventTarget = this;
        // 移除所有事件
        if (!arguments.length) {
            eventTarget._events = Object.create(null);
            return eventTarget
        }
        var cbs = eventTarget._events[event];
        if (!cbs) {
            return eventTarget
        }
        // 移除所有指定事件
        if (arguments.length === 1) {
            eventTarget._events[event] = null;
            return eventTarget
        }
        // 移除特定回调的指定事件
        var cb;
        var i = cbs.length;
        while (i--) {
            cb = cbs[i];
            if (cb === fn || cb.fn === fn) {
                cbs.splice(i, 1);
                break
            }
        }
        return eventTarget
    },
    // 触发对应类型的事件
    emit: function (event) {
        var eventTarget = this;
        var cbs = eventTarget._events[event];
        if (cbs) {
            cbs = cbs.length > 1 ? Array.prototype.slice.call(cbs) : cbs;
            var args = Array.prototype.slice.call(arguments, 1);
            for (var i = 0, l = cbs.length; i < l; i++) {
                cbs[i].apply(eventTarget, args);
            }
        }
        return eventTarget
    }
};

开发中，我们经常会遇到在用户登录成功后我们需要初始化“header”、“toolbar”、“menu”等情况。通常的做法是在登录成功回调中去调用对应模块的初始化函数，然而这样各个模块之间的耦合度太高，不符合开发规范。所以，常借用事件去实现；然而有时，“toolbar”中修改了某项状态，我们也要通知其他模块做相应的操作。这时候我们就需要让“toolbar”也具有事件行为。假设，现在我们具有一个Person类，要求其要具备事件行为。下述为几种实现方式：

一、传统事件方式

公用“公共”的事件，实现简单，多模块同时具备事件时比较难维护！

// 创建Event实例
var event = new Event();

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log(this.name);
    // 触发事件（Event实例）
    event.emit("Person.sayName", this,name);
};
// 监听事件（Event实例）
event.on("Person.sayName", function(args){
    console.log(args.name + " emit Person.sayName event!");
});

var p = new Person("ligang");
p.sayName();

二、伪类继承方式

Person是Event的一种？关系比较复杂，容易产生歧义，不易理解！

// 继承事件
Person.prototype = new Event(); // Object.create(Event.prototype);
Person.prototype.constructor = Person;
Person.prototype.sayName = function(){
    console.log(this.name);
    // 触发事件（当前Person实例）
    this.emit("Person.sayName", this,name);
};
var p = new Person("ligang");
// 监听事件（当前Person实例）
p.on("Person.sayName", function(args){
    console.log(args.name + " emit Person.sayName event!");
});
p.sayName();
// person属于Event一种实现
console.log(p instanceof Person); // true
console.log(p instanceof Event);  // true

三、混入方式

mixin(des, src)接受两个参数：接受者和提供者。函数的目的是将提供者所有的可枚举属性复制给接受者。

function mixin(des, src){
    for(var prop in src){
        if(src.hasOwnProperty(prop)){
            des[prop] = src[prop];
        }
    }
    return des;
}

ES6中新增方法Object.assign()可以达到同样的目的，其用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。会忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。
注意，mixin和Object.assign实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

var src = {a: {b: 1}, c: 1};
var des = {};
Object.assign(des, src);
src.a.b = 2;
src.c = 2;
console.log(des.a.b);   // 2
console.log(des.c);     // 1

混入方式实现思路清晰，但需要将Event构造函数修改一下，因为其只能扩展自身属性和方法。

function Event() {}
Event.prototype = {
    constructor: Event,
    // 监听事件 key：事件类型，listener：事件处理函数（可以同时绑定多个不同类型事件）
    on: function (event, fn) {
        var eventTarget = this;
        // 将事件存储提取到on函数中
        if(!this._events){
            this._events = Object.create(null);  // 存储所有事件
        }
        (eventTarget._events[event] || (eventTarget._events[event] = [])).push(fn);
        return eventTarget;
    },
    ...

function Person(name){
   this.name = name;
}
// mixin(Person.prototype, Event.prototype);
Object.assign(Person.prototype, Event.prototype);
mixin(Person.prototype, {
    constructor: Person,
    sayName: function() {
        console.log(this.name);
        this.emit("Person.sayName", this, name);
    }
});
var p = new Person("ligang");
p.on("Person.sayName", function(args){
    console.log(args.name + " emit Person.sayName event!");
});
p.sayName();

console.log(p instanceof Person); // true
console.log(p instanceof Event);  // false

四、项目中如何选择

上述描述的“传统方式”、“伪类继承”、“混入方式”三种实现在项目中，我们该如何抉择呢？个人认为，在项目中，我们至少需要两种事件：“总线事件”和“支线事件”。
总线事件：处理各个模块之间的发布、订阅（全局）！
支线事件：具体模块内部的发布、订阅（局部）！

// 模块间，通过globalEvent发布、订阅事件的机制
var globalEvent = new Event();
globalEvent.on("login", ...);
globalEvent.emit("login");

// 模块内，通过“混入”方式具备发布、订阅事件的机制
var HeaderSetting = function(){ ... }
Object.assign(HeaderSetting.prototype, Event.prototype);
var hs = new HeaderSetting();
hs.on("add", function(){
    ...
});
hs.addHeader = function(){
    this.emit("add");
    ...
}