JS 模塊化編程 require.js 的用法

xumenger 發布于2019-08-20 18:34 / 2789人閱讀

摘要：使用，會在相關的加載后執行回調函數，這個過程是異步的，所以它不會阻塞頁面。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊。

什么是RequireJS?

RequireJS 是一個JavaScript模塊加載器。它非常適合在瀏覽器中使用, 但它也可以用在其他腳本環境, 就像 Rhino and Node. 使用RequireJS加載模塊化腳本將提高代碼的加載速度和質量。

為什么用RequireJS?

異步“加載”。我們知道，通常網站都會把script腳本的放在html的最后，這樣就可以避免瀏覽器執行js帶來的頁面阻塞。使用RequireJS，會在相關的js加載后執行回調函數，這個過程是異步的，所以它不會阻塞頁面。

按需加載。通過RequireJS，你可以在需要加載js邏輯的時候再加載對應的js模塊，這樣避免了在初始化網頁的時候發生大量的請求和數據傳輸，或許對于一些人來說，某些模塊可能他根本就不需要，那就顯得沒有必要。

更加方便的模塊依賴管理。相信你曾經一定遇到過因為script標簽順序問題而導致依賴關系發生錯誤，這個函數未定義，那個變量undefine之類的。通過RequireJS的機制，你能確保在所有的依賴模塊都加載以后再執行相關的文件，所以可以起到依賴管理的作用。

更加高效的版本管理。想一想，如果你還是用的script腳本引入的方式來引入一個jQuery2.x的文件，然后你有100個頁面都是這么引用的，那當你想換成jQuery3.x，那你就不得不去改這100個頁面。但是如果你的requireJS有在config中做jQuery的path映射，那你只需要改一處地方即可。

當然還有一些諸如cdn加載不到js文件，可以請求本地文件等其它的優點，這里就不一一列舉了。

require.js的加載

使用require.js的第一步，是先去官方網站下載最新版本。
下載后，假定把它放在js子目錄下面，就可以加載了。

加載require.js以后，下一步就要加載我們自己的代碼了。假定我們自己的代碼文件是main.js，也放在js目錄下面。那么，只需要寫成下面這樣就行了：

data-main屬性的作用是，指定網頁程序的主模塊。在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載。由于require.js默認的文件后綴名是js，所以可以把main.js簡寫成main。

主模塊的寫法

上一節的main.js，我把它稱為"主模塊"，意思是整個網頁的入口代碼。它有點像C語言的main()函數，所有代碼都從這兒開始運行。
下面就來看，怎么寫main.js。

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

require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊，上例就是["moduleA", "moduleB", "moduleC"]，即主模塊依賴這三個模塊；第二個參數是一個回調函數，當前面指定的模塊都加載成功后，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊。
require()異步加載moduleA，moduleB和moduleC，瀏覽器不會失去響應；它指定的回調函數，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題。
下面，我們看一個實際的例子。
假定主模塊依賴jquery、underscore和backbone這三個模塊，main.js就可以這樣寫：

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

模塊的加載

上一節最后的示例中，主模塊的依賴模塊是["jquery", "underscore", "backbone"]。默認情況下，require.js假定這三個模塊與main.js在同一個目錄，文件名分別為jquery.js，underscore.js和backbone.js，然后自動加載。
使用require.config()方法，我們可以對模塊的加載行為進行自定義。require.config()就寫在主模塊（main.js）的頭部。參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。

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

上面的代碼給出了三個模塊的文件名，路徑默認與main.js在同一個目錄（js子目錄）。如果這些模塊在其他目錄，比如js/lib目錄，則有兩種寫法。一種是逐一指定路徑。

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

另一種則是直接改變基目錄（baseUrl）。

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

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
　　　　};
　　});

加載方法如下：

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

如果這個模塊還依賴其他模塊，那么define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。

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

當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"
　　　　　　}
　　　　}
　　});

require.config()接受一個配置對象，這個對象除了有前面說過的paths屬性之外，還有一個shim屬性，專門用來配置不兼容的模塊。具體來說，每個模塊要定義（1）exports值（輸出的變量名），表明這個模塊外部調用時的名稱；（2）deps數組，表明該模塊的依賴性。
比如，jQuery的插件可以這樣定義：

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

作者：wuqke
鏈接：http://www.jianshu.com/p/b8a6...
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

云服務器 GPU云服務器 require.js js數組in的用法 js中split的用法 linux模塊化編程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84714.html

require.js構建優化

摘要：未構建之前，全部分開加載。的優化，得再看下的示例，然后再寫篇筆記記錄下來。想摸透javascript模塊化編程是怎么一回事，在seajs和requirejs之間兜兜轉轉，看了許多相關資料和文章，算是大致理清它們的異同，撇開requirejs加載方式的另類（其實目前我暫時還沒去感受），于寫法，比較喜歡requirejs的寫法，這個比較主觀，這也得益于阮一峰大大那篇Javascript模...

yacheng 2019-08-21 12:22 評論0 收藏0
JS進階篇--RequireJS模塊化編程詳解

摘要：所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。 1.模塊的寫法模塊化編程一般都有這么幾個過渡過程，如下描述。原始方法 function m1(){ 　　//... } function m2(){ 　　//... } 上面的函數m1()和m2()，組成一個模塊。使用的時候，直接調用就行了。這種做法的缺點很明顯：污染了全局變量，無法保證不與...

妤鋒シ 2019-08-20 16:37 評論0 收藏0
require 和 import 詳解

摘要：第二行，在第一行之后運行，因此必須等加載完成。類似于，但是是依賴就近，延遲執行，是依賴前置，提前執行。是一個文件名重命名導入成員名稱標識符從已經存在的模塊腳本文件等導入返回一個對象。前言 JS模塊化編程是前端小伙伴們必不可少的知識，下面妹子將于自認為比較清晰的方式列舉出來。 1 require 特點： 1.運行時加載 2.拷貝到本頁面 3.全部引入 1.1 CommonJS No...

wanghui 2019-08-23 14:00 評論0 收藏0
【JS基礎】一文看懂前端模塊化規范

摘要：參考資料前端模塊化詳解完整版入門近一萬字的語法知識點補充徹底搞清楚中的和和詳解前言前端的模塊化之路經歷了漫長的過程，想詳細了解的小伙伴可以看浪里行舟大神寫的前端模塊化詳解(完整版)，這里根據幾位大佬們寫的文章，將模塊化規范部分做了匯總和整理，希望讀完的小伙伴能有些收獲，也希望覺得有用的小伙伴可以點個贊，筆芯。什么是模塊將一個復雜的程序依據一定的規則(規范)封裝成幾個塊(文件)...

HelKyle 2019-08-23 17:09 評論0 收藏0
富婆給你說require、import和export

摘要：所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。目前，主要有兩個庫實現了規范和。這些導出對象用名稱進行區分，稱之為命名式導出。簡單粗暴，富婆給你說，其實我也沒太搞明白，最近看了一篇文章我才理清了一點點思路，最近整日沉迷于肥宅快樂水，技術都跟不上了，來篇文章，提神醒腦，朝著我的富婆夢更近一步，早日走上富婆路，包養我家大狼狗！！！為什么有模塊概念...

cod7ce 2019-08-02 16:16 評論0 收藏0