javascript框架设计-种子模块一

种子模块

种子模块是框架设计中的核心部分，也是框架最先执行的一部分，所以要极具扩展性、稳定性及常用性。常见框架的种子模块至少具有类型拓展、数组化、类型判定、简单事件的绑定与卸载、无冲突处理、模块加载及domReady功能。

1、无冲突处理

参考jQuery源码，原理：利用临时变量将同命名变量或不同版本同框架(如jQuery版本很多)保存下来，然后使用函数处理控制权。

//jQuery noConflict源码

var _$ = window.$, _jQuery = window.jQuery;

$.extend({
    noConflict: function(deep) {
        if (window.$ == jQuery) {
            window.$ = _$;
        }
        if (deep && window.$ == jQuery) {
            window.jQuery = _jQuery;
        }   
    }
});

具体详情分析，请参看上篇jqeury中的noConflict机制;

2、类型拓展

类型拓展是一个框架必须具有的功能，也就是我们需要在我们的命名空间上拓展功能，这也就是为什么jQuery会有这么多的插件，因为jQuery的[Math Processing Error]$.extend 或$.fn.extend函数。

一个最简单的extend的实现

    var extend = function(target, source) {
        for (var key in source) {
            target[key] = source[key];
        }
        return target;
    };

接下来我们分析下jQuery中的extend的实现：我这里使用最新的3.0,应该无差异

    jQuery.extend = jQuery.fn.extend = function() {
        var options, name, src, copy, copyIsArray, clone,
            target = arguments[ 0 ] || {}, //默认复制到的目标为第一个参数
            i = 1, //从第二个参数开始后面的算source
            length = arguments.length,
            deep = false; //是否深复制

        // Handle a deep copy situation
        if ( typeof target === "boolean" ) { //如果第一个参数为boolean，处理深复制
            deep = target;

            // Skip the boolean and the target //此时从第三个参数算source
            target = arguments[ i ] || {};
            i++;
        }

        // Handle case when target is a string or something (possible in deep copy)
        if ( typeof target !== "object" && !jQuery.isFunction( target ) ) { //处理如果target不是对象
            target = {};
        }

        // Extend jQuery itself if only one argument is passed
        if ( i === length ) { //如果只有个一个参数，则拓展自身，jQuery插件的写法
            target = this;
            i--;
        }

        for ( ; i < length; i++ ) {

            // Only deal with non-null/undefined values
            if ( ( options = arguments[ i ] ) != null ) { //null不处理

                // Extend the base object
                for ( name in options ) { //遍历对象
                    src = target[ name ]; //用src,copy处理,对target,resource对象不改变
                    copy = options[ name ];

                    // Prevent never-ending loop
                    if ( target === copy ) { //如果两个字段相等,跳过
                        continue;
                    }

                    // Recurse if we're merging plain objects or arrays
                    if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
                        ( copyIsArray = jQuery.isArray( copy ) ) ) ) { 

                        if ( copyIsArray ) { //数组
                            copyIsArray = false;
                            clone = src && jQuery.isArray( src ) ? src : [];

                        } else { //对象
                            clone = src && jQuery.isPlainObject( src ) ? src : {};
                        }

                        // Never move original objects, clone them
                        target[ name ] = jQuery.extend( deep, clone, copy );

                    // Don't bring in undefined values
                    } else if ( copy !== undefined ) {
                        target[ name ] = copy;
                    }
                }
            }
        }

        // Return the modified object
        return target;
    };

自己写的一个，造造轮子

    var extend = function(target, source) {
        var args = [].slice.call(arguments), i = 1, key,
            ride = typeof args[args.length - 1] == 'boolean' ? args.pop() : true;
        if (args.length == 1) {
            target = this.window ? {} : this;
            i = 0;
        }
        while ((source = args[i++])) {
            for (key in source) {
                //ride 为false,则不覆盖target同名字段
                if (Object.hasOwnProperty.call(source, key) && (ride || !(key in target))) {
                    target[key] = source[key];
                }
            }
        }

        return target;
    };