Artikel sebelumnya: Kami memperkenalkan Nequesjs dengan cara yang sangat sederhana untuk alat modular JS. Artikel ini akan memberi tahu Anda beberapa pengetahuan dasar di kebutuhan, termasuk cara menggunakan API.
API Dasar
Persyaratan akan menentukan tiga variabel: Tentukan, membutuhkan, persyaratan, di mana membutuhkan === Persyaratan, umumnya membutuhkan lebih pendek menggunakan kebutuhan
Tentukan dari namanya, Anda dapat melihat bahwa API ini digunakan untuk menentukan modul
Membutuhkan beban modul dependen dan menjalankan fungsi panggilan balik yang dimuat
A.JS di artikel sebelumnya:
define (function () {function fun1 () {alert ("it works");} fun1 ();})Modul didefinisikan melalui fungsi define, dan kemudian digunakan di halaman:
membutuhkan (["js/a"]);
Untuk memuat modul (perhatikan bahwa ketergantungan yang diperlukan adalah array. Bahkan jika hanya ada satu ketergantungan, Anda harus menggunakan array untuk mendefinisikannya). Parameter kedua dari API membutuhkan adalah panggilan balik, suatu fungsi, yang digunakan untuk memproses logika setelah pemuatan, seperti:
memerlukan (["js/a"], function () {alert ("Load finish");})Muat file
Dalam contoh sebelumnya, modul pemuatan semua JS lokal, tetapi dalam kebanyakan kasus, JS yang perlu dimuat halaman web dapat berasal dari server lokal, situs web lain atau CDN, jadi dengan cara ini tidak dapat dimuat. Mari kita ambil memuat perpustakaan jQuery sebagai contoh:
membutuhkan.config ({paths: {"jQuery": ["http://libs.baidu.com/jQuery/2.0.3/jQuery"]}}) memerlukan (["jQuery", "js/a"], function ($) {$ (function () {warner ("load finish");Ini melibatkan kebutuhan.config. membutuhkan.config digunakan untuk mengonfigurasi lokasi pemuatan modul. Sederhananya, itu adalah memberi modul nama yang lebih pendek dan lebih diingat. Misalnya, tandai alamat perpustakaan jQuery Baidu sebagai jQuery, sehingga Anda hanya perlu menulis ["jQuery"] ketika perlu memuat JS. Kami juga dapat mengkonfigurasi JS lokal seperti ini:
require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"], "a" : "js/a" }})require(["jquery","a"],function($){ $(function(){ alert("load finished"); })})Konfigurasi jalur akan membuat nama modul kami lebih halus. Jalur juga memiliki fungsi penting, yaitu untuk mengkonfigurasi beberapa jalur. Jika pustaka CDN jarak jauh tidak berhasil dimuat, perpustakaan lokal dapat dimuat, seperti:
membutuhkan.config ({paths: {"jQuery": ["http://libs.baidu.com/jQuery/2.0.3/jQuery", "js/jQuery"], "a": "js/a"} {("jQuery", "a"] ($) {("function (" function ("function) {" function ") (function) (function) (function) (function) (function) (function) (function) (function) (function) {" fule ("function"Setelah konfigurasi ini, ketika jQuery Baidu tidak berhasil, jQuery di direktori JS lokal akan dimuat
Saat menggunakan Persetujuan, Anda tidak perlu menulis akhiran .JS saat memuat modul, dan tentu saja Anda tidak dapat menulis akhiran.
Dalam fungsi callback dalam contoh di atas, ada parameter $. Ini adalah variabel output dari modul jQuery ketergantungan. Jika Anda mengandalkan beberapa modul, Anda dapat menulis beberapa parameter secara bergantian untuk menggunakan:
membutuhkan (["jQuery", "underscore"], function ($, _) {$ (function () {_.each ([1,2,3], waspada);})})Jika suatu modul tidak mengeluarkan nilai variabel, tidak ada siapa pun. Jadi cobalah untuk menulis modul output di depan untuk mencegah kesalahpahaman yang disebabkan oleh kesalahpahaman karena kesalahpahaman karena kesalahpahaman karena kesalahpahaman ketika posisinya bingung.
Konfigurasi Global
Konfigurasi Persyaratan.config diulang dalam contoh di atas. Jika konfigurasi ditambahkan ke setiap halaman, itu pasti akan tampak sangat tidak senonoh. Persyaratan menyediakan fungsi yang disebut "Data Utama". Pertama -tama kami membuat main.js:
membutuhkan.config ({paths: {"jQuery": ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jQuery"], "a": "js/a"}}))Kemudian gunakan metode berikut pada halaman untuk menggunakan kebutuhan:
<skrip data-main = "js/main" src = "js/requip.js"> </script>
Jelaskan bahwa tag skrip dari pemuatan skrip Persyaratan Menambahkan atribut data-data. JS yang ditentukan dalam atribut ini akan diproses setelah memuat reuqire.js. Setelah kami menambahkan konfigurasi yang diperlukan. Konfigurasi ke data-data, kami dapat membuat setiap halaman menggunakan konfigurasi ini, dan kemudian halaman dapat langsung menggunakan perlu memuat semua nama modul pendek.
data-data juga memiliki fungsi penting. Ketika tag skrip menentukan atribut data-data, membutuhkan default untuk memilih JS yang ditentukan oleh data-data sebagai jalur root. Apa artinya? Misalnya, setelah pengaturan data-main = "js/main" di atas, setelah kami menggunakan membutuhkan (['jQuery']) (tidak ada jalur jQuery yang dikonfigurasi), membutuhkan secara otomatis memuat file JS/JQuery.js alih-alih jQuery.js, yang setara dengan konfigurasi default:
membutuhkan.config ({baseUrl: "js"})Modul pihak ketiga
Modul yang dimuat secara umum perlu dipatuhi dengan spesifikasi AMD, yaitu, Gunakan Tentukan untuk mendeklarasikan modul, tetapi dalam beberapa kasus, Anda perlu memuat spesifikasi non-AMD JS. Saat ini, Anda perlu menggunakan fungsi lain: shim. Shim sulit untuk dipahami. Shim diterjemahkan secara langsung sebagai "pad", yang sebenarnya memiliki makna ini. Saat ini, saya terutama menggunakannya di dua tempat
1. Output modul non-AMD, "PAD" Modul AMD non-standar ke dalam modul yang tersedia. Misalnya: Dalam versi lama jQuery, spesifikasi AMD tidak diwarisi, jadi kami tidak dapat secara langsung membutuhkan ["jQuery"]. Saat ini, Shim dibutuhkan. Misalnya, jika saya menggunakan perpustakaan kelas bawah, tetapi tidak menerapkan spesifikasi AMD, maka kami dapat mengonfigurasinya seperti ini.
membutuhkan.config ({shim: {"underscore": {ekspor: "_";}}})Setelah konfigurasi ini, kami dapat merujuk ke modul underscore di modul lain:
membutuhkan (["underscore"], function (_) {_.each ([1,2,3], peringatan);})Untuk modul non-AMD dalam bentuk plug-in, kami sering menggunakan jQuery plug-in, dan plug-in ini pada dasarnya tidak mematuhi spesifikasi AMD, seperti jQuery.form plug-in. Saat ini, Anda perlu "pad" plug-in form ke jQuery:
membutuhkan.config ({shim: {"underscore": {ekspor: "_";}, "jQuery.Form": {deps: ["jQuery"]}}}))Itu juga dapat disingkat sebagai:
membutuhkan.config ({shim: {"underscore": {ekspor: "_";}, "jQuery.Form": ["jQuery"]}})Setelah konfigurasi ini, kami dapat menggunakan jQuery setelah memuat plugin
membutuhkan.config (["jQuery", "jQuery.Form"], function ($) {$ (function () {$ ("#Form"). Ajaxsubmit ({...});})})Oke, ada begitu banyak konfigurasi dasar dari kebutuhan, dan beberapa fungsi yang diperluas akan disebutkan di masa depan. Jangan lewatkan mereka!