تحليل شامل لنمط جسم واحد في نمط تصميم JavaScript

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

نمط العصر الحجري هو واحد من أنماط أساسية ولكن مفيدة في جافا سكريبت.

سمات:

1. يمكن استخدامها لتقسيم مساحات الأسماء لمسح مخاطر أو آثار المتغيرات العالمية.

2. استخدم تقنية التفرع لتغليف الاختلافات بين المتصفحات.

3. يمكن تنظيم الكود أكثر بطريقة واحدة ، مما يسهل القراءة والصيانة.

الكتابة الأساسية لوضع الجسم المفرد:

 /* أبلى نمط المونومر*/ var her = {name: 'Anna' ، الجنس: 'Women' ، say: function () {// بعض منطق المعالجة ...} ، القيام: function () {// وظائف معالجة أخرى ...}}

1. قسمة مساحة الاسم:

 var box = {width: 0 ، الارتفاع: 0 ، getarea: function () {return this.width * this.width ؛ // يجب عرض الوصول إلى الكائنات في JS ، أي أنه لا يمكن حذف هذا} ، init: function (w ، h) {// width = w ؛ // height = h ؛ هذه الطريقة تعادل تحديد متغيرين عالميين ، (المتغيرات التي لم يتم الإعلان عنها مع VAR هي متغيرات عالمية) // ليست مهمة لعرض وارتفاع الكائن // فيما يلي هو الصحيح this.width = w ؛ this.height = h ؛}} // يقسم مساحة الاسم ، والمتغيرات في مساحة الاسم صالحة فقط في الفضاء

جميع الأعضاء والأساليب في المونومر أعلاه علن ، أي أنه يمكن تغييرهم بشكل تعسفي خارج المونومر (لكنهم لا يستطيعون الوصول إلى المتغيرات المحلية). فلماذا يوفر المونومر مساحة اسم؟

لا تقلق ، دعنا نستمر في النظر:

 var box = {width: 0 ، الارتفاع: 0 ، // متغير monomer getarea: function () {عرض الإرجاع * الارتفاع ؛ // العرض ، الارتفاع ليس متغير مونومر ، ولكن متغير عالمي محدد في init} init: function (w ، h) {width = w ؛ height = h ؛ box.getarea () ؛ Alert (init) ؛}

نظرًا لعدم تهيئة العرض والارتفاع في init ، سيتم الإبلاغ عن خطأ ، لذا قم بتغييره مثل هذا:

 var box = {width: 0 ، height: 0 ، getarea: function () {return width * height ؛} ، init: function (w ، h) {width = w ؛ height = h ؛}} window.onload = function () {width = 0 ؛ height = 0 ؛

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

 var box = {width: 0 ، height: 0 ، getarea: function () {return width * height ؛ // يجب عرض وصول الكائن في js ، أي أنه لا يمكن حذف هذا} ، init: function (w ، h) {width = w ؛ height = h ؛ box.getarea () ؛ تنبيه (عرض) ؛}

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

 var box = {width: 2 ، الارتفاع: 2 ، getarea: function () {return this.width * this.height ؛ / / js يجب عرض الوصول ، أي أنه لا يمكن حذف هذا} ، init: function (w ، h) {this.width = w ؛ this.height = h ؛}}}} // لن يؤثر على المتغيرات المحلية في متراصة ، أي ارتفاع مساحة الاسم = 0 ؛ // لن يؤثر على المتغيرات المحلية في متراصة ، أي مساحة المساحة var = box.getarea () ؛ التنبيه (العرض) ؛}

يمكن ملاحظة أن العرض والارتفاع في النافذة. لا يوجد تدخل ، لأن المونومرز قد أنشأت مساحة اسم للعرض والارتفاع في المونومرات.

2. خصائص الأعضاء:

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

 var her = (function () {var name = 'anna' ؛ var sex = 'women' ؛ return {getarea: function () {return name + 'هو' + sex ؛} ، init: function (b) {name = b ؛}}}) // لا يمكن الوصول إلى التنبيه (ger.getarea ()) ؛ her.init ('lous') ؛ Alert (her.getarea ()) ؛}

تكون المتغيرات والأساليب الخاصة للقراءة فقط ، في حين أن المتغيرات والأساليب العامة قابلة للقراءة.

وصول:

للأعضاء الخاصين ، يمكنك الوصول إليهم مباشرة دون أي تعديلات أمامهم.

للوصول العام ، "هذا". يجب إضافة قبل نطاق المونومر ، و "لها". (اسم monobody.)

3. استخدم تقنية الفرع لتغليف الاختلافات بين المتصفحات

ملحوظات:

أ. تأكد من استخدام عمليات الإغلاق لتحقيق الربط الفوري

ب. افصل كل فرع مع فاصلة فاصلة

ج. آخر شيء يعود هو اسم الفرع

د. استخدم اسم طريقة الفرع + الفرع عند الاتصال ؛

 // استخدام كائنات المتفرعة المونومر لتحديد كائنات XHR (XMLHTTPREQUEST) ، ويجب عليك استخدام إغلاق لتنفيذ var xhr = (function () {// the three bransesvar standard = {cxhr: function () {return new xmlhttprequest () ؛ ActivexObject ('msxml2.xmlhttp') ؛}} ؛ var activexold = {cxhr: function () {return new ActiveXObject ('microsoft.xmlHttp') ؛ إذا لم يتم إلقاء أي خطأ} catch (e) {try {testObject = activexnew.cxhr () ؛ return activexnew ؛} catch (e) {try {testObject = ActiveXold.cxhr () فشل XMLHTTPrequestObject! ') ؛

ما سبق هو تحليل شامل لنموذج الجسم الفردي لنمط تصميم JavaScript الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!