Underscore _.template 方法使用详解

为什么用「void 0」代替「undefined」
undefined 并不是保留词（reserved word），它只是全局对象的一个属性，在低版本 IE 中能被重写。

事实上，undefined 在 ES5 中已经是全局对象的一个只读（read-only）属性了，它不能被重写。但是在局部作用域中，还是可以被重写的。

void 运算符能对给定的表达式进行求值，然后返回 undefined MDN

常用类型判断以及一些有用的工具方法
_.isArray = nativeIsArray || function(obj) {
return toString.call(obj) === '[object Array]';
};

// Add some isType methods: isArguments, isFunction, isString, isNumber, isDate, isRegExp, isError.
// 其他类型判断
_.each(['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp', 'Error'], function(name) {
_['is' + name] = function(obj) {
return toString.call(obj) === '[object ' + name + ']';
};
});
使用 Object 的原型方法 toString()来获取 obj 的字符串表示，形式是 [object class]

// Is the given value NaN? (NaN is the only number which does not equal itself).
_.isNaN = function(obj) {
return _.isNumber(obj) && obj !== +obj;
};
原生 isNaN 方法存在怪异行为：如果 isNaN 函数的参数不是 Number 类型, isNaN() 会首先尝试将这个参数转换为数值，然后才会对转换后的结果是否是 NaN 进行判断。MDN

for ... in 存在的浏览器兼容问题你造吗
// IE < 9 下不能用 for in 来枚举的 key 值集合
var nonEnumerableProps = ['valueOf', 'isPrototypeOf', 'toString',
'propertyIsEnumerable', 'hasOwnProperty', 'toLocaleString'];
内部方法 createAssigner 详解
// for-in 会遍历出一个对象从其原型链上继承到的可枚举属性
var allKeys = function (obj) {
var keys = [];
for (var key in obj) keys.push(key);
return keys;
};

var keys = Object.keys

var createAssigner = function (keysFunc, undefinedOnly) {
    return function (obj) {
        var length = arguments.length;
        if (length < 2 || 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];
                 // undefinedOnly 参数为 true, 即 !undefinedOnly 为 false
                // 那么当且仅当 obj[key] 为 undefined 时才覆盖
                // 即如果有相同的 key 值，取最早出现的 value 值
                if (!undefinedOnly || obj[key] === void 0) obj[key] = source[key];
            }
        }
        return obj;
    };
};

var a = {a: 'hello'}
function Super(name) {
    this.name = name;
}
Super.prototype.superman = 'superman';

var b = new Super('world')
var c = {c: 'hello'}


console.log(createAssigner(allKeys)(a, b)) // {a: "hello", name: "world", superman: "superman"}
console.log(createAssigner(keys)(c, b)) // {c: "hello", name: "world"}

createAssigner 返回了一个函数，这个返回的函数引用了外面的一个变量，这是一个典型的闭包。这有利于设计用途类似的 API。

JavaScript 中是如何比较两个元素是否 "相同" 的
普通类型判断

// 0 和 -0 被认为是不相等, 1/0 === 1/-0 => false
if (a === b) return a !== 0 || 1 / a === 1 / b;
// 如果 a 和 b 有一个为 null（或者 undefined）
if (a == null || b == null) return a === b;
// 如果 a 和 b 类型不相同，则返回 false
var className = toString.call(a);
if (className !== toString.call(b)) return false;
switch (className) {
    case '[object RegExp]':
    case '[object String]':
        // 转为 String 类型进行比较
        return '' + a === '' + b;
    case '[object Number]':
        // NaN 与 NaN 相等
        if (+a !== +a) return +b !== +b;
        return +a === 0 ? 1 / +a === 1 / b : +a === +b;
    case '[object Date]':
    case '[object Boolean]':
        return +a === +b;
}

Array 和 Object 类型判断 [NOT Completed]

Object Functions 相关源码拾遗 & 小结
Object.create() Polyfill

var create = (function () {
//为了节省内存，使用一个共享的构造器
function Temp() {
}

// 使用 Object.prototype.hasOwnProperty 更安全的引用
var hasOwn = Object.prototype.hasOwnProperty;

return function (O) {
    // 1. 如果 O 不是 Object 或 null，抛出一个 TypeError 异常。
    if (typeof O != 'object') {
        throw TypeError('Object prototype may only be an Object or null');
    }

    // 2. 使创建的一个新的对象为 obj ，就和通过
    //    new Object() 表达式创建一个新对象一样，
    //    Object是标准内置的构造器名
    // 3. 设置 obj 的内部属性 [[Prototype]] 为 O。
    Temp.prototype = O;
    var obj = new Temp();
    Temp.prototype = null; // 不要保持一个 O 的杂散引用（a stray reference）...

    // 4. 如果存在参数 Properties ，而不是 undefined ，
    //    那么就把参数的自身属性添加到 obj 上，就像调用
    //    携带obj ，Properties两个参数的标准内置函数
    //    Object.defineProperties() 一样。
    if (arguments.length > 1) {
        // Object.defineProperties does ToObject on its first argument.
        var Properties = Object(arguments[1]);
        for (var prop in Properties) {
            if (hasOwn.call(Properties, prop)) {
                obj[prop] = Properties[prop];
            }
        }
    }

    // 5. 返回 obj
    return obj;
};

})();
_.create 方法思路大致如此：

var baseCreate = function(prototype) {
if (!_.isObject(prototype)) return {};
if (nativeCreate) return nativeCreate(prototype);
Ctor.prototype = prototype;
var result = new Ctor;
Ctor.prototype = null;
return result;
};

_.create = function(prototype, props) {
var result = baseCreate(prototype);
if (props) _.extendOwn(result, props);
return result;
};
如何优雅地写一个「在数组中寻找指定元素」的方法
[NOT Completed]

JavaScript 数组去重
双重循环法：

function unique(arr) {
return arr.filter(function (item, index, array) {
// indexOf()方法返回给定元素能找在数组中找到的第一个索引值
return array.indexOf(item) === index;
});
}
ES6:

function unique(arr) {
return Array.from(new Set(arr));
}
JavaScript 数组展开以及 underscore 重要的内部方法 flatten 详解
双重循环法：

function flatten(arr) {
var result = [];
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
result.push(arr[i][j]);
}
}
return result;
}
apply + concat：

function flatten(arr) {
return Array.prototype.concat.apply([], arr);
}
MDN

多维数组：

function flatten(arr) {
var tmp = arr;
var result = arr;
while(tmp instanceof Array) {
result = Array.prototype.concat.apply([], result);
tmp = tmp[0];
}
return result;
}

flatten([[[1, 2], [1, 2, 3]], [1, 2]]) // [1, 2, 1, 2, 3, 1, 2]
Array Functions 相关源码拾遗 & 小结
[NOT Completed]

你可能不知道的 NaN 以及 underscore 1.8.3 _.isNaN 的一个 BUG
var isNaN1 = function (obj) {
return obj !== obj;//错误：new Number(NaN) => false
};
var isNaN2 = function (obj) {
return _.isNumber(obj) && obj !== +obj;//错误：new Number(0) => true
};
var isNaN3 = function (obj) {
return _.isNumber(obj) && isNaN(obj);//正确：new Number(NaN) => true
};
对于NaN的判断，如果只针对Number类型，用 underscore 最新版的 _.isNaN3 判断完全没有问题，
或者用 ES6 的 Number.isNaN，两者的区别就在于一个 new Number(NaN)

Number.isNaN(new Number(NaN)) => false
JavaScript 特殊对象 Array-Like Objects 详解
ArrayLike 类数组需满足两点要求：

有 length 属性
length 为非负 Number 类型
var isArrayLike = function(collection) {
var length = getLength(collection);
return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};
ArrayLike to Array:

function fn() {
var arr = [].slice.call(arguments);
arr.push(4); // arr -> [1, 2, 3, 4]
}
MDN

ES6:

var str = "helloworld";
var arr = Array.from(str);
// ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]
MDN

JavaScript 数组乱序
splice 方法：

function shuffle(a) {
var b = [];

while (a.length) {
//https://coderwall.com/p/9b6ksa/is-faster-than-math-floor
var index = ~~(Math.random() * a.length);
b.push(a[index]);
a.splice(index, 1);
}

return b;
}
sort 方法：

function shuffle(a) {
// concat 复制原数组
return a.concat().sort(function (a, b) {
return Math.random() - 0.5;
});
}
注意：Array.prototype.sort 不能做到完全随机，这取决于排序算法的实现

Fisher–Yates Shuffle:

// 我们每一次循环从前 len - i 个元素里随机一个位置，将这个元素和第 len - i 个元素进行交换，迭代直到 i = len - 1 为止
// 比如长度为5的数组，第一次循环从前五个元素中随机一个和第五个元素交换，
// 第二次从前四个元素中随机一个和第四个元素交换
function shuffle(a) {
    var arr = a.concat()
    var len = arr.length;
    for (var i = 0; i < len - 1; i++) {
        var idx = ~~(Math.random() * (len - i));
        var temp = arr[idx];
        arr[idx] = arr[len - i - 1];
        arr[len - i - 1] = temp;
    }
    return arr;
}

浅谈 underscore 内部方法 group 的设计原理
[NOT Completed]

关于 bind 你可能需要了解的知识点以及使用场景
bind()方法会创建一个新函数。当这个新函数被调用时，bind()的第一个参数将作为它运行时的 this, 之后的一序列参数将会在传递的实参前传入作为它的参数。

偏函数与柯里化

函数柯里化的本质是，可以在调用一个函数的时候传入更少的参数，而这个函数会返回另外一个函数并且能够接收其他参数。是一种实现多参数函数的方法。

function add(x){
return function(y){
return x + y;
}
}
var inc = add(1)
var dev = add(-1)
inc(1) // 2
dev(1) // 0
偏函数应用到了 bind ，他解决这样的问题：如果我们有函数是多个参数的，我们希望能固定其中某几个参数的值。

function list() {
return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
bind 方法的兼容实现
[NOT Completed]

JavaScript 函数去抖和函数节流应用场景辨析
通过 RxMarbles(珠宝图) 可以形象地理解函数去抖和函数节流

debounce
throttle
throttle 和 debounce 的应用场景:

(1)按一个按钮发送 AJAX：给 click 加了 debounce 后就算用户不停地点这个按钮，也只会最终发送一次；如果是 throttle 就会间隔发送几次

(2)监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；
如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

underscore 函数去抖的实现
函数去抖就是对于一定时间内的连续的函数调用，只让其执行一次。核心思想是重复添加定时器。

简单实现：

_.debounce = function(func, wait, immediate) {
var timeout, args, context, timestamp, result;

var later = function() {
  var last = _.now() - timestamp;

  if (last < wait && last >= 0) {
    timeout = setTimeout(later, wait - last);
  } else {
    timeout = null;
    if (!immediate) {
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    }
  }
};

return function() {
  context = this;
  args = arguments;
  timestamp = _.now();
  var callNow = immediate && !timeout;
  if (!timeout) timeout = setTimeout(later, wait);
  if (callNow) {
    result = func.apply(context, args);
    context = args = null;
  }

  return result;
};

};
function print() {
console.log('hello world');
}

Function Functions 相关源码拾遗
[NOT Completed]

浅谈 Web 中前后端模板引擎的使用
后端 MVC

后端 MVC 模式中，一般从 Model 层中读取数据，然后将数据传到 View 层渲染（渲染成 HTML 文件），而 View 层，一般都会用到模板引擎。比如PHP 的 smarty 模板引擎。

{{$key}}
{{$key2}}

前端模板

假设接口数据如下：

[{name: "apple"}, {name: "orange"}, {name: "peach"}]
渲染后的页面如下：

apple
orange
peach

前端模板引擎出现之前，我们一般会这么做：

将 HTML 代码（View 层）和 JS 代码（Controller 层）混杂在了一起很容易出错也不利于维护。所以前端模板引擎出现了：

Node 中间层

模板引擎虽然降低了耦合度，但是却不利于 SEO。我们可以让 Node 作为中间层。简单地说就是让一门后台语言提供接口，Node 中间层用模板引擎来渲染页面，使得页面直出。不失为一种比较好的解决方案。

作者：bigggge
链接：https://www.jianshu.com/p/92ea72e998c3
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

posted @ 2020-01-02 10:22 深夜独行侠阅读(407) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

深夜独行侠

Underscore _.template 方法使用详解

公告