JSチェーンcall_javascriptスキルの実装方法

チェーンコール
チェーンコールは実際には単なる文法トリックです。初期操作を再利用することで、複雑な操作を少量のコードで表現できます。このテクノロジーは 2 つの部分で構成されています:

HTML 要素を表すオブジェクトを作成するファクトリ。

この HTML 要素に対して特定の操作を実行するメソッドのバッチ。

呼び出しチェーンの構造
$ 関数は、チェーン呼び出しをサポートするオブジェクトの作成を担当します

コードをコピー コードは次のとおりです。

(function() {
/ *
* プライベート クラスを作成します
* @param {Object} els 引数 すべてのパラメータで構成されるクラス配列
*/
function _$(els) {
this.elements = [ ]; // HTML 要素
for(var i=0, len=els.length; i var element = els[i];
if(typeof element == = 'string' ) {
element = document.getElementById(element); HTML 要素が実行できるアクション
_$.prototype = {
each: function() {},
setStyle: function () {},
show: function() {},
addEvent: function() {},
} );



すべてのオブジェクトはそのプロトタイプ オブジェクトのプロパティとメソッドを継承するため、プロトタイプ オブジェクトで定義されたメソッドがメソッドの呼び出しに使用されるインスタンス オブジェクトへの参照を返すようにして、それらのメソッドをチェーンで呼び出すことができるようにすることができます。 。





コードをコピー

コードは次のとおりです:

(function() {
/*
* プライベート クラスを作成します
* @param {Object} els 引数 すべてのパラメータで構成されるクラス配列
*/
function _$(els) {
//...
}
//HTML 要素に対して実行できる操作
_$.prototype = {
each: function(fn) { / /fn コールバック関数
for(var i=0; i //要素 elements[i] をパラメータとして渡し、len 回実行します
fn.call(this, this.elements[i]);
}
el) {
el.style[prop] = value;
var that = this;
this.each(function(el) {
that.setStyle('display', 'block');
});
return this;
},
addEvent: function ( type, fn) {
var addHandle = function(el) {
if(document.addEventListener) {
el.addEventListener(type, fn, false);
}else if(document.attachEvent ) {
el.attachEvent('on' type, fn);
}
};
this.each(function(el) {
addHandle(el);
} );
これを返します 🎜> }

})();

//---------- テスト --------
$(window).addEvent('load' , function () {
$('test-1', 'test-2').show()
.setStyle('color', 'red')
.addEvent('click', function( ) {
$(this).setStyle('color', 'green');
});
})



連鎖呼び出しメソッドを使用したデータの取得 コールバック関数を使用して、連鎖呼び出しをサポートするメソッドからデータを取得します。連鎖呼び出しはアサイナー メソッドには適していますが、ゲッター メソッドの場合は、これ (メソッドが呼び出されるオブジェクト) の代わりに必要なデータを返すようにしたい場合があります。 解決策: コールバック テクノロジを使用して、必要なデータを返します。

コードをコピー


コードは次のとおりです:

window.API = window.API || function() {
var name = 'mackxu';
//Privileged method
this.setName = function(name0) {
name = name0;
return this;
};
this.getName = function(callback) {
callback.call(this, name);
return this;
} ;
};
//------------- test ---
var obj = new API();
obj.getName(console.log) .setName('zhangsan').getName(console.log);

Design a JS library that supports method chain calling
JS library features:

Events: Add and delete event listeners, and plan event objects

DOM: Class name management, style management

Ajax: Normalize XMLHttpRequest

Copy code The code is as follows:

Function.prototype.method = function(name, fn) {
this.prototype[name] = fn;
return this;
};
(function() {
function _$(els) {
//...
}
/*
* Events
* addEvent
* removeEvent
*/
_$.method('addEvent', function(type, fn) {
 > *RemoveClass
*Hover
*Hasclass
*getClass
*getstyle
*setstyle
*/
.method ('addclass' e) {            //...
                            .method('removeClass', function(classname)                                                  
                                                                                                                                              .
                                                                                                                                 . ) {
//...
})
/*
* AJAX
* * ajax
*/
.method('ajax', function(url, method ) {
          //...
                     ); /Resolve the JS library naming conflict problem
window.installHelper = function(scope, interface) {
scope[interface] = function() {
return _$(arguments)
}
}
})();



Summary:

Chained calls help simplify code writing and to some extent make the code more concise and readable. In many cases, using chained calls can avoid reusing an object variable multiple times, thereby reducing the amount of code. If you want to keep the interface of the class consistent and make both the assignor and the valuer support chain calls, then you can use a callback function in the valuer to solve the problem of obtaining data.