مفهوم
وضع المظهر (وضع الواجهة) هو وضع بسيط نسبيا ومواقع في كل مكان. يوفر وضع المظهر واجهة عالية المستوى ، مما يسهل الاتصال بالعملاء أو الأنظمة الفرعية.
وضع المظهر ليس وضع محول ، وضع المحول هو غلاف لتكييف الواجهة لاستخدامه في نظام غير متوافق. إنشاء عناصر المظهر هو راحة. لا يتم استخدامه للتعامل مع أنظمة العملاء التي تتطلب واجهات محددة ، ولكن لتوفير واجهة مبسطة.
أمثلة رمز JavaScript
استخدم قطعة رمز بسيطة للتعبير عنها
var getName = function () {return '' svenzeng "} var getSex = function () {return 'man'}إذا كنت بحاجة إلى استدعاء وظائف GetName و GetSex على التوالي ، فيمكنك استخدام واجهة عالية المستوى getUserInfo للاتصال بها.
var getUserInfo = function () {var info = a () + b () ؛ معلومات الإرجاع ؛}ربما ستسأل لماذا لم تكتب رمز getName و GetSex معًا في البداية ، على سبيل المثال
var getNameAndsex = function () {return 'svenzeng " +" man "؛}الجواب واضح. لن يثير طهاة الطهي في المقصف هذين الطبقان في نفس الوعاء لمجرد أنك حجزت بطة مشوية وكرنب. يفضل تزويدك بوجبة محددة من أرز البط المشوي. أيضًا في البرمجة ، نحتاج إلى التأكد من أن الوظائف أو الكائنات في حالة من الحبيبات المعقولة قدر الإمكان. بعد كل شيء ، لا يحب الجميع تناول البط المشوي ويحب أيضًا تناول الملفوف.
ميزة أخرى لوضع المظهر هي أنه يمكنه إخفاء تفاصيل التنفيذ الحقيقية من المستخدمين ، ولا يهتم المستخدمون إلا بأعلى مستوى. على سبيل المثال ، في قصة وجبة مجموعة أرز Duck Duck ، لا تهتم بما إذا كان Master يقوم بب البط المشوي أولاً أو الملفوف المثير أولاً ، ولا تهتم بمكان نشأت البط.
أخيرًا ، كتبت مثالًا على نمط المظهر الذي استخدمناه جميعًا
var stopevent = function (e) {// block revent revault rejust and bubbles في نفس الوقت eStopPropagation () ؛ E.PreventDefault () ؛}أعلم أن مفهوم أنماط المظهر سهل الإتقان ، وقد لا تحتاج بالضرورة إلى مثال على رمز JavaScript ، لكن بعض الأشخاص يهتمون دائمًا بالكود وسيعتقدون أنه سيكون من الأسهل فهمه. والأكثر من ذلك ، أن مقالات JavaScript بدون عينات رمز ليست مقنعة على الإطلاق ، لذلك يجب حذفها من الإنترنت. لنبدأ بمثال بسيط لمستمع الحدث. يعلم الجميع أن إضافة مستمع حدث ليس بالأمر السهل إلا إذا كنت تريد فقط تشغيل الرمز على عدد قليل من المتصفحات. يجب عليك اختبار العديد من الطرق للتأكد من أن رمز المتصفحات المختلفة يعمل بشكل صحيح. في مثال الرمز هذا ، نضيف فقط اكتشاف الميزات إلى هذه الطريقة:
وظيفة addEvent (العنصر ، النوع ، func) {if (window.adDeventListener) {element.addeventListener (type ، func ، false) ؛ } آخر if (window.attachevent) {element.attachevent ('on'+type ، func) ؛ } آخر {element ['on'+type] = func ؛ }}الأمر بسيط! أتمنى حقًا أن لا أستطيع كتابة رموز غير ضرورية ، مما يجعلها أكثر بساطة ، ولكن إذا كان هذا هو الحال ، فسيكون ذلك بلا معنى ولن ترغب في قراءته ، أليس كذلك؟ لذلك لا أعتقد ذلك ، أعتقد أنني أريد أن أريكم شيئًا أكثر تعقيدًا. أريد فقط أن أقول إن الكود الخاص بك سيبدو شيئًا كهذا:
var foo = document.getElementById ('foo') ؛ foo.style.color = 'red' ؛ foo.style.width = '150px' ؛ var bar = document.getElementById ('bar') ؛ bar.Style.Color = 'Red' ؛ Bar.Style.Width = '150px' ؛ var baz = document.getElementById ('baz') ؛ baz.style.color = 'red' ؛ baz.style.width = '150px' ؛ var baz = document.getElementById ('baz') ؛ baz.style.color = 'red' ؛ baz.style.width = '150px' ؛عرجاء جدا! لقد فعلت نفس الشيء بالضبط لكل عنصر! أعتقد أننا يمكن أن نجعل الأمر أسهل قليلاً:
وظيفة setStyle (عناصر ، خاصية ، قيمة) {for (var i = 0 ، length = elements.length ؛ i <length ؛ i ++) {document.getElementById (elements [i]). style [property] = value ؛ }} // الآن يمكنك الكتابة بهذه الطريقة: setStyle (['foo' ، 'bar' ، 'baz'] ، 'color' ، 'red') ؛ setStyle (['foo' ، 'bar' ، 'baz'] ، 'width' ، '150px) ؛هل تعتقد أن NB مكسور؟ نسيته! نحن مبرمجين JavaScript! هل يمكنك استخدام بعض العقول للحصول على بعض الأشياء الحقيقية؟ ربما يمكننا ضبط جميع الأنماط مرة واحدة فقط. تحقق من هذا:
setStyles Function (العناصر ، الأنماط) {for (var i = 0 ، length = elements.length ؛ i <length ؛ i ++) {var element = document.getElementById (elements [i]) ؛ لـ (خاصية var في الأنماط) {element.style [property] = styles [property] ؛ }}} // الآن تحتاج فقط إلى الكتابة بهذه الطريقة: setStyles (['foo' ، 'bar' ، 'baz'] ، {color: 'red' ، width: '150px'}) ؛إذا كان لدينا العديد من العناصر التي ترغب في ضبط نفس النمط ، فإن هذا الرمز يوفر لنا الكثير من الوقت.
مزايا وضع المظهر:
الغرض من استخدام وضع المظهر هو تسهيل على المبرمجين كتابة رمز التحرير والسرد مرة واحدة ثم استخدامه مرارًا وتكرارًا ، مما يساعد على توفير الوقت والجهد. توفير واجهة مبسطة لبعض المشاكل المعقدة.
طريقة المظهر مريحة للمطورين. قدمت BIN وظائف عالية المستوى نسبيًا ، مما يقلل من الاعتماد على التعليمات البرمجية الخارجية ، وإضافة بعض المرونة الإضافية لتطوير أنظمة التطبيق. باستخدام وضع المظهر ، يمكن تجنب الاقتران الضيق للنظام الفرعي الأساسي. بهذه الطريقة ، يمكن تعديل النظام دون التأثير على رمز العميل.
عيوب وضع المظهر:
في بعض الأحيان يمكن أن تجلب عناصر المظهر بعض العبء الإضافي غير الضروري. قبل تنفيذ بعض الروتين ، يجب عليك التفكير بعناية في عملي. في بعض الأحيان مقارنة بوظيفة المظهر المعقدة ، تكون وظيفة تكوينها أكثر جاذبية من حيث القوة. وذلك لأن وظائف المظهر قد تؤدي مهام لا تحتاجها.
بالنسبة لموقع شخصي بسيط أو عدد صغير من صفحات التسويق ، قد لا يكون من الحكمة استيراد مكتبة JavaScript هذه للحصول على القليل من السلوك المحسّن مثل تلميحات الأدوات والنوافذ المنبثقة. فكر في استخدام عدد قليل من عناصر المظهر البسيطة في هذا الوقت بدلاً من مكتبة مليئة بهذه الأشياء.
توفر وظائف المظهر واجهة بسيطة لأداء مختلف المهام المعقدة ، مما يجعل الكود أسهل في الحفاظ عليه وفهمه. يمكنهم أيضًا إضعاف الاقتران بين الأنظمة الفرعية ورمز العميل. الجمع بين الوظائف الشائعة التي غالبا ما تظهر معا. يستخدم هذا الوضع بشكل شائع في البرمجة النصية DOM ، مما يتطلب واجهات متصفح غير متناسقة.