jQueryソース探索の道(3)--extendの実現

2141 ワード

  • 自分は最近いくつかjsのプラグインの書き方を勉強して、それではもちろんjqueryを迂回することができなくて、そこで自分で学習の中で出会ったいくつかの問題についていくつか総括して記録します
  • 自分も学习の过程の中で、问题があって皆さんに指摘してもらって、みんなが多く支持することができることを望んで、starにあげて、少しいいですね、githubアドレス
  • JQでは、extendは強力な機能であり、実際のソースコードの多くのモジュール方法はextend拡張方法によってJQプロトタイプオブジェクトに組み込まれていると同時に、extendは後続の開発者に良いインタフェースを提供し、次々と現れるJQプラグインを出現させ、JQの使用シーンを極めて豊かにしている.
    まず一番簡単なことを書きます.
    extendは実際にはレプリケーションですが、jsではオブジェクトがパラメータとしての伝達は直接伝達であり、オブジェクトを再構築して伝達することはありません.例えば
    var a = {
      name:'aaa'
    };
    var b = a;
    b.name = 'bbb';
    console.log(a.name); //bbb
    

    したがって、オブジェクトをコピーするには、通常、自分で新しいオブジェクトを作成し、遍歴して値を割り当てることでコピー効果を達成する必要があります.例:
    function copy(target,source){
      for(var name in source){
        target[name] = source[name];
      }
      return target;
    }
    

    簡単なJQ extendメソッド
    Ye.extend = function(){
      //      arguments         
      var source = arguments[0];
      for(var name in souce){
        //        
        this[name] = source[name];
      }
    }
    Ye.extend({
      add:function(){
        console.log('add');
      }
    })
    

    しかし,静的メソッドだけでなく,インスタンス上のメソッドも拡張するので,
    Ye.prototpye.extend = Ye.extend = function(){
       //...  
    }
    

    そしてJQプラグインを拡張することができます
    $.prototype.extend({
      test:function(){
        console.log('    ');
      }
    })
    $.extend(){
      test:function(){
        console.log('    ');
      }
    }
    $.test();  //    
    $("#id").test();//    
    

    コピー方法として使用
    JQオブジェクトを拡張するのではなく、あるオブジェクトを別のオブジェクトに統合したい場合があるので、extendメソッドを判断することができます.
    Ye.prototype.extend = Ye.extend = function(){
        if(arguments.length == 1){
           var source = arguments[0];
           for(var name in souce){
              //        
              this[name] = source[name];
          }
        }else {
          var target = arguments[0];
          var source = arguments[1];
          for(var name in source){
            target[name] = source[name];
          }
          return target;
        }
    }
    
    //        
    $.extend(target,source);
    

    これで私たちのextend方法は完璧になりました!!
    附:読み終わった以上、お手数ですが、お役人さん、いいねを押して、starをあげてください.ソースアドレス:https://github.com/LY550275752/my-js-plug/blob/master/Ye.js