一些很棒的js代碼（持續跟新）

1.jQuery初始化代碼段

　　技術亮點：jQuery無new化構建、每次jQuery構建的作用域隔離、jQuery拓展插件。

　　實現源碼：

var jQuery = function(args){
  return new jQuery.fn.init(args);
}
jQuery.fn = jQuery.prototype = {
  init: function(args){
    return this;
  },
  otherFn: function(){}
}
jQuery.fn.init.prototype = jQuery.fn;

　　分析：

　　每次jQuery函數內部new的作用是隔離作用域。每次構建的都是一個新對象，新對象obj如果重寫obj.__proto__下的屬性不影響其他jQuery對象__proto__下的屬性。

var m = jQuery(),n= jQuery();//m = {__proto__:{init:fn(),otherFn:fn()}}；n = {__proto__:{init:fn(),otherFn:fn()}}
m.otherFn;//fn(){}
m.otherFn = "test";//m =  {otherFn:"test",__proto__:{init:fn(),otherFn:fn()}};
n.otherFn;//fn(){}; n的結構n = {__proto__:{init:fn(),otherFn:fn()}}

　　然後jQuery.fn提供jQuery對象的拓展，只要使用jQuery.fn.xx定義的屬性在通過var m = jQuery();方式獲取的對象m都可以通過m.xx獲取到。如果直接使用jQuery.prototype來提供拓展給人感覺不太友好。

　　上面的代碼換成下麵這種寫法也是可以的

var jQuery = function(args){
  return new jq(args);
}
function jq(args){
    return this;
}
jQuery.fn = jq.prototype = {
  otherFn: function(){};
}

　　多出了一個函數變數jq，jQuery的這種寫法只是減少了變數而已。

　　關於new的詳細點擊這裡

2.Sizzle引擎詞法緩存機制

　　技術亮點：一個函數實現存、取、緩存數據。

　　實現源碼：

function createCache() {
　　var cache, keys = [];
　　return (cache = function( key, value ) {
　　　　// 使用 (key + " ")避免命名衝突，最大緩存createCache.cacheLength:50
　　　　if ( keys.push( key += " " ) > createCache.cacheLength ) {
　　　　　　// 去掉最老的記錄
　　　　　　delete cache[ keys.shift() ];
　　　　}
　　　　return (cache[ key ] = value);
　　});
}
createCache.cacheLength  = 50;


//例子
var tokenCache = createCache();
//設置緩存
tokenCache("name", "chua");
//tokenize函數中獲取緩存
cached = tokenCache[ "name" + " " ];//"chua"

　　分析：

　　局部變數cache使用函數表達式方式賦值，cache函數中給cache這個函數對象添加要緩存的屬性。可以說是把函數對象運用到了極致。

3.jQuery判斷js數據的具體類型

　　技術亮點：call的妙用

　　實現源碼：

var class2type = {} ,
core_toString = class2type.toString;　
jQuery.type = function( obj ) {
  if ( obj == null ) {
    return String( obj );
  }
  return typeof obj === "object" || typeof obj === "function" ?
  class2type[ core_toString.call(obj) ] || "object" :
  typeof obj;
}
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
  class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

 　　分析：

　　首先我們知道toString()函數用於將當前對象以字元串的形式返回。該方法屬於Object對象，由於所有的對象都"繼承"了Object的對象實例，因此幾乎所有的實例對象都可以使用該方法。而Object調用toString方法返回"[object ObjectName]",其中ObjectName是對象類型的名稱。然後jQuery利用這一特性將準備檢測的數據代入object的toString方法替換掉了其上下文環境為要檢測的數據。

4.Dean Edwards的base2格式化函數

　　技術亮點：arguments的靈活運用

　　實現源碼：

function format(string) {
  var args = arguments;
  var pattern = new RegExp('%([1-' + arguments.length + '])', 'g');
  return String(string).replace(pattern, function(match, index,position,all) {  
    console.log(match + ' ' + index + ' ' + position + ' ' + all);
    return args[index];  
  });  
};

//實例
var name = "chua",
age = 20,
expr = "%1的年齡是%2";
format(expr,name,age);//"chua的年齡是20"
//控制台列印
//%1 1 0 %1的年齡是%2
//%2 2 6 %1的年齡是%2

　　分析：這個比較簡單就不分析了。主要就是arguments.length的運用。

　　今天先到這裡，明天繼續。。。

　　如果覺得本文不錯，請點擊右下方【推薦】！