element-ui merge.js和shared.js文件源码学习

2018年11月12日Web前端

在看input组件之前,先看下他提前引入的模块,migrating.js和emitter.js前面都讲解过了,这儿看下两个utils中的两个js文件。

一、merge.js

文件直接export出一个function,这个fun中,嵌套了两层循环。

先看下第一层循环,显然从形参target之后开始遍历,并对这些参数做了检测。 第二层循环这些引用类型的属性,并用hasOwnProperty保证这些属性是自有属性。如果该值不是undefined,就赋值到target的同名属性下。

所以这merge.js就是用于对象合并的,并且是浅拷贝。

// merge拷贝函数,将target之后的属性按键值赋值到target下
// 若该参数在target中,则会被覆盖
// 是浅拷贝,注意引用关系
export default function(target) {
    // 从target之后开始遍历参数
    for (let i = 1, j = arguments.length; i < j; i++) {
        // 检测参数,排除false类(undefined等)的参数
        let source = arguments\[i\] || {};
        // 遍历循环参数
        for (let prop in source) {
            // in会遍历原型上的属性,用hasOwnProperty确定是source自己的属性
            if (source.hasOwnProperty(prop)) {
                let value = source\[prop\];
                // 若是source自己属性,且不是undefined,则添加到target的prop的属性下
                if (value !== undefined) { // 仅判断自身,注意被覆盖的问题
                    target\[prop\] = value; // 没有继续遍历value的层级,当对象时,会有引用关系
                }
            }
        }
    }
    return target;
};

二、shared.js

该文件下有两个方法,都比较的简单:

isDef

export function isDef(val) {
    // 不能为undefined且不能等于null
    return val !== undefined && val !== null;
}

判断参数不是undefined且不是null,判断值是不是已经定义了(表面可以这么理解)。

isKorean

export function isKorean(text) {
    const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi;
    return reg.test(text);
}

该方法则是取判断对应字符是不是含有南北朝鲜字符(朝鲜和韩国)。

带注释的文件下载:merge.jsshared.js