جافا سكريبت سلسلة قائمة الانتظار طريقة غير متزامنة

في JavaScript ، تحظى استدعاءات الأساليب المتسلسلة بشعبية كبيرة، ويجب أن يكون لدى الأصدقاء الذين يستخدمون jQuery فهمًا عميقًا لهذا الأمر. تم وصف هذه الطريقة بمزيد من التفصيل في "أنماط تصميم جافا سكريبت". لتنفيذ استدعاءات متسلسلة للطرق، ما عليك سوى السماح للطرق المحددة في النموذج الأولي بإرجاع المراجع إلى كائنات المثيل التي تستدعي هذه الأساليب، ألق نظرة في هذا الكتاب شفرة:

(وظيفة() {
الدالة _$(els) {
this.elements = [];
لـ (var i = 0, len = els.length; i < len; ++i) {
عنصر فار = els[i];
إذا (نوع العنصر == 'سلسلة') {
العنصر = document.getElementById(element);
}
this.elements.push(element);
}
};
_$.النموذج الأولي = {
كل: وظيفة (الجبهة الوطنية) {
for ( var i = 0, len = this.elements.length; i < len; ++i ) {
fn.call(this, this.elements[i]);
}
رد هذا؛
},
setStyle: وظيفة (دعامة، فال) {
this.each(وظيفة(إل) {
el.style[prop] = val;
});
رد هذا؛
},
عرض: وظيفة () {
فار ذلك = هذا؛
this.each(وظيفة(إل) {
that.setStyle('display', 'block');
});
رد هذا؛
},
addEvent: وظيفة (نوع، الجبهة الوطنية) {
فار إضافة = وظيفة (إل) {
إذا (window.addEventListener) {
el.addEventListener(type, fn, false);
}
وإلا إذا (window.attachEvent) {
el.attachEvent('on'+type, fn);
}
};
this.each(وظيفة(إل) {
إضافة (إل)؛
});
رد هذا؛
}
};
نافذة.$ = وظيفة () {
إرجاع جديد _$(الوسائط);
};
})();

كما ترون، تنتهي كل طريقة بـ "return this"، الذي يمرر كائن طريقة الاستدعاء إلى الطريقة التالية في السلسلة. ومع ذلك، إذا تم الحصول على البيانات التي نريد تشغيلها من خلال طلب غير متزامن، فكيف نحافظ على سلسلة استدعاءات الطريقة؟ يزودنا داستن دياز بطريقة لضمان استدعاءات الطريقة المتسلسلة، وهو أيضًا أحد مؤلفي كتاب "أنماط تصميم جافا سكريبت".

قام أولاً ببناء كائن قائمة الانتظار، وهو:

ثم استخدمها كأداة لبناء سلسلة انتظار الطريقة غير المتزامنة. باستخدام هذه الأداة، من السهل إنشاء مكون إضافي لـ jQuery يجلب المحتوى من الخادم ويلحقه بالمحدد.

بهذه الطريقة، يمكننا الحصول على المحتوى بشكل غير متزامن ومواصلة سلسلة مكالماتنا.

$("<div/>")
.fetch('/server/navigation.html')
.addClass('عمود')
.appendTo('#side');

تحقق من الصفحة التجريبية لمعرفة التأثير.

ماذا تفعل إذا كان هناك العديد من العناصر في قائمة الانتظار في انتظار التصرف بناءً عليها من خلال استجابة من جانب الخادم؟ وقد بنى المؤلف هذا الأسلوب، وهو جدير بالإشارة إلى:

وبهذه الطريقة يمكننا أن نسميها بالطريقة التالية:

fetchTweet(url).linkify().filterBadWords().appendTo('#status');

في هذه المرحلة، نحن نعرف بالفعل كيفية تنفيذ تسلسل الأساليب غير المتزامنة، ولكن بعض الأسئلة التي أثارتها بعض التعليقات في الجزء السفلي من " تسلسل قوائم انتظار الأساليب غير المتزامنة في JavaScript " تستحق التفكير فيها. يحتاج المكون الإضافي $.fn.fetch فقط إلى إلحاق المحتوى الذي تم إرجاعه بالعنصر. هل قائمة الانتظار ضرورية؟ علاوة على ذلك، يمكن تنفيذ $.fn.load في jQuery بالكامل إذا تم استخدام وظيفة رد اتصال واحدة فقط في قائمة الانتظار، فيمكن كتابتها على النحو التالي:

(وظيفة($) {
$.fn.fetch = الوظيفة(url) {
قائمة الانتظار فار = قائمة الانتظار الجديدة؛
هذا.كل (وظيفة () {
فار إل = هذا؛
$.اجاكس({
عنوان URL: عنوان URL،
النوع: "احصل على"،
نوع البيانات: "json"،
النجاح: وظيفة (الاستجابة) {
$(el).html(resp['text1']);
}
});
});
رد هذا؛
};

})(مسج);

وأتساءل ما هو رأيك؟

وظيفة جلب تويت (رابط) {
this.queue = قائمة انتظار جديدة؛
this.tweet = "";
فار النفس = هذا؛
اياكس (رابط، وظيفة (احترام) {
self.tweet = resp;
self.queue.flush(this);
});
}
fetchTweet.prototype = {

ربط: وظيفة () {
this.queue.add(function(self) {
self.tweet = self.tweet.replace(/b@(w{1,20}b/g, '$1');
});
رد هذا؛
},

مرشح الكلمات السيئة: وظيفة () {
this.queue.add(function(self) {
self.tweet = self.tweet.replace(/b(fuck|shit|piss)b/g, "");
});
رد هذا؛
},

إلحاق إلى: وظيفة (محدد) {
this.queue.add(function(self) {
$(self.tweet).appendTo(selector);
});
رد هذا؛
}

};

(وظيفة($) {

$.fn.fetch = الوظيفة(url) {
قائمة الانتظار فار = قائمة الانتظار الجديدة؛
هذا.كل (وظيفة () {
فار إل = هذا؛
قائمة الانتظار. إضافة (وظيفة (ريسب) {
$(el).html(resp);
});
});

$.اجاكس({
عنوان URL: عنوان URL،
نوع البيانات: "أتش تي أم أل"،
النجاح: وظيفة (أتش تي أم أل) {
queue.flush(html);
}
});
رد هذا؛
};

})(مسج);

قائمة انتظار الوظائف () {
// قم بتخزين عمليات الاسترجاعات الخاصة بك
this._methods = [];
// احتفظ بمرجع لردك
this._response = null;
// جميع قوائم الانتظار تبدأ بدون مسح
this._flushed = false;
}

قائمة الانتظار. النموذج الأولي = {
// يضيف ردود الاتصال إلى قائمة الانتظار الخاصة بك
إضافة: وظيفة (الجبهة الوطنية) {
// إذا تم مسح قائمة الانتظار، فارجع على الفور
إذا (هذا._flushed) {
fn(this._response);

// وإلا ادفعه إلى قائمة الانتظار
} آخر {
this._methods.push(fn);
}
},

تدفق: وظيفة (الاستجابة) {
// ملاحظة: التدفق يحدث مرة واحدة فقط
إذا (هذا._flushed) {
يعود؛
}
// قم بتخزين ردك للمكالمات اللاحقة بعد التدفق ()
this._response = resp;
// ضع علامة على أنه تم مسحه
this._flushed = true;
// أخرجهم ثم اتصل بهم مرة أخرى
بينما (this._methods[0]) {
this._methods.shift()(resp);
}
}
};