Zepto源代码学习(三)

最近开始学习Zepto源代码,分享出来,共同学习。前端新人,技术欠佳,多多见谅
参考的gitbook地址
感谢作者奉献

$.extend 对象扩展方法

这个函数只有一个参数,但是通过arguments获取了需要合并的对象,尝试理解一下,反正需要合并很多对象,那参数个数也是不固定的,不如通过arguments获取

也可以看出deep初始值为undefined 拷贝为浅拷贝,第一层是拷贝过来的,深层如果为引用 则会相互影响

$.extend = function (target) {
        var deep, args = slice.call(arguments, 1)
        if (typeof target == 'boolean') {
            deep = target
            target = args.shift()
        }
        args.forEach(function (arg) {
            extend(target, arg, deep)
        })
        return target
}

extend代码:目标对象,源对象,是否为深拷贝,三个参数

function extend(target, source, deep) {
        for (key in source)
            if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
                if (isPlainObject(source[key]) && !isPlainObject(target[key]))
                    target[key] = {}
                if (isArray(source[key]) && !isArray(target[key]))
                    target[key] = []
                extend(target[key], source[key], deep)
            } else if (source[key] !== undefined) target[key] = source[key]
    }

$.each 用来遍历数组或者对象,源码如下:

$.each = function (elements, callback) {
        var i, key
        if (likeArray(elements)) {
            for (i = 0; i < elements.length; i++)
                if (callback.call(elements[i], i, elements[i]) === false) return elements
        } else {
            for (key in elements)
                if (callback.call(elements[key], key, elements[key]) === false) return elements
        }

        return elements
    }

$.map :可以遍历数组(类数组)或对象中的元素,根据回调函数的返回值,将返回值组成一个新的数组,并将该数组扁平化后返回,会将nullundefined排除。

$.map = function (elements, callback) {
        var value, values = [], i, key
        if (likeArray(elements))
            for (i = 0; i < elements.length; i++) {
                value = callback(elements[i], i)
                if (value != null) values.push(value)
            }
        else
            for (key in elements) {
                value = callback(elements[key], key)
                if (value != null) values.push(value)
            }
        return flatten(values)
}

$.contains:用来检查给定的父节点中是否包含有给定的子节点,源码如下: 做clickoutside的时候可以参考

$.contains = document.documentElement.contains ?
        function (parent, node) {
            return parent !== node && parent.contains(node)
        } :
        function (parent, node) {
            while (node && (node = node.parentNode))
                if (node === parent) return true
            return false
}

$.grep: 该函数其实就是数组的filter函数

$.grep = function (elements, callback) {
        return filter.call(elements, callback)
    }

$.inArray:返回指定元素在数组中的索引值

$.inArray = function (elem, array, i) {
        return emptyArray.indexOf.call(array, elem, i)
 }

$.noop: 空函数

$.noop = function () {
    }

$.trim: 删除字符串头尾的空格 null, undefined转成'',其他去头尾空

$.trim = function (str) {
        return str == null ? "" : String.prototype.trim.call(str)
    }

你可能感兴趣的:(css,html5,html,javascript)