1. طلاق الواجهة
الواجهة الجيدة سلسة وسهلة الفهم ، وهي تعكس بشكل أساسي الجوانب التالية:
1. بسيط
لتشغيل سمة CSS لعنصر معين ، فإن ما يلي هو الطريقة الأصلية:
document.queryselectorall ('#id'). style.color = 'red' ؛بعد التعبئة والتغليف
الدالة A (المحدد ، اللون) {document.queryselectorall (محدد) []. style.color = color} a ('#a' ، 'red') ؛من سلسلة طويلة مع عشرات الحروف إلى مكالمة وظيفة بسيطة ، فإن واجهة برمجة التطبيقات بسيطة وسهلة الاستخدام
2. قابلية القراءة
A ('#a' ، 'Red') هي وظيفة جيدة تساعدنا على تغيير عنصر ما ببساطة وعملي ، ولكن المشكلة هي أنه إذا كنت تستخدم تغيير الوظيفة لأول مرة ، فسيكون ذلك أكثر حيرة. لن يخبره أحد عن الوظيفة A. من الضروري معرفة شيء واحد عن تطوير الواجهة: الناس كسولون. من منظور وظيفة تعيين اللون ، على الرغم من كتابة رمز أقل ، فإنه يزيد من تكلفة الذاكرة. في كل مرة تقوم بها ، تحتاج إلى وجود علاقة رسم الخرائط. A ----> اللون. إذا كانت هناك عدد قليل من تلك البسيطة ، فهذا لا يهم ، ولكن عادةً ما يكون هناك مجموعة من الأطر العشرات أو حتى مئات واجهات برمجة التطبيقات ، وستؤدي الزيادة في تكاليف رسم الخرائط إلى انهيار المبرمج. ما نحتاجه هو جعل الواجهة ذات معنى. دعنا نعيد كتابة الوظيفة:
الدالة تتيح لـ OfficeElementChangeColor (محدد ، لون) {document.queryselectorall (المحدد ، اللون) ؛}يتيح LetSomeElementChangeColor معنى لغوي بالنسبة إلى A ، وسيعرف أي شخص معناها.
3. تقليل تكاليف الذاكرة
الوظيفة التي نحن عليها الآن هي أيضا مثل هذا. إنه طويل جدًا. على الرغم من أن يتيح EntsomeElementChangeColor تقليل تكلفة التعيين ، إلا أنه يزيد من تكلفة الذاكرة. يجب أن تعلم أنه لا أحد ، بما في ذلك الأسياد الأكاديميين ، يحب أن يكون شفهياً. واجهات برمجة التطبيقات التي تحصل عليها أصلاً على DOM لديها أيضًا مشكلة المشكلة. document.getElementSbyName ؛ document.queryselectorall ؛ هذه واجهات برمجة التطبيقات تمنح الناس الشعور بأن الكلمات طويلة جدًا. على الرغم من أن المعنى الذي يعطونه واضح للغاية ، فإن هذا النهج يعتمد على التضحية بساطة. لذلك نعيد كتابة هذه الوظيفة السابقة مرة أخرى
وظيفة setColor (المحدد ، اللون) {xxxxxxxxxxxx}تقليل اسم الوظيفة دون تغييرات كبيرة. اجعل من السهل القراءة والتذكر والاستخدام ؛
4. ممتد
يعني التمديد المزعوم أن استخدام الوظائف يتم تنفيذها بترتيب الكتابة مثل تدفق المياه لتشكيل سلسلة تنفيذ:
document.getElementById ('id'). style.color = 'red' ؛ document.getElementById ('id').كانت الطريقة السابقة التي استخدمناها هي تغليف وظيفتين setFontsize ، setbackgroundColor مرة أخرى ؛ ثم تنفيذها setColor ('id' ، 'Red') ؛ setFontsiez ('id' ، '12px') ؛ الانتكاسات collor ('id' ، 'pink') ؛ من الواضح أن هذا النهج ليس كسولًا لتجاوز العالم ؛ يجب إعادة تشكيل عنصر المعرف في كل مرة ، مما يؤثر على الأداء ، والفشل ؛ في كل مرة تحتاج إلى إضافة طرق جديدة ، أو الفشل ، لا تزال هذه الأساليب تسمى في كل مرة ، أو الفشل. أدناه قمنا بإعادة كتابتها في وظيفة ممتدة. أولاً ، قم بتغليف طريقة معرف الحصول على كائن ، ثم أعد هذا الكائن في كل طريقة للكائن:
وظيفة getElement (SENECTOR) {this.style = document.queryselecotrall (selector) .style ؛} getElement.Prototype.color = function (color) {this.style.color = color ؛ report this ؛} getElement.prototype.background = promice this ؛} getElement.Prototype.fontsize = function (size) {this.style.fontsize = size ؛ return this ؛} // call var el = new getElement ('#id') el.Color ('Red').بسيطة وسلسة وسهلة القراءة لاحقًا ، سنتحدث عن كيفية الاستمرار في التحسين في المعلمات. لذلك ، يفضل الجميع استخدام jQuery API. على الرغم من أن رمز $ لا يمثل أي أهمية عملية ، إلا أن الرمز البسيط مفيد لاستخدامنا. إنه يجسد المبادئ المذكورة أعلاه: بسيطة وسهلة القراءة وسهلة التذكر والكتابة سلسلة ومعالجة متعددة المعلمات.
Nightware:
document.getElementById ('id'). style.color = 'red' ؛ document.getElementById ('id').حلم:
$ ('id').2. الاتساق
1. اتساق الواجهة
الواجهات ذات الصلة تحافظ على نمط ثابت. ستؤدي مجموعة كاملة من واجهات برمجة التطبيقات إلى تقليل قدرة المطور إلى حد كبير على أدوات جديدة إذا كانت تنقل شعورًا بالألفة والراحة. تسمية هذا الشيء: كل من القصص القصير والوصف الذاتي ، والأهم من ذلك ، الحفاظ على الاتساق. "لا يوجد سوى صدفين في مجتمع علوم الكمبيوتر: فشل ذاكرة التخزين المؤقت وتسمية مشكلات" - فيل كارلتون ، اختر كلمة تحبها واستخدامها بشكل مستمر. اختر نمطًا ثم احتفظ به.
Nightware:
setColor ،
Letbackground
ChangeFontsize
Makedisplay
حلم:
setColor
انتكاسة
setFontsize
تعيين.........
حاول الحفاظ على نمط الكود وأسلوب التسمية حتى يتمكن الأشخاص من قراءة الكود الخاص بك كما لو كانوا يقرؤون مقالات كتبها نفس الشخص.
3. معالجة المعلمة
1. نوع المعلمة
حدد نوع المعلمات لتوفير ضمانات مستقرة لبرنامجك
// ننص على أن اللون يقبل دالة نوع السلسلة setColor (color) {if (typeof color! == 'string') return ؛ dosomething}2. استخدم JSON لتمرير المعلمات
هناك العديد من فوائد تمرير القيم في JSON. يمكنه تسمية المعلمات ، وتجاهل الموقع المحدد للمعلمات ، وإعطاء القيم الافتراضية ، وما إلى ذلك ، على سبيل المثال ، المواقف السيئة التالية:
دالة FN (param1 ، param2 ............ paramn)
يجب عليك تمرير كل معلمة بالترتيب وفقًا لذلك ، وإلا سيتم تنفيذ طريقتك بطريقة مختلفة عما تتوقع. الطريقة الصحيحة هي ما يلي.
الدالة fn (json) {// قم بتعيين القيمة الافتراضية للمعلمات المطلوبة var default = extend ({param: 'default' ، param: 'default' ......} ، json)}من المتوقع أن يتم تشغيل رمز الوظيفة هذا حتى إذا لم تقم بتمرير أي معلمات فيه. لأنه عند الإعلان ، ستقرر القيمة الافتراضية للمعلمات بناءً على الأعمال المحددة.
4. قابلية التوسع
واحدة من أهم مبادئ تصميم البرامج: لا تعدل الواجهة أبدًا ، فهذا يعني توسيعها! تتطلب قابلية التوسع أيضًا مسؤولية واحدة عن الواجهة ، ومن الصعب توسيع واجهات المسؤولية المتعددة. خذ كستناء:
// يجب تغيير الخط وخلفية عنصر ما في نفس الوقت // nightware: مجموعة الوظائف (المحدد ، اللون) {document.queryselectroall (SECECTOR) .STYLE.COLOR = color ؛ document.queryselectroall (محدد) .style.backgroundColor = color ؛} // لا يمكن توسيع الوظيفة. إذا كنت بحاجة إلى تغيير حجم الخط مرة أخرى ، فيمكنك فقط تعديل هذه الوظيفة وملء الكود لتغيير حجم الخط بعد مجموعة الدالة // DreamFunction (المحدد ، اللون) {var el = document.queryselectroall (محدد) ؛ el.style.color = color ؛ px) {var el = set (محدد ، اللون) el.style.fontsize = px ؛ return el ؛}ما سبق هو مجرد إضافة بسيطة للألوان. العمل معقد والرمز ليس عند كتابته. يجب عليك قراءة الكود السابق وتعديله. من الواضح أنه لا يتوافق مع المبدأ المفتوح. تقوم الدالة المعدلة بإرجاع كائن العنصر ، بحيث في المرة القادمة التي تحتاج إلى تغييرها ، ستحصل على قيمة الإرجاع مرة أخرى للمعالجة.
2. استخدام هذا
تتضمن قابلية التوسع أيضًا استخدامًا مرنًا لهذا ، والاتصال والتطبيق الأساليب:
الوظيفة saysbonjour () {Alert (this.a)} obj.a = ؛ obj.say = saybonjour ؛ obj.say () ؛ /// orsaybonjour.call || تطبيق (obj) ؛ //5. التعامل مع الأخطاء
1. أخطاء التنبؤ
يمكنك استخدام typeof أو المحاولة ... catch للكشف. يفرض Typeof كائن الكشف على عدم رمي الأخطاء ، وهو مفيد بشكل خاص للمتغيرات غير المحددة.
2. رمي خطأ
لا يرغب معظم المطورين في ارتكاب أخطاء ويحتاجون إلى العثور على الكود المقابل بأنفسهم. أفضل طريقة هي إخراجها مباشرة في وحدة التحكم لإخبار المستخدم بما حدث. يمكننا استخدام واجهة برمجة تطبيقات إخراج المتصفح: console.log/warn/error. يمكنك أيضًا ترك مخرج لبرنامجك: حاول ... Catch.
خطأ في الوظيفة (أ) {if (typeof a! == 'string') {console.error ('param a يجب أن يكون نوع السلسلة')}}6. التبصر
توفر واجهة برنامج الرائحة التي يمكن التنبؤ بها متانة ، ولضمان التنفيذ السلس للرمز الخاص بك ، يجب أن تأخذ في الاعتبار توقعات غير طبيعية. دعونا نلقي نظرة على الفرق بين الكود غير المتوقع والرمز المتوقع باستخدام setColor السابق
// nighwarefunction set (محدد ، اللون) {document.getElementById (محدد) .style.color = color ؛} // dreamzepto.init = function (محدد ، سياق) {var dom // إذا لم يكن هناك شيء معطى ، فلا يوجد zepto collectionif (! selector.trim () // إذا كان جزء html ، قم بإنشاء عقد منه // ملاحظة: في كل من Chrome و firefox ، يتم إلقاء خطأ // dom // إذا لم يبدأ الشظية بـ <if (concector [] == '<' في هذا السياق أولاً ، وحدد // العقد من oneelse إذا (السياق! == غير محدد) إرجاع $ (سياق) .find (محدد) // إذا كان محدد CSS ، استخدمه لتحديد العقد. $ (document). ready (محدد) // إذا تم إعطاء مجموعة Zepto ، ما عليك سوى إرجاع itelse إذا (zepto.isz (selector)) إرجاع selectorelse {// تطبيع صفيف إذا تم إعطاء مجموعة من العقد (isarray (محدد)) dom = compact (محدد) // شظية html ، قم بإنشاء عقد من itelse if (fragmentre.test (selector)) dom = zepto.fragment (celector.trim () ، regexp. $ ، context) ، selector = null // exted on extext ، intext $ (altext) on $ (altext). لا شيء ، إذا كان محددًا CSS ، استخدمه لتحديد العقد.ما سبق هو رمز المصدر ل Zepto. يمكنك أن ترى أن المؤلف قد قام بالكثير من المعالجة عند التنبؤ بالمعلمات الواردة. في الواقع ، توفر القدرة على التنبؤ عدة مداخل للبرنامج ، وليس أكثر من بعض الأحكام المنطقية. يستخدم Zepto الكثير من الأحكام الصحيحة والخاطئة هنا ، مما يؤدي أيضًا إلى طول الكود وهو غير مناسب للقراءة. باختصار ، تتطلب منك التنبؤ حقًا كتابة المزيد من المعلمات للكائنات الفعلية في الموقع. تغيير الكشف الخارجي إلى الكشف الداخلي. نعم ، الأشخاص الذين يستخدمونها مريحون وسعداء لاستخدامه. الآن! أهم شيء في الحياة هو عيسن.
7. التعليقات والوثائق قابلية القراءة
أفضل واجهة هي أننا سنستخدمها بدون وثائق ، ولكن في كثير من الأحيان ، بمجرد أن يكون عدد الواجهات أكثر وزيادة الأعمال ، سيكون من الصعب بعض الشيء استخدامها. لذلك ، يجب كتابة المستندات والتعليقات الواجهة بعناية. تتبع التعليقات مبدأ البسيط والتوصيف ، وهي بالنسبة لأولئك الذين يأتون بعد سنوات لإظهارهم:
// واجهة التعليقات التوضيحية ، لإظهار ppt ، استخدم commentary function () {// إذا حددت متغيرًا دون معنى حرفي ، فمن الأفضل أن تكتب تعليقًا له: أ: متغير عديمة الفائدة ، يمكنك حذف var a ؛ // كتابة التعليقات في المفتاح والغموض ، تمامًا مثل اللمس النهائي: مسح جميع البيانات بعد التوجيه إلى واجهة التجزئة. return go.navigate ('hash' ، function () {data.clear () ؛}) ؛}في النهاية
من المستحسن تخفيض مستندات API في كتابة قواعد النحوية وبناء جملة Withub Royal Document Writing. بسيط وسريع ، يتم تمييز الكود ، ولا تقول الكثير.
ما سبق هو الوصف الكامل لمبادئ تصميم JavaScript API التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!