it-swarm.dev

نمط وحدة جافا سكريبت مع مثال

لا يمكنني العثور على أي أمثلة يمكن الوصول إليها توضح كيف ترتبط وحدتان مختلفتان (أو أكثر) بالعمل معًا.

لذا ، أود أن أسأل ما إذا كان لدى أي شخص وقت لكتابة مثال يشرح كيف تعمل الوحدات معًا.

133
Srle

من أجل الوصول إلى نمط التصميم المعياري ، تحتاج إلى فهم هذه الفكرة أولاً:

تعبير الوظيفة المستدعى فورًا (IIFE):

(function() {
      // Your code goes here 
}());

هناك طريقتان يمكنك استخدام الوظائف. 1. إعلان وظيفة 2. وظيفة التعبير.

هنا تستخدم وظيفة التعبير.

ما هي مساحة الاسم؟ الآن إذا أضفنا مساحة الاسم إلى الجزء أعلاه من الشفرة بعد ذلك

var anoyn = (function() {
}());

ما هو إغلاق في JS؟

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

var scope = "I am global";
function whatismyscope() {
    var scope = "I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

سنقوم الآن بتطبيق هذه المفاهيم الثلاثة التي ذكرتها أعلاه لتحديد نمط التصميم المعياري الأول لدينا:

var modularpattern = (function() {
    // your module code goes here
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}());
alert(modularpattern.add());    // alerts: 1
alert(modularpattern.add());    // alerts: 2
alert(modularpattern.reset());  // alerts: 0

jsfiddle للرمز أعلاه.

الهدف هو إخفاء إمكانية الوصول المتغيرة من العالم الخارجي.

أتمنى أن يساعدك هذا. حظا سعيدا.

251
kta

أوصي حقًا أي شخص يدخل هذا الموضوع بقراءة كتاب Addy Osmani المجاني:

"تعلم أنماط تصميم جافا سكريبت".

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

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

38
Code Novitiate

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

لقد جئت من خلفية c # لذلك أضفت بعض المصطلحات التي أجدها مفيدة من هناك.

Html

سيكون لديك بعض kindof ملف HTML المستوى الأعلى. يساعد على التفكير في هذا كملف المشروع الخاص بك. يريد كل ملف javascript تضيفه إلى المشروع الدخول في هذا الأمر ، لسوء الحظ ، لا تحصل على دعم أداة لهذا (أنا أستخدم IDEA).

تحتاج إلى إضافة ملفات إلى المشروع مع علامات البرنامج النصي مثل هذا:

        <script type="text/javascript" src="app/native/MasterFile.js" /></script>
        <script type="text/javascript" src="app/native/SomeComponent.js" /></script>

يبدو أن الانهيار في العلامات يؤدي إلى فشل الأشياء - في حين يبدو أن xml يعد أمرًا ذا قواعد جنونية!

ملف مساحة الاسم

MasterFile.js

myAppNamespace = {};

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

الوحدة (الوحدات)

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

    var incrementCount = function () {
        privateState += 1;
    };

    return function (message) {
        incrementCount();
        //TODO something with the message! 
    }
})();

ما نقوم به هنا هو تعيين وظيفة عداد الرسائل لمتغير في طلبنا. إنها دالة تقوم بإرجاع دالة نقوم بتنفيذها على الفور .

المفاهيم

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

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

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

19
JonnyRaa

هنا https://toddmotto.com/mastering-the-module-pattern يمكنك العثور على النموذج الموضح تمامًا. أود أن أضيف أن الشيء الثاني حول جافا سكريبت وحدات هو كيفية تنظيم التعليمات البرمجية الخاصة بك في ملفات متعددة. قد ينصحك العديد من الأشخاص هنا بالذهاب مع AMD ، ومع ذلك أستطيع أن أقول من التجربة أنك ستنتهي في مرحلة ما باستجابة بطيئة للصفحة بسبب العديد من طلبات HTTP. المخرج هو التجميع المسبق لوحدات JavaScript الخاصة بك (واحدة لكل ملف) في ملف واحد يتبع معيار CommonJS. ألقِ نظرة على العينات هنا http://dsheiko.github.io/cjsc/

6
Dmitry Sheiko