underscore源码（Underscorejs）
本文目录一览：
- 1、读underscore源代码需要设计模式的基础吗
- 2、基于mvc的javascript富应用开发 怎么样
- 3、怎么阅读underscore源码
- 4、哪些JavaScript 框架的源代码最值得阅读和学习
- 5、做为一名前端开发人员，有哪些值得一读的JS代码
读underscore源代码需要设计模式的基础吗
读underscore源代码需要设计模式的基础吗
1、FACTORY—追MM少不了请吃饭了，麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西，虽然口味有所不同，但不管你带MM去麦当劳或肯德基，只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory
工厂模式：客户类和工厂类分开。消费者任何时候需要某种产品，只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时，工厂类也要做相应的修改。如：如何创建及如何向客户端提供。
2、BUILDER—MM最爱听的就是“我爱你”这句话了，见到不同地方的MM,要能够用她们的方言跟她说这句话哦，我有一个多种语言翻译机，上面每种语言都有一个按键，见到MM我只要按对应的键，它就能够用相应的语言说出“我爱你”这句话了，国外的MM也可以轻松搞掂，这就是我的“我爱你”builder。（这一定比美军在伊拉克用的翻译机好卖）
建造模式：将产品的内部表象和产品的生成过程分割开来，从而使一个建造过程生成具有不同的内部表象的产品对象。建造模式使得产品内部表象可以独立的变化，客户不必知道产品内部组成的细节。建造模式可以强制实行一种分步骤进行的建造过程。
3、FACTORY METHOD—请MM去麦当劳吃汉堡，不同的MM有不同的口味，要每个都记住是一件烦人的事情，我一般采用Factory Method模式，带着MM到服务员那儿，说“要一个汉堡”，具体要什么样的汉堡呢，让MM直接跟服务员说就行了。
工厂方法模式：核心工厂类不再负责所有产品的创建，而是将具体创建的工作交给子类去做，成为一个抽象工厂角色，仅负责给出具体工厂类必须实现的接口，而不接触哪一个产品类应当被实例化这种细节。
基于mvc的javascript富应用开发 怎么样
第一个问题是，看书有啥好处看
好处应该是不言而明的，书看多了，基础会逐渐夯实起来。看多了，自己的判断力，自然就上来了。看别人的文章，就能很快判断出，对方每块儿讲得对不对，哪块儿又是自己不清楚的，模棱两可的。当然也为看源码，分析源码提供了基础。
10本书读2遍的好处，应该大于一本书读20遍。10本书的交集，那就是基础知识的核心，而并集那就是所有的知识。好书当然要多读，反复读。但是只读一本是不行的。因为每本书的侧重点都不一样。从不同的侧面，去理解一个知识点，是很有意义的。
所以特别佩服印度人，他跟你讲英文，你一个词语没听懂，他会蹦出n个同一意思的单词，你听懂一个，就ok了。看书也是这样的，某一块讲得不透彻，不用担心，其他书籍可以帮助你来了解。
第二个问题是，书籍推荐。
个人觉得不错的，没事可以翻翻的。书籍如下：
《JavaScript面向对象编程指南》，风格轻松易懂，比较适合初学者，原型那块儿讲得透彻，12种继承方式呢。
《js权威指南》、《js高级程序设计》，这两本书经典是经典，但是太厚，适合把其中任意一章都当成一本书来读。洋洋洒洒，很难一口气看完。比较适合当做参考书。
《你不知道的javascript》狙击js核心细节，闭包、原型、this讲得都还清楚。目前《中册》也出了，还在看。
《js设计模式与开发实践》js设计模式也是要学的，此书把js的设计模式讲得非常清晰，一点不晦涩，看起来没多少难度。
《正则指引》，分析源码时，如果正则表达式不懂，没法进行下去的。此书相对来说讲得比较清晰。
《基于MVC的JavaScript Web富应用开发》，看完后，基本能写出自己的mvc框架了。是本好书。
《javascript函数式编程》，js是一门函数式语言，此书是函数式编程一个入门，函数是一等公民那是非常重要的。
《js忍者秘籍》，jq作者写的，没有传说中的那么难读，话说就算你看完并理解所有知识点，也不会达到世界高手级别的。因为你还没有做到随心所欲。
《JavaScript框架设计》，如果初看此书，会觉得此书有罗列代码之嫌。在我看来，此书讲究的是框架的全局观。以上书籍是我认为是成就高手之路上必须看的，也需要反复看。
css相关的书籍，说实话我看得比较少，总共有六七本吧。有两本必须推荐一下：
《css权威指南》，css基础知识点那是讲得非常清楚的。什么层叠优先级、line-height啥的。不是随便一本书都敢叫逗权威指南地的。
《css揭秘》，此书我也是不断的看，此书才不屑于全面讲CSS3各属性呢。css规范文档能讲的，它只会讲你最不在意的。此书解决的47问题，解决思路和解决方案同等重要，很有启发性。以上各书你都可以不买，至少买本此书吧。
第三个问题，怎么看。
想必很多同学，都想看书，但是很难看下去。文字部分相对来说还能看看，一遇到代码，头皮就发麻了。此问题一开始时我也遇到的。
说一个学习理论。比如说学英语，有个开水理论。词汇量必须达到6000才行，如果没达到，英文水平不会上去的，这跟烧开水一样，没事烧烧，放着凉凉，从来没烧到100度，那么此水是永远不能喝的。一旦煮沸过，就可以随时喝了。
20本书你看不下去，说明什么呢看任何一本书，你都没看完过。熟悉的，永远只是前三章。别笑，我原先也是这样的。
那么现在的问题是，怎么把一本书看完呢看很简单，敲。《基于MVC的JavaScript Web富应用开发》这本书我看时，就是这样，终于有一天，我下定决心要把此书从头到尾敲一遍。文字加代码都敲，然后就一章一章得看完了。代码敲一遍后，你会发现，没之前看起来的那么难。
如果你属于一看书就犯困那种同学。强烈建议你把《javascript面向对象编程指南》此书从头到尾敲一遍。坚持看完一本书后，信心就上来了。先保证看完一本再说,看完3本后，基本应该能做到几天就能看一本了。万事开头难，加油吧。
第四个问题，看书的层次问题。
书看完后，要自己总结，要与其他书籍对比看。有同学同时对比着看《权威指南》和《高设》来的。随便拿出个知识点，你都能闭着眼睛说得头头是道，说明水平够了。
下一块就是源码的学习了。看框架源码之前，想说一件事情：dom的api不懂，没问题，你可以百度。
但是正则一定要先研究研究，不然大多数人去尝试分析源码时，遇到的挫折都在于此。
怎么去阅读源码呢看敲，照着敲。
有哪些代码值得去敲呢看优秀框架或者库的源码都值得你去敲。但是拿jq来敲，来入门，那不行的。原因：太他么长了。八九千行呢！！
个人觉得underscore.js库是不错的第一个选择。原因都是工具方法，敲完以后自己的水平应该略有小成吧。其实有一些api的实现，你要把它当成getElementById一样，深深的印在脑海里。比如extend方法，必须张口就来。敲完underscore库后，可以考虑去看看《javascript函数式编程》这本书了。
jq的源码不好敲。那么zepto的源码比较少1800多行，敲一天应该敲完了。敲几遍后，把所有不懂的地方，都百度清楚，然后就可以写自己的类jq的库了。然后就可以作为一项技能写进自己的简历里。比如逗创建过自己的jQuery库地。当然敲的过程，还能帮助自己对jq的api认识。
然后是backbone.js，因为此框架是以类jq和underscore为基础的mvc框架。代码也没多少行。敲吧。spine.js与backbone类似。可以在敲其之前，先看看那本《基于MVC的JavaScript Web富应用开发》。希望你的简历可以添加这么一笔，逗创建过自己的mvc框架地。
其他的，我也敲过一些。包括jq.validate.js，包括一些插件。如果你愿意的话，bootstrap你可以去敲敲啊。源码挺多的，可以按插件逐个来敲。分析明白了，轮播、分页、下拉框等等的插件那还不是分分钟随手就写一个了。最起码看看人家api接口是怎么设计的也是极好的。话说个人在阅读其css代码中，也学到了不少东西。说到插件，有两个必须提提，一个是表格插件，一个是树。都敲完，简历里可以这么写上，逗创建过自己的UI框架地。
当然了，你也可以敲你喜欢的框架代码，重要的是明白其实现原理，最好理解其为啥那么设计，如果对设计模式比较熟悉的话，会经常发现原来是这么回事。
照着敲只是分析源码的入门，用途也是为了学习，最后能用在自己的项目中，那是才是正道。就算没啥用，也是打发时间的好方式，比看电视剧强多了。我闲着无聊时，就背着敲underscore源码。最后说句，如果你简历上能如期写上那几句话后，必须是大神。加油吧。
后记
写本文的最初目的，正如文章开头说的那样，方便自己回复大家的提问。本站的任何一篇分享学习经验的文章，基本都会引起共鸣，这确实是一个值得讨论的话题。这里再说说几个事情。
有人问我前端工作经验事情。
没几年。三年多。
初学者或新手（beginner）怎么办看
看书和分析源码是重要的提高方式，但不适合新手。新手需要的是能快速的入门和入行，能快速的上手工作。一种快捷的学习方式就是看视频。正如有的同学说得那样，知道有哪些东西，怎么用就可以了。
看视频是有好处的，首先它是一种被动学习方式。我最开始的入门也是看视频来的，只需要看就行了。一遍没懂，再放一遍，我基本上是1.5倍数去看的。
而读书是一种主动方式，需要自己一页一页翻。需要自己主动的去理解。而很多东西，也许只是视频老师一句话，就能突出的重点，需要我们自己去解读。还有另一件事情是，比如发现自己某个知识点不太清楚，可以单独去百度。比如this，文章很多的。这种学习方式也是快速掌握知识点的好办法。
书籍需要技术评审，那么看文章一定要看看评论。不过视频就不好说了，视频一般都不会讲得太深入，偶尔也有讲错的。当年我也曾被一些视频误导过，建议找不错的视频看看。各大网站培训机构的视频挺多的。
看书和分析源码的时机。
但已经工作一年半载时，正是提高的好时候，此时可以去看书了。全面系统的梳理知识点，扫清自己的盲区。如果只是靠项目经验是不够的，通过项目来学习，那肯定是必须的，工作本身就是一个学习的过程。
但是工作三年不看书的话，学又能学到多少呢看更何况每个项目都很类似，一直处在舒适区，那真就是5年经验重复第一年的了。所以我不认同这句话：面试时强调自己的学习能力是工作能力不强的表现。3年经验的水平，完全有可能超过5年的。
没有时间去学习看
如果你还没毕业，就已经天天在本站混了，其实你领先了一大步。都是混过大学的，天天充斥着lol和电视剧的陪伴，我只想说进入社会是要还的。最可怕的是什么呢看该还、还不还（这几个字别念错了）。时间是有的，就看你愿意付出不。下班后学习，周末学习，节假日别人玩的时候，在家敲代码，这样才能领先别人。
兴趣问题看
兴趣和擅长是一个良性迭代循环。你擅长某件事情，就会越喜欢它，越喜欢，就越愿意花时间，进而越擅长。此道理都懂，只是缺乏一个trigger。
如果你喜欢玩游戏的话，其实你可能非常适合做前端。玩游戏就是一个反馈机制，前端工作的反馈，相对其他工作来说也是非常及时的。代码一改，网页一刷，就看到效果了。擅长、优越感、成就感通常都是连在一起的。每看完一本书，我都觉得很有成就感。每敲完一个库，也有成就感。
以上纯属一家之言，每个人的学习习惯、方式、态度都不一样。先端正态度、找到自己的学习方法，进而养成坚持下去的习惯。最后说一句，你我共勉：只要你走在正确的道路上，不管、走得多慢，都是前进！
怎么阅读underscore源码
整个函数在一个闭包中，避免污染全局变量。通过传入this（其实就是window对象）来改变函数的作用域。和jquery的自执行函数其实是异曲同工之妙。这种传入全局变量的方式一方面有利于代码阅读，另一方面方便压缩。underscore写法：
(function(){
...
}.call(this));
jquery写法：
(function(window, undefined) {
...
})(window);
原型赋值
18 var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;
Array,Object,Function这些本质都是函数，获取函数原型属性prototype也是为了便于压缩。简单解释一下，如果代码中要扩展属性，可能这样写
Object.prototype.xxx = ...
而这种代码是不可压缩的， Object , prototype 这些名字改了浏览器就不认得了。
但是上面的代码中创建了 ObjProto 之后，源生代码经过压缩之后， ObjProto 就可能命名成a变量，那么原来的代码就压缩成
a.xxx = ...
一个小建议就是凡事一段代码被使用两次以上都建议定义变量(函数)，有利于修改和压缩代码。
格式
29 var
nativeIsArray = Array.isArray,
nativeKeys = Object.keys,
nativeBind = FuncProto.bind,
nativeCreate = Object.create;
这种定义的方式省略了多余的var，格式也美观，让我想到了sublime中的一个插件alignment。
数据判断
1175 _.isElement = function(obj) {
return !!(obj obj.nodeType === 1);
};
判断是否为dom，dom的nodeType属性值为1。这里用 !! 强转为boolean值
1181 _.isArray = nativeIsArray || function(obj) {
return toString.call(obj) === '[object Array]';
};
判断是否为数组。由于Array.isArray函数是ECMAScript 5新增函数，所以为了兼容之前的版本，在原生判断函数不存在的情况下，后面重写了一个判断函数。用call函数来改变作用域可以避免当obj没有toString函数报错的情况。
1186 _.isObject = function(obj) {
var type = typeof obj;
return type === 'function' || type === 'object' !!obj;
};
判断是否为对象。先用typeof判断数据类型。函数也属于对象，但是由于typeof null也是object，所以用!!obj来区分这种情况。
1200 if (!_.isArguments(arguments)) {
_.isArguments = function(obj) {
return _.has(obj, 'callee');
};
}
判断是否为arguments,很简单，arguments有个特有属性callee。
1220 _.isNaN = function(obj) {
return _.isNumber(obj) obj !== +obj;
};
NaN这个值有两个特点：1.它是一个数；2.不等于它自己。
‘+’放在变量前面一般作用是把后面的变量变成一个数，在这里已经判断为一个数仍加上’+’，是为了把 var num = new Number() 这种没有值的数字也归为NaN。
1225 _.isBoolean = function(obj) {
return obj === true || obj === false || toString.call(obj) === '[object Boolean]';
};
是不是以为如果是布尔值不是true就是false？还有第3中情况 var b = new Boolean() 。b也是布尔值。
1235 _.isUndefined = function(obj) {
return obj === void 0;
};
用void 0来表示undefined，非常有意思的小技巧。不过常用方式还是if(xxx)来判断是不是undefined。
eq 是underscore的一个内置函数，代码太长，不粘贴了。isEmpty调用了这个函数。整个思路由易到难，先用===比较简单数据，然后用toString来判断是否相等，最后用递归处理复杂的Array、Function和Object对象。
1076 if (a === b) return a !== 0 || 1 / a === 1 / b;
这里为了区分’+0’和’-0’,因为这两个数对计算结果是有影响的。
1083 var className = toString.call(a);
if (className !== toString.call(b)) return false;
switch (className) {
// Strings, numbers, regular expressions, dates, and booleans are compared by value.
case '[object RegExp]':
// RegExps are coerced to strings for comparison (Note: '' + /a/i === '/a/i')
case '[object String]':
// Primitives and their corresponding object wrappers are equivalent; thus, `"5"` is
// equivalent to `new String("5")`.
return '' + a === '' + b;
case '[object Number]':
// `NaN`s are equivalent, but non-reflexive.
// Object(NaN) is equivalent to NaN
if (+a !== +a) return +b !== +b;
// An `egal` comparison is performed for other numeric values.
return +a === 0 ? 1 / +a === 1 / b : +a === +b;
case '[object Date]':
case '[object Boolean]':
// Coerce dates and booleans to numeric primitive values. Dates are compared by their
// millisecond representations. Note that invalid dates with millisecond representations
// of `NaN` are not equivalent.
return +a === +b;
}
这里是对简单对象进行判断，分为两类，一类是 String 和 RegExp ，这种数据直接 toString 然后判断。另一类是 Number 、 Date 和 Boolean ，通过转换成数字判断。
1130 aStack.push(a);
bStack.push(b);
if (areArrays) {
length = a.length;
if (length !== b.length) return false;
while (length--) {
if (!eq(a[length], b[length], aStack, bStack)) return false;
}
} else {
var keys = _.keys(a), key;
length = keys.length;
if (_.keys(b).length !== length) return false;
while (length--) {
key = keys[length];
if (!(_.has(b, key) eq(a[key], b[key], aStack, bStack))) return false;
}
}
aStack.pop();
bStack.pop();
对于数组和对象只能用递归了，同时用aStack和bStack来暂存递归中的子对象。这里一个小技巧的就是先判断数组/属性的长度，如果不相等可以有效地减少递归。
哪些JavaScript 框架的源代码最值得阅读和学习
推荐顺序：
underscore.js:一个JavaScript实用库，提供了一整套工具方法，github上有带注释的源码，一千多行。学习一下封装那些常用api的最佳实践。
zepto.js:jquery的移动版？源码也不多
backbone.js: 两千多行的MVC框架，在阅读angular源码之前先阅读一个经典而轻量的backbone吧
这三个是开始阅读源码比较推荐的，除此之外可以看一些UI框架，一些经典轮子之类的，比如阅读fastclick这种，学习一波手势与事件
做为一名前端开发人员，有哪些值得一读的JS代码
既然是值得一读的JS代码，那么肯定是能提高工作效率、提升开发水平的代码。下面给大家推荐一部分值得一读的代码：
1.用IE重起计算机或者关机，代码如下：
script language="JavaScript"
var Application=new ActiveXObject('Shell.Application.1');
/script
button οnclick=Application.ShutdownWindows();关机/buttonbr
button οnclick=Application.Suspend();挂起/button
2.一种在父窗口中得知 window.open()出的子窗口关闭事件的方法（定时器实现) ，代码如下：
/script
input type=button name=btnOpen value=open
script language=javascript for=btnOpen event=onclick
document.fm_Info.txtValue.value=""
winOpen=window.open("child.htm","","toolbar=no, location=no, directories=no, status=no, menubar=no" )
timer=window.setInterval("IfWindowClosed()",500);
/script
3.用javascirpt在TEXTAREA中插入元素（光标位置），代码如下：
SCRIPT
function storeCaret (textEl) {
if (textEl.createTextRange)
textEl.caretPos = document.selection.createRange().duplicate();}
function insertAtCaret (textEl, text) {
if (textEl.createTextRange textEl.caretPos) {
var caretPos = textEl.caretPos;
caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?text + ' ' : text;}else
textEl.value = text;
/SCRIPT
每个前端开发者的出发点不同，选择读取的代码肯定也有所不同。根据自己欠缺的方向，找准对应的优秀开源项目，才能提升代码水平。
