分类导航

程序笔记发布时间：2019-11-07 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Underscore.js 源码学习笔记（下），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

上接 https://www.cnblogs.com/wenruo/p/10078450.html" target="_blank">Underscore.js 源码学习笔记（上）

=== 756 行开始函数部分。

 executeBound = sourceFunc,boundFunc,context,callingContext,args) {
   (!(callingContext  boundFunC)) sourceFunc.apply(context,args);
   self =sourceFunc.prototypE);
   result =sourceFunc.apply(self,args);
   (_.isObject(result)) .bind = restArguments(<span style="color: #0000ff;">function<span style="color: #000000;">(func,args) {

<span style="color: #0000ff;">if (!.isFunction(funC)) <span style="color: #0000ff;">throw <span style="color: #0000ff;">new TypeError('Bind must be called on a function'<span style="color: #000000;">);

<span style="color: #0000ff;">var bound = restArguments(<span style="color: #0000ff;">function<span style="color: #000000;">(callArgs) {

<span style="color: #0000ff;">return executeBound(func,bound,<span style="color: #0000ff;">this<span style="color: #000000;">,args.concat(callArgs));

});

<span style="color: #0000ff;">return<span style="color: #000000;"> bound;

});

.bind(func,args) 就是将 func 的 this 绑定到 context 并且预先传入参数 args （柯里化）

通过 s.concat(callArgs) 实现了柯里化

bound 是绑定 this 后的函数，func 是传入的函数

(!(callingContext boundFunC)) 如果 callingContext 不是 boundFunc 的实例就通过 apply 实现指定函数运行的 this

如果 callingContext 是 boundFunc 的实例，那意味着你可能是这么使用的

{} bindFoo = _.bind(foo,context便什么东西); bindFooInstance = bindFoo();

此时 bindFoo() 的 this 就是 bindFoo 的一个实例

那么 bindFooInstance 的 this 是应该绑定到 context 还是 bindFoo 的实例还是什么呢？

JavaScript 中 this 一共有四种绑定默认绑定 < 隐式绑定 < 显示绑定 < new绑定

所以这里应该优先使用... foo 的实例

思考一下嘛如果是 ES5 中 new foo.bind(context) 是不是应该先使用 foo 的实例嘛 bound 只是一个中间函数

然后就是判断 foo 是否有返回值有的话直接返回该值否则返回 this 也是操作符 new 的规定

_.partial = restArguments({
   placeholder =l.placeholder;
   bound = {
     position = 0,length =s.length;
     args =);
     ( i = 0; i < length; i++{
      args[i] = boundArgs[i] === placeholder ? arguments[position++ (position < arguments.length) args.push(arguments[position++);
     executeBound(func,,args);
  };
  );
.partial.placeholder =<span style="color: #000000;"> ;

<span style="color: #008000;">//<span style="color: #008000;"> e.g.

<span style="color: #0000ff;">function add(a,b) { <span style="color: #0000ff;">return a +<span style="color: #000000;"> b; }

<span style="color: #0000ff;">var addOne = .partial(add,1<span style="color: #000000;">,);

addOne(3); <span style="color: #008000;">//<span style="color: #008000;"> 4

默认占位符是 _ 先给函数指定部分参数不指定的就用下划线占位生成一个新的只需要填写剩余参数的函数

_.bindAll = restArguments({
  keys = flatten(keys,false,false);
   index =s.length;
   (index < 1)   Error('bindAll must be passed function names');
   (index--{
     key ==.bind(obj[key],obj);
  }
});

 obj ={
  name: 'xiaoming''25'{
     {
     Hello() {
     'Hello,I am ' + .name + ' and i am ' + .age + ' years old.'= 'global name'.bindAll(obj,'getName','getAge');
 getName = obj.getName,getAge = obj.getAge,sayHello =Hello;
getName();  
getAge();   
sayHello(); Hello,I am global name and i am undefined years old.

把一个对象的指定方法绑定到该对象。keys 可以是要绑定的函数数组或函数。

_.memoize = {
   memoize = {
     cache = address = '' + (hasher ? hasher.apply();
     (!has(cache,address)) cache[address] = func.apply();
    ={};

这个函数还是简单实用的，通过缓存一个变量 cache 当传入相同的参数时直接返回上一次的结果即可。

hasher 是入参的哈希函数，来判断多次入参是否相同。如果不传哈希函数的话，默认就用第一个参数判断是否重复。所以如果入参不是只有一个的话，记得传 hasher 函数。

比如在计算斐波那契数列可以通过记忆化递归防止大量重复计算。

_.delay = restArguments({
   setTimeout({
     func.apply();
  },wait);
});

通过 _.defer 来执行函数 _.defer(log) 可以使函数放到异步调用队列中，防止一些奇怪的错误吧。（确实遇到了一些时候需要 {...},0) 来执行函数才有效的情况，但是还不知道怎么总结规律= =）

被称作节流函数作用是在一定时间范围内只会被调用一次即使被多次触发

debounce 防抖函数只有当隔指定时间没有重复调用该函数时才会执行，可应用于输入和页面滑动等情况

不传 immediate 的话就是调用后设置定时器 wait 秒之后执行这中间又被调用那么从调用时刻开始重新计时

传 immediate 表示第一次调用就会被执行然后标记之后的 wait ms 内不会被执行这中间又被调用那么从调用时刻开始重新计时

就是一个把一堆函数从右到左连起来执行的函数。函数式编程中很重要的函数。

只有前 times-1 次执行传入的函数 func 后面就直接返回上一次调用的值。

就是只有一次调用的时候会只执行，后面直接返回之前的值。

IE9一下浏览器有bug就是一些属性重写后不能在 for ... in 中遍历到，所以要单独判断。

如果ES5的 ject.keys 存在就直接调用，否则通过 for..in 获取所有的属性。

对对象中每一个值执行 iteratee 函数，和 _.map 的区别是它返回的是对象。

对象中所有属性值为函数的属性名的集合按照字典序排序后返回。

看到有点没看懂，感觉事情有点不简单……于是向下翻到了 1621 行，看到这有一堆代码……

首先一开始的时候（42行）我们看过的定义，_ 是一个函数，_(obj) 返回一个 _ 实例，该实例有一个 _wrapped 属性是传入的 obj 。

我们上面的函数都是 _ 的属性，所以 _(obj) 中是没有这些属性的（_.prototype 中的属性才能被获得）

在上添加一个函数，同时支持链式调用。惊叹于其实现的巧妙。

现在可以继续看 _.tap 作用就是插入一个链式调用中间，查看中间值。

_.tap = { interceptor(obj); j; }; let obj = [1,2,3= (X) => { console.log('中间值是：'X) } let result = _(obj).chain().map(x => x * X).tap(interceptor).filter(x => x < 5); { [number: 4] _wrapped: 4,_chain: true } 获取本来的数据 );

通过例子可以感受的更清晰。接下来_.ismatch 前面看过了，略。

深度比较两个对象是否相等。我已经开始偷懒了，英文有注释的地方不想翻译成中文了。

判断一个值是否为空。为 null、undefined、长度为空的（类）数组、空字符串、没有自己可枚举属性的对象。

批量增加一些判断类型的函数，逻辑和 isArray 一样呀。Map WeakMap Set WeakSet 都是 ES6 新增的数据类型。WeakSet 和 WeakMap 都没听过。该补习一波了~~~

一开始看到的，这个文件就是一个大的IIFE所以会有 arguments ，在 IE 低版本有 bug 不能通过

Object.prototype.toString.apply(arguments) === '[object Arguments]'

来判断。callee 是 arguments 对象的一个属性。可以通过该属性来判断。

都 8102 年了放过 IE 不好吗？Edge 都开始使用 Chromium 内核了~~~~

优化 isFunction 因为在一些平台会出现bug 看了下提到的 issue #1621 （https://github.com/jashkenas/underscore/issues/1621）也不是很明白……

反正我试了下 nodejs v8 和最新版 Chrome 都进入了这个分支……emmm不管了……

判断一个对象是否有指定属性，如果是数组则判断嵌套属性。空数组返回 false。和前面 deepGet 不同的是这里有 hasOwnProperty 判断是否是自有属性。

如果运行在浏览器等环境不能直接导出变量只能将 _ 赋值到全局变量如果之前已经有变量叫做 _ 可以通过 underscore = _.noConflict(); 获得_工具函数同时将 _ 赋值回原来的值。

是一个传入什么就返回什么的函数。看起来好像没什么用，但是前面有用到哒，可以作为 map 等函数的默认 iteratee

a = [,,[1,3],[10,12],

代码不难同样让人困惑的是用途，在 Stack Overflow 找到一个用法举例。

返回一个空函数。可以用在需要填写函数但又不需要做任何操作的地方。

运行一个函数 n 次来生成一个数组。每一次参数都是运行的次数，从 0 开始。

Date.now 是 ES5（还是6）新增的，旧版本没有，通过new Date().getTime()获得

根据 path 获取 obj 的属性值，当获取不到时就返回 fallBACk 的执行结果。当遇到属性为函数时就把上一层对象作为 this 传入执行函数然后继续向下查找。

_.template 我觉得值得用单独一篇博客来讲 = = @H_607_2266@但其实我都是胡诌的！

学过 jsp 的同学应该知道 jsp 中表达式可以写在 <%= %> 之间而脚本可以写在 <% %> 在渲染的时候会将脚本执行表达式也会替换成实际值

let template =用户ID：<%= userId %> 用户名：<%= username %> 用户密码：<%- password %> <% (userId === 1) { console.log('管理员登录...' { console.log('普通用户登录...'%>let render = _.template(templatE);

render({userId: 1,username: '管理员',password: ''});
/* render 返回:

用户ID：1 用户名：管理员用户密码：<pwd>

前端三门语言中只有 JavaScript 是图灵完备语言，你以为你写的模板是 html 添加了一些数据、逻辑，实际上 html 并不能处理这些代码

把模板先生成一个 render 函数然后为函数传入数据就能生成对应 html 了。

除了上面的基础用法我们可以自定义模板的语法注意 key 要和 underscore 中定义的相等

_.templateSetTings ={ evaluate: /<%([\s\S]+?)%>/g, js脚本 interpolate: /<%=([\s\S]+?)%>/g, 表达式 escape: /<%-([\s\S]+?)%>/g 表达式生成后对 html 字符进行转义如 < 转义为 < 防止 XSS 攻击 };

let setTings = { interpolate: /{{([\s\S]+?)}}/ }

let template =

欢迎{{ data }}登录

= _.template(template,{ interpolate: /{{([\s\S]+?)}}/,variable: 'data'); render('OvO'); 欢迎OvO登录

variable 指定了作用域不指定时传入 render 的参数为 obj 的话那么插值中 prop 获取到是 obj.prop 的值

理解了用法现在思考怎样实现如果让你写程序传入一段 js 代码输出运行结果你会怎么办

大概就两种选择 eval() 和 new Function() （原谅我学艺不精还有其他办法吗？）而 eval 只能运行一次 function 是生成一个函数可以运行多次

这样我们可以达到预编译的效果就像 vue 打包后的文件里面是没有 template 的都是编译好的 render 函数

为什么要预编译？我们应该不想每一次运行都 new Function 吧这个效率低大家应该都知道。其次，动态生成的函数，debug 不方便。

我们传入字符串但这个字符串中不只有 js 代码还有些不相关的字符串。所以需要使用正则表达式将其中的 js 代码找出来，templateSetTings 定义的就是这个正则表达式

如果是表达式就把运行结果和前后的字符串连接起来如果是脚本就执行

_.templateSetTings ={ evaluate: /<%([\s\S]+?)%>/g, interpolate: /<%=([\s\S]+?)%>/g, escape: /<%-([\s\S]+?)%>/g // 这是一个一定不会匹配的正则表达式
var noMatch = /(.)^/;

// 因为后面要拼接一个函数体有些字符放到字符串需要被转义这里定义了需要转义的字符
// \u2028 和 \u2029 不知道是啥不想查了= =
var escapes = {
"'": "'",'\': '\','\r': 'r','\n': 'n','\u2028': 'u2028','\u2029': 'u2029'
};

var escapeRegExp = /\|'|\r|\n|\u2028|\u2029/g;

var escapeChar = function(match) {
return '\' + escapes[match];
};

.template = function(text,setTings,oldSetTings) { // oldSetTings 为了向下兼容可以无视
if (!setTings && oldSetTings) setTings = oldSetTings;
// 可以传入 setTings 要和 .templateSetTings 中属性名相同来覆盖 templateSetTings
setTings = .defaults({},.templateSetTings);

// reg.source 返回正则表达式两个斜杠之间的字符串 /\d+/g --> "\d+"
// matcher 就是把三个正则连起来 /<%-([\s\S]+?)%>|<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g
// 加了一个 $ 表示匹配字符串结尾
var matcher = RegExp([
(setTings.escape || noMatch).source,(setTings.interpolate || noMatch).source,(setTings.evaluate || noMatch).source
].join('|') + '|$','g');

var index = 0;
var source = "@H_607_2266@p+='";
// 假设传入的 text 是 '

<%=x+1%>

'
text.replace(matcher,function(match,escape,interpolate,evaluate,offset) {
// 函数的参数分别是：
// 匹配的字符串
// 匹配的分组（有三个括号，所以有三个分组，分别表示 escape,evaluate 匹配的表达式）
// 匹配字符串的下标
// 第一次匹配： "

<%=x+1%>

" 会和 interpolate: /<%=([\s\S]+?)%>/g 匹配 interpolate 的值为 "x+1"
// index = 0,offset 匹配的起始下标就是截取字符串最前面未匹配的那一段
// text.slice(index,offset) 就是 "

" 此时的 source 就是 "p+='

"
// replace(escapeRegExp,escapeChar) 的作用是：
// source 拼接的是一个 '' 包裹的字符串有些字符放到 ' ' 里需要被转义

<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 第二次匹配：匹配字符串（"<p><%=x+1%></p>"）结尾</span>
<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; text.slice(index,offset) 此时获取的是 "</p>"</span>
<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 拼接后 source 为 "__p+='<p>'+\n((__t=(x+1))==null?'':__t)+\n'</p>"</span>
source +=<span style="color: #000000;"&gt; text.slice(index,offset).replace(escapeRegExp,escapeChar);
index </span>= offset + match.length; <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 匹配的起始下标+匹配字符串长度 就是匹配字符串末尾的下标</span>

<span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; (escapE) {
  </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; ((__t = (_.escape(escapE))) == null ? '' : __t)</span>
  <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; _.escape 是将生成的表达式中的 html 字符进行转义</span>
  source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'"<span style="color: #000000;"&gt;;
} </span><span style="color: #0000ff;"&gt;else</span> <span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; (interpolatE) {
  </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; ((__t = (interpolatE)) == null ? '' : __t)</span>
  source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'"<span style="color: #000000;"&gt;;
} </span><span style="color: #0000ff;"&gt;else</span> <span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; (evaluatE) {
  </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 前面的字符串加分号 同时执行该脚本</span>
  source += "';\n" + evaluate + "\n__p+='"<span style="color: #000000;"&gt;;
}
</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 第一次匹配后 interpolate 为 "x+1"</span>
<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 此时 source 是 "__p+='<p>'+\n((__t=(x+1))==null?'':__t)+\n'"</span>
<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 第二次匹配 escape、interpolate、evaluate 都不存在 不会改变 source</span>

<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; Adobe VMs need the match returned to produce the correct offset.</span>
<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 返回 match 只是为了获取正确的 offset 而替换后的 text 并没有改变</span>
<span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; match;

});
source += "';\n";

// 如果没有指定 setTings.variable 就添加 with 指定作用域
// 添加 with 之后 source 为 "with(obj||{}){\n@H_607_2266@p+='

'+\n((t=(x+1))==null?'':__t)+\n'

\';\n}\n"
if (!setTings.variablE) source = 'with(obj||{}){\n' + source + '}\n';

source = "var @H_607_2266@t,p='',@H_607_2266@j=Array.prototype.join," +
"print=function(){p+=@H_607_2266@j.call(arguments,'');};\n" +
source + 'return p;\n';
// 最后生成的 source 为
// "var @H_607_2266@t,print=function(){p+=@H_607_2266@j.call(arguments,'');};
// with(obj||{}){
// p+='

'+
// ((@H_607_2266@t=(x+1))==null?'':t)+
// '

';\n}\nreturn __p;
// "

var render;
try {
// 传入的参数1： setTings.variable || obj
// 传入的参数2： 使用于可以在插值中使用 里的函数
// 函数体 source
render = new Function(setTings.variable || 'obj','',sourc E);
/* 生成函数 render
function anonymous(obj,) {
var @H_607_2266@t,p = '',@H_607_2266@j = Array.prototype.join,print = function() {
p += @H_607_2266@j.call(arguments,'');
};
with(obj || {}) {
p += '

' +
((@H_607_2266@t = (x + 1)) == null ? '' : t) +
'

';
}
return __p;
}
*/
} catch (E) {
e.source = source;
throw e;
}

var template = function(data) {
return render.call(this,data,_);
};

// Provide the compiled source as a convenience for precompilation.
var argument = setTings.variable || 'obj';
template.source = 'function(' + argument + '){\n' + source + '}';

return template;
};

var template = _.template("

<%=x+1%>

");
template({x: 'void'}) //

void1

_.prototype.value = { .prototype.valueOf = .prototype.toJSON = _.prototype.value;

_.prototype.toString = function() {
return String(this._wrapped);
};

AMD（异步模块定义，Asynchronous Module Definition），这里为了兼容 amd 规范。

其实这是我第二遍看，到这次才能说勉强看懂，第一次真的是一头雾水。这期间看了点函数式编程的文章，也许有点帮助吧。

也开始理解了大家为什么说新手想阅读源码的话推荐这个，因为短、耦合度低、而且涉及到很多基础知识。

整体看下来，executeBound、OOP部分和 _.template 这三部分花了很长时间思考。当然抽丝剥茧后搞懂明白的感觉，真的很爽呀哈哈哈哈哈

Underscore.js 源码学习笔记（下）

上接 https://www.cnblogs.com/wenruo/p/10078450.html" target="_blank">Underscore.js 源码学习笔记（上）

大佬总结