云服务器

AvalonJS 源码分析之三

2017-12-25 11:29:20 0

前面一章已经粗略讲解了前三个模块以及它们的功能,这章我们将继续探索源码,领略作者的代码风采。

模块四: 核心功能

该模块中主要加载一些对avalon进行初始化并全局化的方式,例如: function avalon(el) { return new avalon.init(el) }

global.avalon = avalon
if(typeof window !== 'undefined'){
    window.avalon = avalon
}

avalon.init = function (el) {
    this[0] = this.element = el
}

avalon.fn = avalon.prototype = avalon.init.prototype

然后看下代码,avalon.shadowCopy,该方法的主要作用是将source的属性覆盖到destination,有点类扩展的味道。再往下,也运用shadowCopy,进行对avalon的扩展,例如:noop,log,warn,error,oneObject等等。

avalon.shadowCopy = function (destination, source) {
    for (var property in source) {
        destination[property] = source[property]
    }
    return destination
}

模块五:browser 代码从 375到408行,这段区间,是在为avalon搭建一个浏览器的对像browser,其中包含了window,document,msie等属性,这里就不详细讲解内容了,大家可以看看代码。

模块六:一些存在异议的方法

代码从 415到650行,其实就是一些常见的方式,例如一些isWindow(判断是否window对象),isFunction(判断是否是function),isPlainObject(判断对象是否是原生对象),each(遍历)等常用方法,在这里作者也加入对外来扩展的支持,例如加入avalon.mix,avalon.fn.mix,用于浅拷贝,深拷贝,更jquery.extend相似。先上代码:

avalon.mix = avalon.fn.mix = function () {
    var options, name, src, copy, copyIsArray, clone,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length,
            deep = false

    // 如果第一个参数为布尔,判定是否深拷贝
    if (typeof target === 'boolean') {
        deep = target
        target = arguments[1] || {}
        i++
    }

    //确保接受方为一个复杂的数据类型
    if (typeof target !== 'object' && !avalon.isFunction(target)) {
        target = {}
    }

    //如果只有一个参数,那么新成员添加于mix所在的对象上
    if (i === length) {
        target = this
        i--
    }

    for (; i < length; i++) {
        //只处理非空参数
        if ((options = arguments[i]) != null) {
            for (name in options) {
                try {
                    src = target[name]
                    copy = options[name] //当options为VBS对象时报错
                } catch (e) {
                    continue
                }
                // 防止环引用
                if (target === copy) {
                    continue
                }
                if (deep && copy && (avalon.isPlainObject(copy) || (copyIsArray = Array.isArray(copy)))) {
                    if (copyIsArray) {
                        copyIsArray = false
                        clone = src && Array.isArray(src) ? src : []

                    } else {
                        clone = src && avalon.isPlainObject(src) ? src : {}
                    }
                    target[name] = avalon.mix(deep, clone, copy)
                } else if (copy !== void 0) {
                    target[name] = copy
                }
            }
        }
    }
    return target
}

它的主要作用是:将一个或多个“源对象”合并到一个“目标对象”中,并返回目标对象。它主要有三种表现形式:

a、avalon.extend(destination, source1, source2, source3 ....)

b、avalon.extend( source )

c、avalon.extend(boolean, destination, source1, source2, source3 ....)

a方式第一个参数作为“目标对象”,其它参数作为“源对象”。

b方式只有一个参数,这里的这个参数变成了“源对象”,“目标对象”变成了avalon。说白了就是"源对象"的属性,变成avalon函数的静态方法或属性。

c方式的第一个参数是boolean类型的,第二个参数是"目标对象",剩下的参数是“源对象”。当第一个参数的值为true时,表示对象合并时支持“深拷贝”。

这一章就写完,后续会继续加载这一系列分析内容。

 
上一篇: 无
下一篇:

微信关注

获取更多技术咨询