素晴らしい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が1つ増えたが,jQueryのこの書き方は変数を減らしただけである.
newの詳細についてはこちらをクリック
 
2.Sizzleエンジンワードキャッシュメカニズム
技術のハイライト:1つの関数はデータの保存、取り出し、キャッシュを実現します.
実装ソース:

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メソッドを呼び出して「[objectObject Object Name]」を返します.そしてjQueryは,この特性を用いて検出の準備をしていたデータをobjectに代入するtoString法を用いて,そのコンテキスト環境が検出するデータであることを置き換えた.
 
4.Dean Edwardsのbase 2フォーマット関数
テクノロジーのハイライト: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の運用.
 　　
今日は先にここまで、明日は続きます...
 
本文がいいと思ったら、右下の【おすすめ】をクリックしてください!