【サブ遅れに伴うundersscore】Object Funnctions関連ソース拾遺&小結

10554 ワード

Why under score
最近はundersscore.jsのソースコードを見始めました.undersscore.jsのソースコードの解読を2016年の計画に入れました.
いくつかの有名な枠组みのソースコードを読むと、まるでみんなと対话するように、多くのことを学ぶことができます.なぜアンダースコアですか?最も主要な原因はアンダースコアが短くて精悍(約1.5 k行)で、100以上の有用な方法を実装しています.結合度が低く、一つ一つの方法で読むのに適しています.ビルのようなJavaScript初心者に適しています.そこから、void 0をundefinedの代わりに使って、undefinedを書き換えるなどのテクニックを身につけるだけでなく、変数型の判断や関数の節流や関数の手ぶれなど、よく使われる方法を学ぶことができます.また、多くのブラウザに対応するhackを学ぶことができます.また、作者の全体的な設計構想やAPI設計の原理(後方互換性)を学ぶことができます.
その後、スレ主は一連の文章を書いて、皆さんとソースの読み取りで学んだ知識を共有します.
  • undersscore-1.8.3ソース解読プロジェクトの住所https://github.com/hanzichi/underscore-analysis
  • undersscore-1.8.3ソースの全文コメントhttps://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/underscore-1.8.3-analysis.js
  • undersscore-1.8.3ソース解読シリーズの文章https://github.com/hanzichi/underscore-analysis/issues
  • いらっしゃいませ.(興味があれば、star&watchを歓迎します.)あなたの注目はビルの続けて書く動力です.
    Main
    今日が平日の最後の日なので、ソースの解読部分をObject Functionsに更新しました.
    もしあなたが望むならば、ビルの主人の前のシリーズの文章を解読するのがすべてObjectの上の拡張方法であることを発見するかもしれません.つまりソースの中のObject Functionsの部分です.undersscoreは5種類の拡張方法を追加しました.それぞれObject->Aray->Collection->Function->Utilityです.これもビル主のソースコードの解読順序です.その中で、Object上の拡張方法は38個まであり、方法の多くはコードの多さを代表しない.例えば、タイプ検出のように、2行のコードでいくつかの方法を解決でき、前編で述べた_.isEqual方法は百行を要して実現に行きます.今日はObject Functionsの最後の部分で、私達はビルの主人を見てみます.いくつかの解読されていないが、面白い方法のソースコードです.(多くの方法は簡単で、実現も簡単です.興味がある人は自分でソースを拾うことができます.)
    _.pick
    まず来てみますpick方法は、この方法でオブジェクトに伝わり、オブジェクトのキーペアを削除し、オブジェクトのコピーを返します.
    直接例を見ると:
    _.pick({name: 'moe', age: 50, userid: 'moe1'}, 'name', 'age');
    => {name: 'moe', age: 50}
    
    _.pick({name: 'moe', age: 50, userid: 'moe1'}, ['name', 'age']);
    => {name: 'moe', age: 50}
    
    _.pick({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {
      return _.isNumber(value);
    });
    => {age: 50}
    一目でわかるように、最初のパラメータobjは対象であり、第二のパラメータは一連のkey値であっても良いし、配列(配列中にkeyを含む)であっても良いし、反復関数であってもいいし、key値または反復関数に基づいて、objのキーペアをフィルタして、新しいオブジェクトのコピーを返します.
    私に設計させたら、パラメータによってタイプを判断して、いくつかのif-elseを書いて、それぞれのif-else分岐の内容は無関係です.でもアンダースコアの書き方は本当に素晴らしいです.いくつかの状況を一つに変えます.
    //           
    if (_.isFunction(oiteratee)) {
      keys = _.allKeys(obj);
      iteratee = optimizeCb(oiteratee, context);
    }
    まずif-elseは避けられないです.もし入ってきた二番目のパラメータがfunctionであれば、着信反復関数です.contextによって新しい反復関数(optimizeCb)を返します.これからは反復関数の中のthisの方向を規定します.重要ではないです.ここでは選択的に無視できます.
    二番目のパラメータが関数でない場合、後ろのkeysは配列であってもよく、連続的にいくつかの並列パラメータであってもよい.ここではundersscoreのもう一つの重要な内部方法を使います.flatenの役割はネストされた配列を展開します.この方法は後で分析します.ここでその役割を知るだけでいいです.
    else {
      //            
      //      keys      
      //               
      keys = flatten(arguments, false, false, 1);
    
      //     predicate       
      //     key     predicate   
      iteratee = function(value, key, obj) { return key in obj; };
      obj = Object(obj);
    }
    入ってきた反復関数と同じ形に変えて、一つの方法で判断できます.そして、keys変数は二つの場合の意味が違っています.本当に巧みです.この点についてはいろいろ考えさせられました.多くの時のコードは冗長です.実は自分のコード能力があまりにも悪いです.
    _.create
    _.create方法はとても簡単で、あなたがくれたプロトタイプと、いくつかのown propertiesによって、新しいオブジェクトを作成して返します.
    簡単な例を挙げます.
    var Person = function() {};
    
    Person.prototype = {
      show: function() {
        alert(this.name);
      }
    };
    
    var me = _.create(Person.prototype, {name: 'hanzichi'});
    
    console.log(me);
    
    // Object {name: "hanzichi"}
    // name: "hanzichi"
    // __proto__: Object
    // show: function()
    実は私の変数はown propertiesとしてnameを持ち、Person関数で構成されるオブジェクトです.
    もしブラウザがES 5をサポートするなら、Object.creat():
    var Person = function() {};
    
    Person.prototype = {
      show: function() {
        alert(this.name);
      }
    };
    
    var me = Object.create(Person.prototype);
    
    _.extendOwn(me, {name: 'hanzichi'});
    
    console.log(me);
    ES 5がサポートされていない場合、新しいコンストラクタを定義して、このコンストラクタのプロトタイプの割り当て値を既知のプロトタイプ変数にして、new演算子でインスタンスを取得します.
    var Person = function() {};
    
    Person.prototype = {
      show: function() {
        alert(this.name);
      }
    };
    
    var _Person = function() {};
    
    _Person.prototype = Person.prototype;
    
    var me = new _Person();
    
    _.extendOwn(me, {name: 'hanzichi'});
    
    console.log(me);
    undercoreの実現の構想も大体このようです.
    _.テーブル
    もともとは_を.tapさんが言いましたが、チェーンコールと一緒に話したほうがいいと思いました.穴を掘ってください.
    結び目
    Objects Functionの部分のソースコードの解析はこれになります.https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8.3.js#L901-L 1269.このコードを読み終わったとはいえ、消化にはまだ時間が必要です.90%ぐらい理解したとしか言えません.交流を検討したいです.
    次にアラyの拡張方法に関するコードを見て、面白いものを整理していきますので、楽しみにしてください.