Pola modul JavaScript dengan contoh [ditutup]

Saya tidak dapat menemukan contoh yang dapat diakses yang menunjukkan bagaimana dua (atau lebih) modul berbeda dihubungkan untuk bekerja bersama.

Jadi, saya ingin bertanya apakah ada yang punya waktu untuk menulis contoh yang menjelaskan bagaimana modul bekerja sama.

Untuk mendekati pola desain Modular, Anda perlu memahami konsep ini terlebih dahulu:

Ekspresi Fungsi (IIFE) yang Segera Diminta:

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

Ada dua cara untuk menggunakan fungsi tersebut. 1. Deklarasi fungsi 2. Ekspresi fungsi.

Berikut menggunakan ekspresi fungsi.

Apa itu namespace? Sekarang jika kita menambahkan namespace ke bagian kode di atas

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

Apa closure di JS?

Artinya jika kita mendeklarasikan fungsi apa pun dengan lingkup variabel apa pun / di dalam fungsi lain (di JS kita dapat mendeklarasikan fungsi di dalam fungsi lain!) Maka itu akan selalu menghitung ruang lingkup fungsi itu. Artinya, variabel apa pun di fungsi luar akan selalu dibaca. Itu tidak akan membaca variabel global (jika ada) dengan nama yang sama. Ini juga salah satu tujuan penggunaan pola desain modular untuk menghindari konflik penamaan.

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

Sekarang kita akan menerapkan tiga konsep yang saya sebutkan di atas untuk menentukan pola desain modular pertama kita:

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 untuk kode di atas.

Tujuannya adalah untuk menyembunyikan aksesibilitas variabel dari dunia luar.

Semoga ini membantu. Semoga berhasil.

Saya sangat merekomendasikan siapa pun yang memasuki subjek ini untuk membaca buku gratis Addy Osmani:

"Mempelajari Pola Desain JavaScript".

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

Buku ini sangat membantu saya ketika saya mulai menulis JavaScript yang lebih mudah dirawat dan saya masih menggunakannya sebagai referensi. Lihatlah implementasi pola modulnya yang berbeda, dia menjelaskannya dengan sangat baik.

Saya pikir saya akan memperluas jawaban di atas dengan berbicara tentang bagaimana Anda akan menyesuaikan modul menjadi sebuah aplikasi. Saya pernah membaca tentang ini di buku doug crockford tetapi karena baru mengenal javascript, semuanya masih agak misterius.

Saya berasal dari latar belakang ac # jadi telah menambahkan beberapa terminologi yang menurut saya berguna dari sana.

Html

Anda akan memiliki semacam file html tingkat atas. Ini membantu untuk menganggap ini sebagai file proyek Anda. Setiap file javascript yang Anda tambahkan ke proyek ingin masuk ke ini, sayangnya Anda tidak mendapatkan dukungan alat untuk ini (saya menggunakan IDEA).

Anda perlu menambahkan file ke proyek dengan tag skrip seperti ini:

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

Tampaknya menciutkan tag menyebabkan hal-hal gagal - sementara itu terlihat seperti xml itu benar-benar sesuatu dengan aturan yang lebih gila!

File namespace

MasterFile.js

myAppNamespace = {};

itu dia. Ini hanya untuk menambahkan satu variabel global untuk kode kita yang tersisa. Anda juga bisa mendeklarasikan namespace bertingkat di sini (atau di file mereka sendiri).

Modul

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

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

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

Apa yang kita lakukan di sini adalah menetapkan fungsi penghitung pesan ke variabel dalam aplikasi kita. Ini adalah fungsi yang mengembalikan fungsi yang segera kita jalankan .

Konsep

Saya pikir itu membantu untuk memikirkan baris teratas di SomeComponent sebagai namespace tempat Anda mendeklarasikan sesuatu. Satu-satunya peringatan untuk ini adalah semua namespace Anda harus muncul di beberapa file lain terlebih dahulu - mereka hanyalah objek yang di-root oleh variabel aplikasi kita.

Saya hanya mengambil langkah kecil dengan ini saat ini (saya merefaktor beberapa javascript normal dari aplikasi extjs sehingga saya dapat mengujinya) tetapi tampaknya cukup bagus karena Anda dapat menentukan unit fungsional kecil sambil menghindari rawa 'ini ' .

Anda juga bisa menggunakan gaya ini untuk mendefinisikan konstruktor dengan mengembalikan fungsi yang mengembalikan objek dengan sekumpulan fungsi dan tidak langsung memanggilnya.

Di sini https://toddmotto.com/mastering-the-module-pattern Anda dapat menemukan pola yang dijelaskan secara menyeluruh. Saya akan menambahkan bahwa hal kedua tentang JavaScript modular adalah bagaimana menyusun kode Anda dalam banyak file. Banyak orang mungkin menyarankan Anda di sini untuk menggunakan AMD, namun saya dapat mengatakan dari pengalaman bahwa Anda akan berakhir di beberapa titik dengan respons halaman yang lambat karena banyak permintaan HTTP. Jalan keluarnya adalah pra-kompilasi modul JavaScript Anda (satu per file) menjadi satu file mengikuti standar CommonJS. Lihat contoh di sini http://dsheiko.github.io/cjsc/

Anda dapat menemukan JavaScript Module Pattern di sini http://www.sga.su/module-pattern-javascript/