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

2018年11月12日Web前端0

在看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.js和shared.js

Element-uiVue源码解析纯原创

目录