【愣锤笔记】underscore源码里中高级前端所须要掌握的内容

时间 2019-11-21

标签愣锤笔记 underscore 源码中高级前端须要掌握内容繁體版

原文原文链接

underscore.js做为一个函数式库，也能够说是个工具库，在平常开发中能够显著的帮咱们提示开发效率。固然了，同等的还有lodash等更为流行的库，可是这并不妨碍咱们欣赏underscore.js的设计艺术，体验做者强大的代码抽象和函数复用功力。html

代码更多的在于分享一些有用、但却容易被忽略的内容或设计逻辑。像一些已经烂大街的函数节流/去抖啊，就再也不啰嗦了。前端

还等什么呢？开始，宝贝儿～～node

基础

当即执行函数

;(function() {
    // 代码内容
})();

// ES6一个文件自己就是一个模块
// 所以能够在ES6中不须要当即执行函数
复制代码

实现一个可靠的undefined

// js中undefined是能够重写的
function test() {
    var undefined = 1;
    console.log(undefined) // 1
}
test()

// 实现一个可靠的undefined
void(0) // undefined
void 0 // undefined

// 或者jq的方式
;(function(window, undefined){
    // 在当即执行函数中不传递undefined来获取undefined
    console.log(undefined)
})(window)
复制代码

环境判断，获取顶层的全局环境保证在客户端和服务端均可用，要进行环境判断获取不一样的顶层全局对象。

/**
 * underscore实现
 * 基本的一个判断思路是，若是是客户端则返回客户端的全局对象
 * 若是是服务端，返回服务端的全局对象
 * 不然返回this对象
 * 再不然，返回一个空对象
 */ 
var root = typeof self == 'object' && self.self === self && self ||
            typeof global == 'object' && global.global === global && global ||
            this ||
            {};

// 实现细节 
// 若是self是一个对象，检测self.self是否等于self，若是相等返回self。
typeof self == 'object' && self.self === self && self

// global在node环境中指代全局环境
复制代码

客户端中,如下都表示全局对象window：git

window
window.window
window.self
self
self.self
self.window
document.defaultView
复制代码

做者采起self来判断，是由于考虑到一些没有窗口的上下文，例如Web Workers。github

对象的建立

// 对象类型检测
var isObject = function(obj){
    var type = typeof obj;
    return type === 'function' || type === 'object' && !!type;
}

// 定义用来建立对象的构造函数
var Ctr = function(){};

// Es5原生支持的建立方法
var nativeCreate = Object.create;

// 建立对象
var baseCreate = function (prototype) {
    // 若是传入的参数不是对象，则返回空对象
    if (!isObject(prototype)) return {};
    // 若是是原生支持create方法，则使用原生方法
    if (nativeCreate) return nativeCreate(prototype);
    // 不然，经过Ctr构造函数继承prototype对象后实例化建立一个对象
    Ctr.prototype = prototype;
    var result = new Ctr;
    // 防止内存泄露，用完即销毁
    Ctr.prototype = null;
    return result;
};

// 换成咱们可使用以下方法建立
var baseCreate = Object.create || function(prototype) {
    if (!isObject(prototype)) return {};
    var F = function(){};
    F.prototype = prototype;
    var result = new F();
    F.prototype = null;
    return result;
};
复制代码

判断一个对象是否含有一个属性

// 使用hasOwnProperty实现判断
var has = function(obj, path) {
    return obj != null && Object.hasOwnProperty.call(obj, path);
};
复制代码

利用闭包返回获取特定属性的函数

var shallowProperty = function(key) {
    return function(obj) {
        return obj == null ? void 0 : obj[key];
    };
};
 
// 由此能够获得一个获取length属性的函数
var genLength = shallowProperty('length');
复制代码

判断类数组

// 判断类数组的思想是：
// 该集合拥有length属性且类型为number
// 而且length值>= 0 && <= 数组长度的极限值
var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
var isArrayLike = function(collection) {
    var length = getLength(collection);
    return typeof length == 'number' &&
            length >= 0 &&
            length <= MAX_ARRAY_INDEX;
};
复制代码

乱序数组和洗牌算法

// 先定义一些工具

// 求min-max直接的随机数，含min，不含max
const random = (min, max) => {
    return min + Math.floor(Math.random() * (max - min + 1));
}
// 接收一个值并直接返回
const identity = arg => arg;

// 抽样算法
// 循环样本，不停的从剩余样本中随机抽出一个样本，
// 将抽出的样本与当前样本互换位置，直到知足抽样数量中止
const sample = (arr, n) => {
    var sampleArr = arr.map(identity);
    var index = 0,
        length = sampleArr.length,
        last = sampleArr.length - 1;
    // 最大抽样数为数组长度
    n = Math.max(Math.min(n, length), 0);
    for (; index < n; index++) {
        // 从剩余样本随机抽样
        var tempIndex = random(index, last);
        // 将抽样结果与当前样本互换
        var temp = sampleArr[index]
        sampleArr[index] = sampleArr[tempIndex]
        sampleArr[tempIndex] = temp;
    }
    // 返回抽样结果
    return sampleArr.slice(0, n)
}
sample([1,2,3,4,5,6], 4) // 随机抽出四个

// 洗牌算法
const shuffle = (arr) => sample(arr, Infinity);
复制代码

筛选数组中的值有意义的项

// 利用filter和Boolean筛选
const arr = [1,2, '', false, undefined, null, NaN, '4'];
arr.filter(Boolean); // [1, 2, "4"]
复制代码

函数相关

延迟执行

// 延迟执行，就是运用一个定时器，延迟执行函数
var delay = function(func, wait) {
    var args = Array.prototype.slice.call(arguments, 2);
    return setTimeout(function() {
        return func.apply(null, args);
    }, wait);
};

// 注意，在使用时最后先绑定好函数的this做用域，
// 避免以后的this被错误绑定
var log = console.log.bind(console);
delay(log, 1000, '123'); // 1s后输出123
复制代码

函数组合

// 从右往左执行
var compose = function() {
    var args = arguments,
        start = args.length - 1;
    return function() {
        var i = start;
        var result = args[start].apply(this, arguments);
        while(i--) result = args[i].call(this, result);
        return result;
    }
}

// 执行
var funcA = (str) => str + 'aaaa';
var funcB = (str) => str + 'bbb';
var func = compose(funcB, funcA);
console.log(func('hello, ')); // hello, aaaabbb
复制代码

对象

检测对象是否含有某个属性

var has = function(obj, key) {
    return (obj !== null && obj !== undefined) &&
        Object.prototype.hasOwnProperty.call(obj, key);
}
var o = {a: 1};
console.log(has(o, 'a')); // true
console.log(has(o, 'b')); // false
复制代码

Object.keys的profill

// MDN上提供的profill
// 在不支持Object.keys的时候进行profill
// 增长了ie9之前for/in不支持Enmus的遍历的bug
if (Object.keys) {
    Object.keys = (function() {
        'use strict';
        var hasOwnProperty = Object.prototype.hasOwnProperty,
            hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
            dontEnums = [
              'toString',
              'toLocaleString',
              'valueOf',
              'hasOwnProperty',
              'isPrototypeOf',
              'propertyIsEnumerable',
              'constructor'
            ],
            dontEnumsLength = dontEnums.length;
        return function(obj) {
            if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
                throw new TypeError('Object.keys called on non-object');
            }
            var result = [],
                prop, i;
            // 循环获取全部自身属性
            for (var prop in obj) {
                if (hasOwnProperty.call(obj, prop)) {
                    result.push(prop);
                }
            }
            // 若是是IE9之前，修复for/in没法遍历Enums类型的属性bug
            if (hasDontEnumBug) {
                for (i = 0; i < dontEnumsLength; i++) {
                    // 即检测，若是obj重写了Enums类型的属性，保证能够遍历到
                    if (hasOwnProperty.call(obj, dontEnums[i])) {
                        result.push(dontEnums[i]);
                    }
                }
            }
            return result;
        }
    })();
}
复制代码

对象的扩展

// underscore实现了一个很巧妙的扩展函数的工厂函数
// 经过该工厂函数来建立各类不一样的扩展函数
var createAssigner = function(keysFunc, defaults) {
    // 参数keysFunc是用来获取keys的函数
    // default表示是否覆盖原属性,，默认覆盖
    return function(obj) {
        var length = arguments.length;
        if (defaults) obj = Object(obj);
        if (length < 2 || obj === undefined || obj === null) return obj;
        // 遍历多有待扩展对象
        for (var index = 1; index < length; index++) {
            var source = arguments[index],
                keys = keysFunc(source),
                l = keys.length;
            // 遍历每一个对象的全部属性
            for (var i = 0; i < l; i++) {
                var key = keys[i];
                // 只有default为true或者原属性为default的时候才覆盖
                if (!defaults || obj[key] === void 0) obj[key] = source[key];
            }
        }
        return obj;
    }
}

// 建立一个只扩展自身属性的函数，不包含继承的
// 这里Object.keys只是为了简化，underscore中有_.keys实现来实现一样的效果
var extendOwn = assign = createAssigner(Object.keys);
console.log(extendOwn({a: 1, b: 2}, {c: 1}, {d: 2}));

// 扩展全部属性，包含继承的
var entends = createAssigner(_.allKeys)
复制代码

Object.prototype.hasOwnProperty

// 这里想说的是，能够看到不少库都会使用下面这种方式，而不是obj.hasOwnProperty
// 缘由是防止用户的对象重载了该属性，从而致使报错
// 由于js并无把hasOwnProperty做为关键词被平板2
Object.prototype.hasOwnProperty
复制代码

数据类型检测

// 如下数据类型均可以经过
// Object.prototype.toString的方法监测数据类型
// 和underscore的检测原理是同样的，实现方法不同
'Arguments',
'Function',
'String',
'Number',
'Date',
'RegExp',
'Error',
'Symbol',
'Map',
'WeakMap',
'Set',
'WeakSet'

// 写一个类型检查函数的工厂函数
var createTypeCheck = function(name) {
    return function(obj) {
        return Object.prototype.toString.call(obj) === '[object ' + name + ']';
    }
}

// 经过工厂函数建立类型检查函数
var isNumber = createTypeCheck('Number');
console.log(isNumber(123), isNumber(''));

var isString = createTypeCheck('String');
console.log(isString(123), isString(''));

var isObject = createTypeCheck('Object');
console.log(isObject(123), isObject(''), isObject({}));

// 数组检查，能够优先使用原生的方法
// 也正体现了该写法比underscore的灵活性
var isArray = Array.isArray || createTypeCheck('Array');
console.log(isArray([]), isArray({})); // true false

// 其余同理
……

// 检查是不是元素
var isElement = function (obj) {
  return !!(obj && obj.nodeType === 1);
};

// undefined检查
var isUndefined = function(obj) {
    return obj === void 0;
}
复制代码

解决冲突

// 解决库的命名冲突
// 像underscore库的_，很容易与其余lodash等库冲突，还有jq/zepto的$等
// 所以提供了noConflict方法来解决冲突
// 核心思想就是交还原库的控制权，从新命名
_.noConflict = function() {
    // 交还原库的控制权
    root._ = previousUnderscore;
    // 返回this能够给该库从新命名
    return this;
};

// 例如
var underscore = _.noConflict();
复制代码

随机数

// 生成 [min, max] 直接是随机数，包含min，不含max
// 若是只传递一个参数，则生成[0, max]直接的随机数
var random = function(min, max) {
    if (max == null) {
        max = min;
        min = 0;
    }
    return min + Math.floor(Math.random() * (max - min))
}
复制代码

缓存常量

// 天了撸，利用闭包，绕了一大圈，
// 结果只是把值原封不动的返回了。
// 看似无用，实则能够帮咱们缓存当时的值
var memoConstant = function(value) {
    return function() {
        return value;
    };
};

// 实例
var a = 1;
var constantA = memoConstant(a);
a = 2;
console.log(constantA())
复制代码

参考资料

By End

百尺竿头、日进一步
我是愣锤，一名前端爱好者
欢迎批评与交流算法

本期配图主题：百变女神陈钰琪小姐姐。喜欢的点个赞吧～～～api