深度克隆对象，自定义事件

1. 深度克隆

1.1 一般对象的浅克隆

因为对象是引用类型，因此直接进行赋值赋给的是指向地址，所以使用克隆（拷贝）的方式进行赋值。

var obj1 = {
    a:1,
    b:2,
    c:3
}
var obj2 = {};
for(var attr in obj){
    obj2[attr] = obj[attr];
}

这样就完成了对一个对象的浅克隆。

1.2 复杂对象的深度克隆

但是如果对象内部还是有引用类型的数据的话，这样克隆之后，对象里的引用类型数据依然是指向同一个引用地址。

var obj1 = {
    a:1,
    b:2,
    c:3,
    say:["aaaaa","bbbbb",[1,2,{o:12},[8,9]]],
    f:function(){}
}

对这样一个对象，我们要使用递归的方法进行深度克隆。

我们可以实现下面这样一个函数：

function extend(obj){
    //首先判断这个参数是否存在
    if(!obj){
        return null;
    }
    
    //用toString.call来判断数据类型
    var toString = Object.prototype.toString;
    
    //判断传入参数的类型，来决定要创建的是一个数组还是一个对象。如果传入一个对象，那就创建一个空对象。否则创建一个空数组
    var name = toString.call(obj) == "[object Object]"?{}:[];
    
    //开始遍历
    for(var attr in obj){
    
        //这个时候再次判断，如果obj中的参数有数组或者对象，那么就继续往内部查找克隆
        if(toString.call(obj[attr]) =="[object Object]" || toString.call(obj[attr]) == "[object Array]"){
            name[attr] = extend(obj[attr]);
        }else{
        
            //如果没有，那么就进行普通的赋值
            name[attr] = obj[attr];
        }
    }
    
    //最后将name这个新的对象return出去
    return name；
}

1.3 使用JSON的方法进行深度克隆

另一种方式的深度克隆
但是json中不能有函数。

function extend(config,obj,onoff){
    if(onoff){
        var str = JSON.stringify(obj);
        var data = JSON.parse(str);
        for(var attr in obj){
            config[attr] = data[attr];
        }
    }else{
        for(var attr in obj){
            config[attr] = data[attr];
        }
    }
}

使用上面这种方式，就可以进行对象的深度克隆（拷贝）了。

2.配置默认参数

在实际开发中，如果需要开发组件，那么经常会出现下面这种情况：
函数需要传入N个参数，但是有些参数是必须传入的，有些参数可以不传入。
那么我们怎么才能去配置函数的默认参数？

最简单的做法是这样：

function fn1(obj){
    obj = {
        a:obj.a || 18,
        b:obj.b || 14,
        c:obj.c || function(){}
    }
}

但是这种方法必须严格限制参数，并不太好。
所以我们可以使用深度拷贝的方式来配置：（一般使用这种方式的比较多）

function fn2(obj){
    //创建一个默认的配置参数
    var config = {
        down:5,
        move:0,
        up:10,
        arr:[1,2,3],
        obj3:{
        }
    }
    
    //首先遍历obj，然后对config的attr进行赋值，这样可以保证如果有参数就改变config的参数，没有的话不会改变。
    for(var attr in obj){
        config[attr] = obj[attr];
    }
    //然后在创建一个对象来对config进行深度克隆，这样就能完全继承默认参数和传入的参数，而且修改这个对象的时候完全不会对默认参数和传入的参数有影响。
    var setting = extend(config);
    
    //函数要执行的各种内容
}

var fnObj = {
    down:1,
    move:2,
    up:3,
    arr:[1,2,3]
}
fn2(fnObj);

如果觉得还需要单独写for···in太麻烦，那么我们就封装个函数，一次到位！

function extend(config,obj){
    //依然是判断数据类型
    var toString = Object.prototype.toString;
    var setting = toString.call(obj) == "[object Object]"?{}:[];
    
    //开始for in
    for(var attr in obj){
        //判断这个obj[attr]是否是数组或者对象
        if(toString.call(obj[attr]) =="[object Object]" || toString.call(obj[attr]) == "[object Array]"){
            setting[attr] = extend(config,obj[attr]);
            config[attr] = setting[attr];
        }else{
            setting[attr] = obj[attr];
            //为了排除数组中的下标值，需要判断attr（数组的key值是它的下标）
           if(isNaN(attr)){
                config[attr] = setting[attr];
            } 
        }
    }
    //最后把这个新的对象return
    return setting
}

3.自定义事件

自定义事件本质上还是事件绑定，通过映射事件绑定函数，将某个事件名的函数统一放到一个数组中，然后通过触发某个系统事件后一起调用。
事件绑定的所有函数都放在一个对象中，这个对象不止一个函数。

function addEv(elem,evName,fn) {
    //如果这个对象有eve这个方法，那么就调用这个方法。如果没有，就新建一个这个方法
    elem.eve = elem.eve || {};
    //如果elem.eve中有这个数组，那么直接调用。没有就新建一个
    elem.eve[evName] = elem.eve[evName] || [];
    //把要执行的函数fn push到数组中
    elem.eve[evName].push(fn);
    /*
     * 这个时候这个对象下的样子是：
     * elem = {
     *  ev:[fn1,fn2,fn3····]
     * }
     */
    //事件绑定
    elem.addEventListener(evName,fn);
}
function trigger(elem,evName) {
    //当这个函数调用的时候，循环数组中的所有fn并执行
    for(var i=0;i<elem.eve[evName].length; i++){
        //数组中的fn
        elem.eve[evName][i]();
    }
}

在多人协作开发的时候，使用自定义事件，易维护，易扩展