underscore.js 解读（敲源码）

本文主要是介绍underscore.js 解读（敲源码），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我把第一遍敲的underscore的代码放在github上了，加上了备注和一些demo 感兴趣的可以去看看。
https://github.com/katoto/copyUnderscore

还有一个是和jQuery 相关的，也可以敲敲看。
https://github.com/katoto/Tur_jq

Underscore一个JavaScript实用库，提供了一整套函数式编程的实用功能。正因为如此，所以它的每一个方法都相对独立。适合初学者敲一敲，也可以学习学习。下面我将贴一些，自己认为比较重要的函数。

undersocre 如何避免作用域污染？

;(function(){var root = this;var previousUnderscore = root._;var Ctor = function(){};    var _= function(obj){                  //  ☆if(obj instanceof _)return obj;if(!(this instanceof _))return new _(obj);this._wrapped = obj;};  //          释放 _ 的控制权 要在_ 声明的后面_.noConflict = function(){root._ = previousUnderscore;return this;}if(typeof exports !== 'undefined'){if(typeof module !== 'undefined'&& module.exports){exports = module.exports = _;}exports._  = _;}else{root._ = _;}_.VERSION ='0.01'
//          传入全局变量 window or node
}.call(this))

jQuery如何避免作用域污染？

;(function(window ,undefined){
//Tur_jq 构造函数    定义undefined 是为了兼容性var Tur_jq = function Tur_jq ( selector ){return new Tur_jq.prototype.init( selector );};Tur_jq.fn = Tur_jq.prototype = {constructor:Tur_jq,selector:null,length:0,version:0.01,init:function( selector ) {//是空的和undefined 直接返回if (!selector) return this;// 字符串：选择器，htmlif (Tur_jq.isString(selector)) {if (selector.charAt(0) === '<') {Tur_jq.push.apply(this, Tur_jq.parseHTML(selector));} else {Tur_jq.push.apply(this, Tur_jq.select(selector));this.selector = selector;}return this;}//DOM 对象if (Tur_jq.isDOM( selector )){this[0] = selector;this.length =1;return this;}//Tur_jq 对象if( Tur_jq.isTur_jq( selector )){return selector;}// DOM 数组if( Tur_jq.isLikeArray( selector )){Tur_jq.push.apply( this ,selector );return this;}// 如果是函数的话 就是入口函数if( Tur_jq.isFunction( selector ) ){var oldFn = window.onload;if( typeof oldFn ==='function' ){window.onload = function(){oldFn();selector();};}else {window.onload = selector;}}},each:function( callback  ){Tur_jq.each( this ,callback );return this;}};Tur_jq.fn.init.prototype = Tur_jq.prototype;//可扩展Tur_jq.extend = Tur_jq.fn.extend = function( obj ){var k ;for( k in obj  ){this[k] = obj [k];}};
//  比如你要扩展函数Tur_jq.extend({isFunction:function(obj){return typeof obj === 'function';},isString:function( obj ){return typeof  obj ==='string';},isLikeArray: function( obj ){return obj && obj.length && obj.length >=0;},isTur_jq:function( obj ){return 'selector' in obj;},isDOM:function( obj ){return !!obj.nodeType;}});
//  同理就一直往下.....// 对外公开window.$ = window.jQurey = Tur_jq;
})( window );

underscore 对内置函数的处理

//实现更少的字节和作用域链查找   (可以再浏览数上看原型上有什么内置的方法)var ArrayProto = Array.prototype,ObjProto = Object.prototype,FuncProto = Function.prototype;var push = ArrayProto.push,slice = ArrayProto.slice,toString = ObjProto.toString,hasOwnProperty = ObjProto.hasOwnProperty;
//      ECMAScript 5 的原生方法  keys? bind?var nativeIsArray = Array.isArray,nativeKeys = Object.keys,nativeBind = FuncProto.bind,nativeCreate = Object.create;

而jQuery 一开始就会对当前的浏览器进行能力检测的。
下面贴一些我认为很好的功能函数（有依赖，去看看源码就懂了）

//          洗牌算法       ☆_.shuffle = function(obj){var set = isArrayLike(obj)?obj:_.values(obj);var length = set.length,shuffled = Array(length);for(var index=0,rand;index<length;index++){rand = _.random(0,index);if(rand !== index) shuffled[index]=shuffled[rand];shuffled[rand]= set[index];}return shuffled;};

//      判断是否是isArray     ☆_.isArray = nativeIsArray || function(obj){return toString.call(obj) ==='[object Array]';}

//机智写法
_.each(['Arguments','Function','String','Number','Date','RegExp','Error'],function(name){_['is'+name]= function(obj){return toString.call(obj)=== '[object '+name+']' ;};});

//      ☆    nodeType 来判断   _.isElement = function(obj){return !!(obj && obj.nodeType ===1 );};

        _.isObject = function(obj){var type = typeof obj;//  0 || 1&& 1   1    0 || 1&& 0   0    return type ==='function'|| type==='object'&& !!obj}

//      !!!!  模板字符串           得认真看看才行_.templateSetting = {evaluate :/<%([\s\S]+？)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape :/<%-([\s\S]+?)%>/g};var noMatch = /(.)^/;var escapes = {"'":"'",'\\':'\\','\r':'r','\n':'n','\u2028':'u2028','\u2029':'u2029'};var escapeChar = function(match){return '\\'+escapes[match];}_.template = function(text,settings,oldSettings){if(!settings && oldSettings)settings = oldSettings;settings = _.defaults({},settings,_.templateSettings);var matcher = RegExp([(settings.escape || noMatch).source,(settings.interpolate|| noMatch).source,(settings.evaluate || noMatch).source].join('|')+'|$','g');var index = 0;var source = "__p+='";text.replace(matcher,function(match,escape,interpolate,evaluate,offset){source += text.slice(index,offset).replace(escaper,escapeChar);index = offset + match.length;if(escape){source +="'+\n((__t("+escape+"))==null?'':_.escape(__t))+\n'";}else if(interpolate){source +="'+\n((__t=("+interpolate+"))==null?'':__t)+\n'";}else if(evaluate){source +="';\n"+evaluate+"\n__p+='";}return match;})if(!settings.variable)source = 'with(obj||{}){\n'+source+'\n}';source = "var __t,__p='',__j=Array.prototype.join,"+"print=function(){__p+=__j.call(arguments,'');};\n"+source +'return __p;\n';try{var render = new Function(settings.variable || 'obj','_',source);}catch(e){e.source = source;throw e;}var template = function(data){return render.call(this,data,_);};var argument = settings.variable || 'obj';template.source = 'function('+argument+'){\n'+source+'}';return template;            }

//      Object.prototype.toString.call(2) // "[object Number]"
//      Object.prototype.toString.call('') // "[object String]"
//      Object.prototype.toString.call(true) // "[object Boolean]"
//      Object.prototype.toString.call(undefined) // "[object Undefined]"
//      Object.prototype.toString.call(null) // "[object Null]"
//      Object.prototype.toString.call(Math) // "[object Math]"
//      Object.prototype.toString.call({}) // "[object Object]"
//      Object.prototype.toString.call([]) // "[object Array]"