تعليمي تطوير مكونات مكونات مكون من ذلك

1. التحليل الافتتاحي

مرحباً جميعاً! تتحدث سلسلة المقالات اليوم بشكل رئيسي عن كيفية تطوير تطوير المكونات الإضافية بناءً على "JavaScript". أعتقد أن الكثير من الناس ليسوا على دراية بكلمة "البرنامج المساعد".

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

لدي فهم معين لـ "طريقة المكونات الإضافية jQuery". سنناقشه معًا بناءً على هذا الموضوع وأخيراً نعطي خطط التنفيذ ذات الصلة لتحسين قدرتنا بشكل مستمر.

2. أدخل موضوع المكون الإضافي

بشكل عام ، يتم تقسيم تطوير المكونات الإضافية jQuery إلى نوعين: أحدهما وظيفة عالمية معلقة تحت مساحة اسم jQuery ، والتي يمكن أن تسمى أيضًا طريقة ثابتة.

طريقة أخرى هي طريقة مستوى كائن jQuery ، أي أن الطريقة المعلقة تحت النموذج الأولي jQuery ، بحيث يمكن لمثيلات كائن jQuery الحصول عليها من خلال المحدد مشاركة الطريقة.

(1) ، تطوير المكونات الإضافية على مستوى الفصل

إن الفهم الأكثر مباشرة لتطوير المكونات الإضافية على مستوى الفصل هو إضافة طرق الفصل إلى فئة "jQuery" ، والتي يمكن فهمها على أنها إضافة طرق ثابتة. مثال نموذجي هو الدالة "$ .ajax ()" ، والتي تحدد الوظيفة في مساحة اسم jQuery. حول تطوير المكونات الإضافية على مستوى الفصل ، يمكن تمديدها في النماذج التالية:

1.1 إضافة وظيفة عالمية ، نحتاج فقط إلى تحديدها على النحو التالي ورؤية الكود:

نسخة الكود كما يلي:

$ .hello = function () {

تنبيه ("مرحبًا ، دب كبير!") ؛

} ؛

1.2 إضافة وظائف عالمية متعددة ، والتي يمكن تعريفها على النحو التالي:

نسخة الكود كما يلي:

$ .extend ({

مرحبا: وظيفة (اسم) {

// ضع الكود الخاص بك هنا

} ،

العالم: وظيفة () {

// ضع الكود الخاص بك هنا

}

}) ؛

الوصف: "$ .Extend (Target ، [Object1] ، [ObjectN])" (يتم استخدام هذه الطريقة بشكل أساسي لدمج المحتوى (السمات) لكائنين أو أكثر إلى الكائن الأول وإرجاع الكائن الأول المدمج.

إذا كانت الطريقة تحتوي على هدف واحد فقط معلمة ، فستقوم المعلمة بتمديد مساحة اسم jQuery ، أي أنه سيتم تعليقه تحت كائن JQuery Global كطريقة ثابتة).

(2) ، تطوير المكونات الإضافية على مستوى الكائن

يتطلب تطوير المكونات الإضافية على مستوى الكائن نموذجين:

2.1 قم بتركيب السمات ذات الصلة ديناميكيًا من خلال "$ .fn.extend ()" كنموذج أولي.

نسخة الكود كما يلي:

(وظيفة ($) {

$ .fn.extend ({

البرنامج المساعد: الدالة (OPTS) {

// ضع الكود الخاص بك هنا

}

}) ؛

}) (jQuery) ؛

2.2 إضافة سمات ديناميكية مباشرة إلى سلسلة النموذج الأولي.

نسخة الكود كما يلي:

(وظيفة ($) {

$ .fn.pluginname = function () {

// ضع الكود الخاص بك هنا

} ؛

}) (jQuery) ؛

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

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

لذلك نقوم بتنفيذ وحدة المكونات الخاصة المحاكاة من خلال الجمع بين وظائف التنفيذ الذاتي مع الإغلاق ، كما هو الحال في مثالنا أعلاه.

(3) ، دعنا نقدم مثالًا بسيطًا لرؤية عملية التنفيذ:

(1) ، رمز جزء "HTML" هو كما يلي:

نسخة الكود كما يلي:

<div id = "bb">

<span> </span>

<div

النمط = "الهامش أعلى: 10 بكسل ؛

القاع الهامش: 30 بكسل ؛ "

> 8 </viv>

</div>

(2) ، تعريف "data.json" على النحو التالي:

نسخة الكود كما يلي:

{

"النص": "مرحبًا ، Big Bear {{BB}}!" ؛

}

(3) ، رمز "BB.JS" هو كما يلي:

نسخة الكود كما يلي:

$ (function () {

$ ("#bb"). BigBear () ؛

}) ؛

(وظيفة ($) {

$ .fn.bigbear = function (opts) {

opts = $ .extend ({} ، $. fn.bigbear.defaults ، opts) ؛

إرجاع this.each (function () {

var elem = $ (this) ؛

elem.find ("span"). النص (opts ["title"]) ؛

$ .get (opts ["url"] ، وظيفة (البيانات) {

elem.find ("div"). النص (البيانات ["النص"]) ؛

}) ؛

}) ؛

} ؛

$ .fn.bigbear.defaults = {

العنوان: "هذا اختبار بسيط" ،

عنوان URL: "data.json"

} ؛

}) (jQuery) ؛

تأثير الجري:

دعونا نلخص :

(1) "$ .fn.bigbear.defaults" يوفر خيارات المعلمة الافتراضية للمكون الإضافي. يجب أن يسمح المكون الإضافي ذو القابلية للتوسعة الجيدة للمستخدمين بتخصيص خيارات المعلمة وفقًا لاحتياجاتهم والتحكم في سلوك المكون الإضافي ، لذلك من الضروري توفير خيارات افتراضية مستعادة. يمكنك تعيين هذه الخيارات من خلال طريقة تمديد jQuery.

(2) ، "إرجاع هذا. هذه واحدة من العديد من الميزات الممتازة لـ jQuery ، وحتى إذا لم تكن مستعدًا لتوفير دعم متعدد العناصر للمكون الإضافي الخاص بك أثناء التطوير ، فإن التحضير لهذا لا يزال طريقة رائعة. بالإضافة إلى ذلك ، لدى JQuery ميزة جيدة يمكنها أداء Cascades ، والتي يمكن أن تسمى أيضًا مكالمات السلسلة ، لذلك يجب ألا ندمر هذه الميزة وإرجاع عنصر دائمًا في هذه الطريقة.

(رابعا) ، الملخص النهائي

(1) قدم jQuery طريقتين لمكون التطوير ، وهما: jQuery.fn.Extend (كائن) ؛ أضف طريقة إلى كائن jQuery.

jQuery.Extend (كائن) ؛ يضيف طرقًا جديدة إلى الفصل لتمديد فئة jQuery نفسها.

(2) ضع جميع الكود في الإغلاق (وظيفة التنفيذ الفورية). في هذا الوقت ، فإن الإغلاق يعادل النطاق الخاص. لا يمكن لـ External الوصول إلى المعلومات الداخلية ، ولن يكون هناك تلوث للمتغيرات العالمية. تم شرح مواصفات التطوير الرسمية: أ) تجنب التبعيات العالمية ؛ ب) تجنب أضرار الطرف الثالث ؛ ج) التوافق مع مشغلي jQuery '$' و 'jQuery'.

(3) توفير خيارات المعلمة الافتراضية للمكون الإضافي. يجب أن يتيح المكون الإضافي ذو القابلية للتوسعة الجيدة للمستخدمين تخصيص خيارات المعلمة وفقًا لاحتياجاتهم والتحكم في سلوك المكون الإضافي. لذلك ، من الضروري توفير الخيارات الافتراضية المستعادة. يمكنك تعيين هذه الخيارات من خلال طريقة تمديد jQuery

(4) ، التكرار من خلال عناصر متعددة وإرجاع jQuery باستخدام محرك Sizzle Selector ، يمكن أن توفر Sizzle عمليات متعددة العناصر لوظائفك (مثل العناصر ذات اسم الفئة نفسه). هذه واحدة من العديد من الميزات الممتازة لـ JQuery ، وحتى إذا لم تكن مستعدًا لتوفير دعم متعدد العناصر للمكون الإضافي الخاص بك أثناء عملية التطوير ، فإن التحضير لهذا لا يزال ممارسة جيدة. بالإضافة إلى ذلك ، لدى JQuery ميزة جيدة يمكنها أداء Cascades ، والتي يمكن أن تسمى أيضًا مكالمات السلسلة ، لذلك يجب ألا ندمر هذه الميزة وإرجاع عنصر دائمًا في هذه الطريقة.

(5) من المهم وضع رمز لمرة واحدة خارج الحلقة الرئيسية ، ولكن يتم تجاهله غالبًا. ببساطة ، إذا كان لديك قطعة من التعليمات البرمجية التي هي مجموعة من القيم الافتراضية التي تحتاج فقط إلى إنشاء مثيل لها مرة واحدة ، بدلاً من إنشاء إنشاء وظيفة في كل مرة تتصل فيها بوظيفة البرنامج المساعد ، يجب عليك وضع هذا الرمز خارج طريقة المكون الإضافي.

(6) بعد التعلم ، دعنا نفكر في الأمر. إذا كان اختيار تكنولوجيا المشروع واستبدال هذه المكونات الإضافية ، فإنه يعتمد على آلية "jQuery" ، فلن يتم استخدام المكونات التي كتبناها من قبل (على افتراض أن jQuery غير مستخدم). كيف تكرسها؟

سيتحدث مقالة الغد عن هذه المسألة وسوف يعيد تشكيل المنطق الرئيسي للمكون الإضافي ، لذلك ترقبوا. . .