2017-04-27 10 views
6

メソッドチェーンをサポートできるミニjQueryクローンを作成しようとしています。これまでのところ、私は、コードのこの部分を思い付いてきました:ページのロード時にjQueryオブジェクトのデータ構造

var $ = (function() { 

    var elements = []; 

    function methodOne() { 
    console.log('Method 1'); 
    return this; 
    } 

    function methodTwo() { 
    console.log('Method 2'); 
    return this; 
    } 

    return { 
    methodOne: methodOne, 
    methodTwo: methodTwo 
    }; 
}()); 

$変数は、生命維持によって返されたjQueryのクローンオブジェクトが移入されます。

私の質問は、メソッド連鎖機能を維持しながら、$オブジェクトを直接関数として呼び出すにはどうすればいいですか?

今のところ、$.methodOne().methodTwo()を使用できますが、jQueryのように$('some parameter').methodOne().methodTwo()を使用することはできません。

+0

私は試していませんが、あなたは 'class' Javascriptと' extends Jquery! 'を使うことができると思います!私はそれがそれをすると思います。あなたは知っている、私は興味があり、私も試してみます。 – funcoding

答えて

3

var $ = function (param) { 
 

 
    var elements = []; 
 
    console.log(param); 
 

 
    function methodOne() { 
 
    console.log('Method 1'); 
 
    return this; 
 
    } 
 

 
    function methodTwo() { 
 
    console.log('Method 2'); 
 
    return this; 
 
    } 
 

 
    return { 
 
    methodOne: methodOne, 
 
    methodTwo: methodTwo 
 
    }; 
 
}; 
 

 
$('This is a param').methodOne().methodTwo();

1

Working fiddle。コメントは多かれ少なかれ自明です。

少し長く見えるかもしれませんが、それを呼び出すたびに新しいミニjQueryオブジェクトを作成することができます。

var _ = (function() { 

    var Magic = function(query){ 
     if(window === this) 
      return new Magic(query); 

     // reference to itself 
     var that = this; 

     //assign pseudo public methods and variables 
     that.elements = []; 
     that.methodTwo = methodTwo; 
     that.methodOne = methodOne; 

     //fills inner element array with DOM element 
     _get(query); 

     function _get(query){ 
      var elem = document.getElementById(query); 
      that.elements.push(elem); 
     } 

     function methodOne() { 
      console.log('Method 1'); 
      return that; 
     } 

     function methodTwo() { 
      console.log('Method 2', that.elements); 
      return that; 
     } 

     return this; 
    } 

    //returns function, which is assigned to a "_" variable 
    return function(query){ 
     //everytime "_" is called, it will return new instance for object Magic which makes all the work 
     return new Magic(query); 
    } 

}());