Penjelasan terperinci tentang penggunaan kemahiran require.js

1. Mengapa menggunakan require.js?

Pada hari-hari terawal, semua kod Javascript ditulis dalam satu fail, dan ia sudah cukup untuk memuatkan satu fail ini. Kemudian, terdapat lebih banyak kod, dan satu fail tidak lagi mencukupi. Ia perlu dibahagikan kepada berbilang fail dan dimuatkan mengikut urutan. Saya percaya ramai orang telah melihat kod halaman web di bawah.

　<script src="1.js"></script>
　　<script src="2.js"></script>
　　<script src="3.js"></script>
　　<script src="4.js"></script>
　　<script src="5.js"></script>
　　<script src="6.js"></script>

Salin selepas log masuk

Kod ini memuatkan berbilang fail js mengikut turutan.

Cara penulisan ini mempunyai kelemahan yang besar. Pertama sekali, apabila memuatkan, penyemak imbas akan berhenti memaparkan halaman web Semakin banyak fail dimuatkan, semakin lama halaman web akan kehilangan respons Kedua, disebabkan kebergantungan antara fail js, urutan pemuatan mesti dijamin dengan ketat (seperti seperti contoh di atas) 1.js harus berada di hadapan 2.js), dan modul dengan kebergantungan terbesar mesti dimuatkan terakhir Apabila kebergantungan kompleks, penulisan dan penyelenggaraan kod akan menjadi sukar.

require.js dilahirkan untuk menyelesaikan dua masalah ini:

(1) Laksanakan pemuatan tak segerak bagi fail js untuk mengelakkan halaman web kehilangan respons;

(2) Urus kebergantungan antara modul untuk memudahkan penulisan dan penyelenggaraan kod.

2. Memuatkan require.js

Langkah pertama untuk menggunakan require.js ialah memuat turun versi terkini daripada tapak web rasmi.

Selepas memuat turun, diandaikan bahawa ia diletakkan di bawah subdirektori js dan ia boleh dimuatkan.

<script src="js/require.js"></script>

Salin selepas log masuk

Sesetengah orang mungkin berpendapat bahawa memuatkan fail ini juga boleh menyebabkan halaman web menjadi tidak responsif. Terdapat dua penyelesaian Satu ialah memuatkannya di bahagian bawah halaman web, dan satu lagi ialah menulisnya seperti ini:

<script src="js/require.js" defer async="true" ></script>

Salin selepas log masuk

Atribut async menunjukkan bahawa fail ini perlu dimuatkan secara tidak segerak untuk mengelakkan halaman web menjadi tidak bertindak balas. IE tidak menyokong atribut ini dan hanya menyokong defer, jadi defer juga ditulis.

Selepas memuat require.js, langkah seterusnya ialah memuatkan kod kami sendiri. Andaikan bahawa fail kod kita sendiri ialah main.js dan juga diletakkan di bawah direktori js. Kemudian, tulis sahaja seperti ini:

　<script src="js/require.js" data-main="js/main"></script>

Salin selepas log masuk

Atribut utama data digunakan untuk menentukan modul utama program web. Dalam contoh di atas, ia adalah main.js di bawah direktori js Fail ini akan dimuatkan oleh require.js dahulu. Memandangkan sambungan fail lalai require.js ialah js, main.js boleh disingkatkan kepada main.

3. Cara menulis modul utama

Main.js dalam bahagian sebelumnya, saya memanggilnya sebagai "modul utama", yang bermaksud kod kemasukan keseluruhan halaman web. Ia sedikit seperti fungsi main() dalam bahasa C, semua kod mula berjalan dari sini.

Mari lihat cara menulis main.js.

Jika kod kami tidak bergantung pada mana-mana modul lain, kami boleh menulis kod javascript terus.

// main.js

alert("Memuatkan berjaya!");

Tetapi dalam kes ini, tidak perlu menggunakan require.js. Situasi yang sangat biasa ialah modul utama bergantung pada modul lain, dalam hal ini fungsi require() yang ditakrifkan oleh spesifikasi AMD mesti digunakan.

// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　});

Salin selepas log masuk

Fungsi require() menerima dua parameter. Parameter pertama ialah tatasusunan, menunjukkan modul yang bergantung kepada Contoh di atas ialah ['moduleA', 'moduleB', 'moduleC'], iaitu, modul utama bergantung pada tiga modul ini Pada masa ini Ia akan dipanggil selepas semua modul yang dinyatakan di atas berjaya dimuatkan. Modul yang dimuatkan akan dihantar ke dalam fungsi ini sebagai parameter, jadi modul ini boleh digunakan di dalam fungsi panggil balik.

memerlukan() memuatkan modulA, modulB dan modulC secara tidak segerak, dan pelayar tidak akan kehilangan respons;

Di bawah, mari lihat contoh praktikal.

Dengan mengandaikan bahawa modul utama bergantung pada tiga modul jquery, garis bawah dan tulang belakang, main.js boleh ditulis seperti ini:

　　require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　　　// some code here
　　});

Salin selepas log masuk

require.js akan mula-mula memuatkan jQuery, garis bawah dan tulang belakang, kemudian menjalankan fungsi panggil balik. Kod modul utama ditulis dalam fungsi panggil balik.

4. Pemuatan modul

Dalam contoh terakhir bahagian sebelumnya, modul bergantung bagi modul utama ialah ['jquery', 'underscore', 'backbone']. Secara lalai, require.js menganggap bahawa ketiga-tiga modul ini berada dalam direktori yang sama dengan main.js, dan nama fail masing-masing adalah jquery.js, underscore.js dan backbone.js, dan kemudian memuatkannya secara automatik.

Menggunakan kaedah require.config(), kami boleh menyesuaikan gelagat pemuatan modul. require.config() ditulis di kepala modul utama (main.js). Parameter ialah objek, dan atribut laluan bagi objek ini menentukan laluan pemuatan setiap modul.

require.config({
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

Salin selepas log masuk

上面的代码给出了三个模块的文件名，路径默认与main.js在同一个目录（js子目录）。如果这些模块在其他目录，比如js/lib目录，则有两种写法。一种是逐一指定路径。

require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min",
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"
　　　　}
　　});

Salin selepas log masuk

另一种则是直接改变基目录（baseUrl）。

require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

Salin selepas log masuk

如果某个模块在另一台主机上，也可以直接指定它的网址，比如：

require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});

Salin selepas log masuk

require.js要求，每个模块是一个单独的js文件。这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。因此，require.js提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。

五、AMD模块的写法

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。

具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

Salin selepas log masuk

加载方法如下：

　　// main.js
　　require(['math'], function (math){
　　　　alert(math.add(1,1));
　　});

Salin selepas log masuk

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

Salin selepas log masuk

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

六、加载非规范的模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？回答是可以的。这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

require.config({
　　　　shim: {
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

Salin selepas log masuk

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

比如，jQuery的插件可以这样定义：

　shim: {
　　　　'jquery.scroll': {
　　　　　　deps: ['jquery'],
　　　　　　exports: 'jQuery.fn.scroll'
　　　　}
　　}

Salin selepas log masuk

七、require.js插件

require.js还提供一系列插件，实现一些特定的功能。

domready插件，可以让回调函数在页面DOM结构加载完成后再运行。

　shim: {
　　　　'jquery.scroll': {
　　　　　　deps: ['jquery'],
　　　　　　exports: 'jQuery.fn.scroll'
　　　　}
　　}

Salin selepas log masuk

text和image插件，则是允许require.js加载文本和图片文件。

define([
　　　　'text!review.txt',
　　　　'image!cat.jpg'
　　　　],
　　　　function(review,cat){
　　　　　　console.log(review);
　　　　　　document.body.appendChild(cat);
　　　　}
　　);

Salin selepas log masuk

类似的插件还有json和mdown，用于加载json文件和markdown文件。

以上就是本文的全部所述，希望本文分享对大家有所帮助。