Sekarang, membutuhkan.js adalah cara favorit saya untuk memprogram JavaScript. Itu membuat pemecah kode menjadi potongan-potongan dan mudah dikelola. Membutuhkan.js pengoptimal dapat membantu kami mendistribusikan aplikasi yang lebih besar ke beberapa aplikasi yang lebih kecil, menghubungkannya melalui dependensi, dan akhirnya menggabungkannya selama kompilasi dan pengemasan. Alasan -alasan ini mendorong kami untuk menggunakan kebutuhan.js.
Jadi, mari kita lihat apa yang dibutuhkan fitur -fitur luar biasa.
Kompatibel dengan CommonJS
AMD (spesifikasi definisi modul asinkron) muncul dari kelompok kerja CommonJS. CommonJS bertujuan untuk menciptakan ekosistem JavaScript. Bagian penting dari CommonJS adalah transportasi/c, pendahulu AMD, dan membutuhkan.js adalah implementasi spesifikasi ini.
Perbedaan sintaks antara modul CommonJS dan modul AMD terutama karena kebutuhan AMD untuk mendukung fitur asinkron browser. Modul CommonJS perlu disinkronkan, misalnya:
Salinan kode adalah sebagai berikut:
var somemodule = membutuhkan ("somemodule");
var OtherModule = membutuhkan ("Module lain");
exports.asplode = function () {
somemodule.dotehawesome ();
OtherModule.domoarawesome ();
};
Modul AMD memuat modul secara asinkron, sehingga definisi modul memerlukan array sebagai parameter pertama, dan fungsi panggilan balik setelah modul dimuat dilewatkan sebagai parameter kedua.
Salinan kode adalah sebagai berikut:
define (["somemodule"], function (somemodule) {
kembali {
asplode: function () {
somemodule.dotehawesome ();
// Ini akan dieksekusi secara tidak sinkron
membutuhkan (["OtherModule"], function (OtherModule) {
OtherModule.domoarawesome ();
});
}
};
});
Namun, AMD juga kompatibel dengan sintaks umum di kebutuhan.js. Dengan membungkus modul CommonJS melalui fungsi Define AMD, Anda juga dapat memiliki modul CommonJS di AMD, misalnya:
Salinan kode adalah sebagai berikut:
Tentukan (fungsi (membutuhkan, ekspor, modul)
var somemodule = membutuhkan ("somemodule");
var OtherModule = membutuhkan ("Module lain");
somemodule.dotehawesome ();
OtherModule.domoarawesome ();
exports.asplode = function () {
somemodule.dotehawesome ();
OtherModule.domoarawesome ();
};
});
Faktanya, membutuhkan.js menafsirkan konten modul dari fungsi panggilan balik melalui fungsi .toString, menemukan ketergantungan yang benar, dan mengubahnya menjadi modul AMD normal. Perlu dicatat bahwa jika Anda menulis modul dengan cara ini, mungkin tidak sesuai dengan AMD Loader lainnya karena ini melanggar spesifikasi AMD, tetapi dapat memahami bagaimana format ini ditulis dengan baik.
Apa yang terjadi di sini, membutuhkan.js sebenarnya berfungsi. Fungsi callback tostring mem -parsing konten modul dan menemukan ketergantungan yang benar, sama seperti itu jika itu adalah modul AMD yang normal. Penting untuk dicatat bahwa jika Anda memilih untuk menulis modul seperti ini, mereka kemungkinan besar tidak akan kompatibel dengan pemuat modul AMD lainnya karena ini melanggar spesifikasi AMD, tetapi merupakan ide yang baik untuk memahami format ini ada!
CDN kembali
Persyaratan tersembunyi lainnya.js Treasure adalah bahwa ia mendukung Rollback memuat pustaka yang sesuai lokal ketika CDN salah memuat secara tidak benar. Kita dapat mencapai ini melalui kebutuhan.config:
Salinan kode adalah sebagai berikut:
needjs.config ({
Jalur: {
jQuery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jQuery'
]
}
});
Tidak ada dependensi? Objek literal? Tidak masalah!
Saat Anda menulis modul yang tidak memiliki dependensi dan hanya mengembalikan objek yang berisi beberapa fungsi fungsional, kami dapat menggunakan sintaks sederhana:
Salinan kode adalah sebagai berikut:
mendefinisikan({
ForCechoke: function () {
},
Forcelightting: function () {
},
forcerun: function () {
}
});
Sederhana dan berguna jika modul hanyalah kumpulan fungsi, atau hanya satu paket.
Ketergantungan melingkar
Dalam beberapa kasus, kita mungkin memerlukan fungsi dalam modul modul dan modulea untuk mengandalkan beberapa aplikasi. Ini adalah ketergantungan melingkar.
Salinan kode adalah sebagai berikut:
// js/app/modulea.js
Tentukan (["membutuhkan", "aplikasi/aplikasi"],
fungsi (membutuhkan, aplikasi) {
kembali {
foo: function (judul) {
var app = membutuhkan ("app/app");
return app.something ();
}
}
}
);
Dapatkan Alamat Modul
Jika Anda perlu mendapatkan alamat modul, Anda bisa melakukan ini ...
Salinan kode adalah sebagai berikut:
var path = membutuhkan.tourl ("./ style.css");
Baseurl
Biasanya, saat melakukan tes unit, kode sumber Anda dapat ditempatkan dalam folder yang mirip dengan SRC, dan pada saat yang sama, tes Anda dapat ditempatkan dalam folder yang mirip dengan tes. Ini mungkin sulit untuk mendapatkan konfigurasi tes yang benar.
Misalnya, kami memiliki file index.html di folder tes dan perlu memuat tes/spec/*. Js secara lokal. Dan dengan asumsi bahwa semua kode sumber ada di SRC/JS/*. JS dan ada Main.js di folder itu.
Dalam index.html, data-data tidak diatur saat membutuhkan.js dimuat.
Salinan kode adalah sebagai berikut:
<Script src = "src/js/vendor/need.js"> </script>
<script>
membutuhkan (["../src/js/main.js"], function () {
membutuhkan.config ({
baseurl: "../src/js/"
});
memerlukan([
"./spec/test.spec.js",
"./spec/moar.spec.js"
], fungsi() {
// Mulai kerangka tes Anda
});
});
</script>
Anda dapat menemukan bahwa Main.js dimuat. Namun, karena data-data tidak ditetapkan, kita perlu merumuskan baseurl seperti yang kita inginkan. Saat menggunakan data-data, BaseUrl akan secara otomatis diatur sesuai dengan file yang ditetapkan.
Di sini Anda dapat melihat Main.js dimuat. Namun, karena tidak memuat tag skrip utama data, maka Anda harus menentukan basis. Ketika data terutama digunakan untuk BaseUrl, disimpulkan dari lokasi di file utama. Dengan menyesuaikan BaseUrl, kami dapat dengan mudah menyimpan kode uji dan kode aplikasi secara terpisah.
Jsonp
Kami dapat menangani terminal JSONP seperti ini:
Salinan kode adalah sebagai berikut:
memerlukan( [
"http://someapi.com/foo?callback=define"
], fungsi (data) {
console.log (data);
});
Untuk perpustakaan non-AMD, gunakan shim untuk memecahkan
Di bawah banyak permintaan, kita perlu menggunakan perpustakaan non-AMD. Misalnya, tulang punggung dan garis bawah tidak beradaptasi dengan spesifikasi AMD. Dan jQuery sebenarnya hanya mendefinisikan dirinya sebagai variabel global yang disebut jQuery, jadi Anda tidak perlu melakukan apa pun dengan jQuery.
Untungnya, kita dapat menggunakan konfigurasi shim untuk menyelesaikan masalah ini.
Salinan kode adalah sebagai berikut:
membutuhkan.config ({
Jalur: {
"Backbone": "Vendor/Backbone",
"Underscore": "Vendor/Underscore"
},
shim: {
"Backbone": {
DEPS: ["Underscore"],
Ekspor: "Backbone"
},
"Underscore": {
Ekspor: "_"
}
}
});