Pengenalan kepada RequireJS - Pelaksanaan kemahiran example_javascript pertama

Mengapa belajar RequireJS?

Orang baru seperti saya akan menyebut AMD, pengaturcaraan modular JS, tak segerak... dsb. yang disebut dalam banyak artikel

RequireJS membolehkan anda menulis JavaScript secara berbeza daripada biasa. Anda tidak lagi akan menggunakan teg skrip untuk memperkenalkan fail JS dalam HTML dan mengurus kebergantungan melalui susunan teg skrip.

RequireJS ialah fail Javascript dan rangka kerja modul yang boleh membantu kami mengurus kod js (pemahaman saya).

Dengan kajian yang mendalam, kami akan terpaksa menerima satu siri kata nama: data-main, require, define, baseUrl, paths, shims, deps. . . Tunggu;

Ringkasnya, banyak artikel yang menjual istilah dan konsep yang kami tidak faham.

Pastikan ia mudah, kini kita perlu membuat keperluan mudah, gunakan RequireJS untuk menguruskan kod js kami, dan boleh menggunakan jquery!

1. Bina projek web dan jalankannya!

Fail di dalam adalah seperti yang ditunjukkan di bawah:

Terdapat banyak perangkap di sini, jadi saya meletakkan semua fail dalam direktori akar fail untuk menghapuskan masalah kecil ini terlebih dahulu!

Antaranya, jquery.js dan require.js perlu dimuat turun dari tapak web Sila Baidu.

2. Tambahkan teg skrip

dalam index.jsp

Anda boleh menambah teg dalam 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846beeRequireJS ujian pemuatan tak segerak94b3e26ee717c64999d7867364b1b4a3

3. Tambah fail utama.js

require.config({
　　paths: {
　　  jquery: 'jquery-2.1.1'
　　}
});
require(['jquery'], function($) {
　　alert($().jquery);
});

4. Lari~

Anda akan melihat kotak pop timbul dan halaman telah dipaparkan menunjukkan "RequireJS Asynchronous Loading Test".

Ringkasan:

a. RequireJS telah dicipta oleh James Burke, yang juga merupakan pengasas spesifikasi AMD. Ia adalah perpustakaan alat untuk pengurusan modul sisi klien.

Daripada contoh ini:

1. Apabila amaran muncul, halaman juga dipaparkan pada masa yang sama, yang mencerminkan fungsi pemuatan tak segerak di bahagian kepala akan menyebabkan halaman hanya boleh dipaparkan selepas mengklik OK.

2. Halaman hanya perlu memperkenalkan require.js, dan tidak perlu memperkenalkan kod js lain yang rumit diserahkan kepada rangka kerja RequireJS!

b. Sebelum belajar, fahami dahulu spesifikasi AMD AMD mentakrifkan modul melalui define: define("id",[deps1,deps2,...],callback);

Mengapakah contoh ini boleh dijalankan tanpa definisi? Kerana jquery menyediakan sokongan untuk AMD. Objek laluan digunakan untuk memperkenalkan pelbagai modul.

Bolehkah kod js biasa diuruskan oleh RequireJS? Ya, gunakan shims untuk memuatkan sumber ini!

c. Ringkaskan idea pengekodan masa hadapan:

                  Fungsi dan pembolehubah dalam setiap modul.

d. Laksanakannya sendiri: Tambahkan butang pada halaman; tambahkan acara mendengar klik juqery ke main.js dan uji sama ada pemantauan berjaya!

e. Isu yang tinggal: masalah laluan, ia pasti tidak boleh berada dalam direktori akar, tetapi ini bukan masalah!

Artikel ini ialah huraian keseluruhan contoh pertama untuk bermula dengan RequireJS. Saya harap ia akan membantu semua orang.