Penjelasan terperinci tentang pengaturcaraan modular Javascript_Pengetahuan asas

Pengaturcaraan modular ialah model pengaturcaraan Javascript yang sangat biasa. Ia biasanya menjadikan kod lebih mudah difahami, tetapi terdapat banyak amalan baik yang tidak diketahui secara meluas.

Asas

Mari kita mulakan dengan gambaran ringkas tentang beberapa corak modular sejak Eric Miraglia (pembangun YUI) mula-mula menerbitkan blog yang menerangkan corak modular tiga tahun lalu. Jika anda sudah biasa dengan mod modular ini, anda boleh melangkau bahagian ini dan mula membaca dari "Mod Lanjutan".

Penutupan tanpa nama

Ini ialah struktur asas yang membolehkan segala-galanya, dan ia juga merupakan ciri terbaik Javascript. Kami hanya akan mencipta fungsi tanpa nama dan melaksanakannya dengan serta-merta. Semua kod akan dijalankan dalam fungsi ini dan hidup dalam penutupan yang menyediakan penswastaan, yang cukup untuk menjadikan pembolehubah dalam penutupan ini tersedia sepanjang keseluruhan kitaran hayat aplikasi kami.

Salin kod Kod adalah seperti berikut:

(fungsi () {
// ... semua vars dan fungsi berada dalam skop ini sahaja
// masih mengekalkan akses kepada semua global
}());

Perhatikan pasangan kurungan paling luar yang mengelilingi fungsi tanpa nama. Oleh kerana ciri bahasa Javascript, pasangan kurungan ini diperlukan. Dalam JavaScript, pernyataan yang bermula dengan fungsi kata kunci sentiasa dianggap sebagai pengisytiharan fungsi. Membungkus kod ini dalam kurungan memberitahu penterjemah bahawa ia adalah ungkapan fungsi.

Import pembolehubah global

Javascript mempunyai ciri yang dipanggil pembolehubah global tersirat. Tidak kira di mana nama pembolehubah digunakan, jurubahasa akan mengikuti rantai skop ke belakang untuk mencari pernyataan perisytiharan var pembolehubah. Jika tiada pengisytiharan var ditemui, pembolehubah dianggap sebagai pembolehubah global. Jika pembolehubah ini digunakan dalam pernyataan tugasan dan pembolehubah tidak wujud, pembolehubah global akan dicipta. Ini bermakna mudah untuk menggunakan atau mencipta pembolehubah global dalam penutupan tanpa nama. Malangnya, ini menghasilkan kod yang amat sukar untuk dikekalkan, kerana pada pandangan manusia, adalah mustahil untuk mengetahui pembolehubah yang global sepintas lalu.

Nasib baik, fungsi tanpa nama kami menyediakan penyelesaian yang mudah. Dengan hanya menghantar pembolehubah global sebagai hujah kepada fungsi tanpa nama kami, kami mendapat kod yang lebih bersih dan lebih pantas daripada pembolehubah global tersirat. Berikut ialah contoh:

Salin kod Kod adalah seperti berikut:

(fungsi ($, YAHOO) {
// kini mempunyai akses kepada jQuery global (sebagai $) dan YAHOO dalam kod ini
}(jQuery, YAHOO));

Eksport modul

Kadangkala anda bukan sahaja mahu menggunakan pembolehubah global, anda juga mahu mengisytiharkannya untuk kegunaan berulang. Kita boleh melakukan ini dengan mudah dengan mengeksportnya - melalui nilai pulangan fungsi tanpa nama. Melakukan ini akan melengkapkan prototaip asas corak modular, diikuti dengan contoh lengkap:

Salin kod Kod adalah seperti berikut:

var MODUL = (fungsi () {
var my = {},
        privateVariable = 1;
function privateMethod() {
               // ...
}
My.moduleProperty = 1;
My.moduleMethod = function () {
               // ...
};
Kembalikan saya;
}());

Perhatikan bahawa kami telah mengisytiharkan modul global yang dipanggil MODULE, yang mempunyai dua sifat awam: kaedah yang dipanggil MODULE.moduleMethod dan pembolehubah dipanggil MODULE.moduleProperty. Di samping itu, ia mengekalkan keadaan terbina dalam peribadi menggunakan penutupan fungsi tanpa nama. Pada masa yang sama, kita boleh mengimport pembolehubah global yang kita perlukan dengan mudah dan menggunakan corak modular ini seperti yang kita pelajari sebelum ini.

Mod Lanjutan

Asas yang diterangkan dalam bahagian di atas adalah mencukupi untuk banyak situasi, dan kini kita boleh membangunkan corak modular ini lagi untuk mencipta struktur yang lebih berkuasa dan boleh dipanjangkan. Mari kita mulakan dengan modul MODUL dan perkenalkan mod lanjutan ini satu persatu.

Mod pembesaran

Ini adalah had mod modular bahawa keseluruhan modul mesti berada dalam satu fail. Sesiapa yang telah bekerja pada projek besar akan memahami nilai pemisahan js kepada berbilang fail. Nasib baik, kami mempunyai pelaksanaan yang hebat untuk menguatkan modul. Mula-mula, kami mengimport modul, menambah sifat padanya, dan akhirnya mengeksportnya. Berikut ialah contoh - zum masuk daripada MODUL asal:

Salin kod Kod adalah seperti berikut:

var MODUL = (fungsi (saya) {
My.anotherMethod = fungsi () {
// kaedah tambahan...
};
Kembalikan saya;
}(MODUL));

Kami menggunakan kata kunci var untuk memastikan konsistensi, walaupun ia tidak diperlukan di sini. Selepas kod ini dilaksanakan, modul kami sudah mempunyai kaedah awam baharu yang dipanggil MODULE.anotherMethod. Fail penguatan ini juga mengekalkan keadaan terbina dalam peribadinya sendiri dan objek yang diimport.

Mod zum lebar

Contoh kami di atas memerlukan modul permulaan kami dilaksanakan terlebih dahulu, dan kemudian modul penguatan boleh dilaksanakan. Sudah tentu, kadangkala ini tidak semestinya diperlukan. Salah satu perkara terbaik yang boleh dilakukan oleh aplikasi Javascript untuk meningkatkan prestasi ialah melaksanakan skrip secara tidak segerak. Kami boleh mencipta modul berbilang bahagian yang fleksibel dan membolehkannya dimuatkan dalam sebarang susunan melalui mod pembesaran permisif. Setiap fail perlu disusun mengikut struktur berikut:

Salin kod Kod adalah seperti berikut:

var MODUL = (fungsi (saya) {
// tambah keupayaan...
Kembalikan saya;
}(MODUL || {}));

Dalam corak ini, ungkapan var diperlukan. Ambil perhatian bahawa jika MODULE belum dimulakan lagi, pernyataan import ini akan mencipta MODULE. Ini bermakna anda boleh menggunakan alat seperti LABjs untuk memuatkan semua fail modul anda secara selari tanpa menyekat.

Mod zum ketat

Mod zum lebar sangat bagus, tetapi ia turut mengehadkan modul anda. Paling penting, anda tidak boleh mengatasi sifat modul dengan selamat. Anda juga tidak boleh menggunakan sifat daripada fail lain semasa permulaan (tetapi anda boleh menggunakannya pada masa jalan). Mod amplifikasi ketat melibatkan urutan beban yang berurutan dan membenarkan sifat mengatasi. Berikut ialah contoh mudah (zum masuk pada modul asal kami):

Salin kod Kod adalah seperti berikut:

var MODUL = (fungsi (saya) {
var old_moduleMethod = my.moduleMethod;
My.moduleMethod = function () {
// kaedah menimpa, mempunyai akses kepada lama melalui old_moduleMethod...
};
Kembalikan saya;
}(MODUL));

Kami mengatasi pelaksanaan MODULE.moduleMethod dalam contoh di atas, tetapi boleh mengekalkan rujukan kepada kaedah asal apabila diperlukan.

Pengklonan dan Pewarisan

Salin kod Kod adalah seperti berikut:

var MODULE_TWO = (fungsi (lama) {
var my = {},
         kunci;
untuk (masukkan lama) {
Jika (old.hasOwnProperty(key)) {
                [kunci] saya = [kunci] lama;
}
}
var super_moduleMethod = old.moduleMethod;
My.moduleMethod = function () {
// mengatasi kaedah pada klon, akses kepada super melalui super_moduleMethod
};
Kembalikan saya;
}(MODUL));

Mod ini mungkin merupakan pilihan yang paling tidak fleksibel. Ia menjadikan kod itu kelihatan lebih bersih, tetapi ia melibatkan kos fleksibiliti. Seperti yang saya tulis di atas, jika harta ialah objek atau fungsi, ia tidak akan disalin, tetapi akan menjadi rujukan kedua kepada objek atau fungsi. Mengubah suai salah satu daripadanya akan mengubah suai yang lain pada masa yang sama (Nota Penterjemah: Kerana mereka pada asasnya sama!). Masalah pengklonan objek ini boleh diselesaikan melalui proses pengklonan rekursif, tetapi pengklonan fungsi mungkin tidak dapat menyelesaikannya. Mungkin eval boleh digunakan untuk menyelesaikannya. Oleh itu, saya menerangkan kaedah ini dalam artikel ini hanya untuk kesempurnaan.

Pembolehubah peribadi silang fail

Terdapat had utama dalam membahagikan modul kepada berbilang fail: setiap fail mengekalkan pembolehubah peribadinya sendiri dan tidak boleh mengakses pembolehubah peribadi fail lain. Tetapi masalah ini boleh diselesaikan. Berikut ialah contoh modul permisif yang mengekalkan pembolehubah peribadi merentas fail:

Salin kod Kod adalah seperti berikut:

var MODUL = (fungsi (saya) {
var _private = my._private = my._private {},
_seal = my._seal = my._seal ||. fungsi () {
                 padamkan saya._peribadi;
                 padamkan._seal saya;
                                padamkan saya._unseal;
},
_unseal = my._unseal = my._unseal fungsi () {
                 my._private = _private;
                 my._seal = _seal;
                   my._unseal = _unseal;
        };
// akses kekal kepada _private, _seal dan _unseal
Kembalikan saya;
}(MODUL || {}));

Semua fail boleh menetapkan atribut pada _pembolehubah peribadi masing-masing, dan difahamkan ia boleh diakses oleh fail lain. Setelah modul ini dimuatkan, aplikasi boleh memanggil MODULE._seal() untuk menghalang panggilan luaran ke _private dalaman. Jika modul perlu diskala semula, kaedah dalaman dalam mana-mana fail boleh memanggil _unseal() sebelum memuatkan fail baharu dan memanggil _seal() sekali lagi selepas fail baharu itu dilaksanakan. Saya menggunakan corak ini di tempat kerja hari ini, dan saya tidak pernah melihat pendekatan ini di tempat lain. Saya fikir ini adalah corak yang sangat berguna, dan ia berbaloi untuk menulis artikel mengenai corak itu sendiri.

Submodul

Mod lanjutan terakhir kami adalah yang paling mudah. Terdapat banyak contoh yang sangat baik untuk mencipta submodul. Ini sama seperti mencipta modul biasa:

Salin kod Kod adalah seperti berikut:

MODULE.sub = (fungsi () {
var my = {};
// ...
Kembalikan saya;
}());

Obwohl dies einfach erscheinen mag, denke ich, dass es hier erwähnenswert ist. Untermodule verfügen über alle erweiterten Vorteile allgemeiner Module, einschließlich Verstärkungsmodus und Privatisierungsmodus.

Fazit

Die meisten erweiterten Modi können miteinander kombiniert werden, um einen nützlicheren Modus zu erstellen. Wenn ich ein modulares Muster zum Entwerfen komplexer Anwendungen empfehlen würde, wäre es eine Kombination aus milden Erweiterungsmustern, privaten Variablen und Submodulen.

Ich habe nicht über Leistungsprobleme bei diesen Mustern nachgedacht, aber ich möchte dies lieber auf eine einfachere Art und Weise übersetzen: Wenn ein modulares Muster eine gute Leistung aufweist, minimiert es den Download erheblich diese Skriptdatei schneller. Die Verwendung des milden Verstärkungsmodus ermöglicht einfache, nicht blockierende parallele Downloads, was zu schnelleren Downloads führt. Die Initialisierungszeit ist möglicherweise etwas langsamer als bei anderen Methoden, aber der Kompromiss lohnt sich. Solange globale Variablen korrekt importiert werden, sollte es keine Auswirkungen auf die Laufzeitleistung geben, und es ist möglich, schnellere Ausführungen in Submodulen zu erzielen, indem Referenzketten mit privaten Variablen verkürzt werden.

Abschließend sehen Sie hier ein Beispiel für ein Submodul, das sich dynamisch in sein übergeordnetes Modul lädt (wobei das übergeordnete Modul erstellt wird, wenn es nicht existiert). Der Einfachheit halber habe ich die privaten Variablen entfernt. Natürlich ist das Hinzufügen privater Variablen auch sehr einfach. Dieses Programmiermodell ermöglicht das parallele Laden einer gesamten komplexen hierarchischen Codebasis über Submodule.

Code kopieren Der Code lautet wie folgt:

var UTIL = (function (parent, $) {
var my = parent.ajax = parent.ajax || {};
My.get = Funktion (URL, Parameter, Rückruf) {
// ok, ich schummele also ein bisschen :)
          return $.getJSON(url, params, callback);
};
// usw...
Übergeordnetes Element zurückgeben;
}(UTIL || {}, jQuery));

Dieser Artikel fasst die aktuellen Best Practices der „Javascript Modular Programming“ zusammen und erklärt, wie man sie in die Praxis umsetzt. Obwohl dies kein Einführungstutorial ist, können Sie es verstehen, solange Sie ein wenig Verständnis für die grundlegende Syntax von Javascript haben.