一：早就聽說過模組化工具require.js的大名，之前也是由於自己的網頁上引用了諸多的js，而且一堆的js引用放在那裡，乙個依賴另乙個，導致我不敢隨意改動各個js的位置，而且有時頁面內容一多起來，js載入也使得本來的html內容出現響應延遲。因此，在網上查過後，便得知解決方法是使用amd非同步模組-require.js。
二：了解過require.js後，我們一般都知道它具有如下優點：
1，防止js載入阻塞頁面渲染，實現js檔案的非同步載入，避免網頁失去響應；
2，使用程式呼叫的方式載入js，防止出現如下醜陋不堪的一串引用，同時管理模組之間的依賴性，便於編寫與維護；
三：先新建乙個目錄吧hl-require/
│ filelist.txt
│ index.html
│ └─js
│ jquery.js
│ main.js
│ require.js
│ │ sub.js
│
└─lib
backbone.js
canvas.js
jquery.js
有人可能會想到，載入這個檔案，也可能造成網頁失去響應。解決辦法有兩個，乙個是把它放在網頁底部載入，另乙個是寫成下面這樣： async屬性表明這個檔案需要非同步載入，避免網頁失去響應。ie不支援這個屬性，只支援defer，所以把defer也寫上。2，載入完require.js後，下一步就是載入我們自己的**了。假定我們自己的**檔案是main.js，也在js目錄下。
data-main屬性的作用是，指定網頁程式的主模組。在上例中，就是js目錄下面的main.js，這個檔案會第乙個被require.js載入。由於require.js預設的檔案字尾名是js，所以可以把main.js簡寫成main。3，主模組：上面的main.js，可以稱之為「主模組」意思是整個網頁的入口**，所有**從這裡開始執行。
那麼，我們如何寫main.js。（注意，這裡將會有amd的規範了。）
如果，我們的main不依賴任何其他模組，那麼可以直接寫入js**。
console.log('hello require!');
但是，如果僅僅這樣來使用，我們就沒必要使用require.js了。真正常見的情況是，主模組依賴於其他模組，這時就要使用amd規範定義的的require()函式。
格式為：
// main.jsrequire(['modulea', 'moduleb', 'modulec'], function (modulea, moduleb, modulec));
實際的例子：require(['jquery', 'underscore', 'backbone'], function ($, _, backbone));require.js會先載入jquery、underscore和backbone，然後再執行**函式。主模組的**就寫在**函式中。
*****但是要注意的是，第乙個引數以陣列的寫法，是預設情況下，裡面的各個模組要和main模組在同乙個目錄，如果不是在同乙個目錄，可以用paths設定一下*****
4，模組的載入：
上一節最後的示例中，主模組的依賴模組是['jquery', 'underscore', 'backbone']。預設情況下，require.js假定這三個模組與main.js在同乙個目錄，檔名分別為 jquery.js，underscore.js和backbone.js，然後自動載入。
使用require.config()方法，我們可以對模組的載入行為進行自定義。require.config()就寫在主模組（main.js）的頭部。引數就是乙個物件，這個物件的paths屬性指定各個模組的載入路徑。
這個物件的paths屬性指定各個模組的載入路徑。
上面的**給出了三個模組的檔名，路徑預設與main.js在同乙個目錄（js子目錄）。如果這些模組在其他目錄，比如js/lib目錄，則有兩種寫法。一種是逐一指定路徑。
require.config(另一種則是直接改變基目錄（baseurl）。});
require.config(});
require.config(require.js要求，每個模組是乙個單獨的js檔案。這樣的話，如果載入多個模組，就會發出多次http請求，會影響網頁的載入速度。因此，require.js提供了乙個優化工具，當模組部署完畢以後，可以用這個工具將多個模組合併在乙個檔案中，減少http請求數。});
上面尤其要注意新增baseurl後的寫法，baseurl直接更改的是基目錄，從根目錄開始。js/lib
而如果沒有使用baseurl，則各個模組的位址是相對與主模組的位址的。
然後就開始載入呼叫
其中依賴的乙個backbone模組是
最後我們在瀏覽器中看下index.html的效果
alert()的同時網頁內容能顯示，說明是非同步載入。
5，amd模組的寫法：
說完主模組 'main.js'，接著我們來說說依賴的其他模組。
require.js載入的模組，採用amd規範。也就是說，模組必須按照amd的規定來寫。
具體來說，就是模組必須採用特定的define()函式來定義。如果乙個模組不依賴其他模組，那麼可以直接定義在define()函式之中。
假定現在有乙個math.js檔案，它定義了乙個math模組。那麼，math.js就要這樣寫：
假定現在有乙個math.js檔案，它定義了乙個math模組。那麼，math.js就要這樣寫：
// math.js載入方法如下：define(function ();
return ;
});
// main.js如果這個模組還依賴其他模組，那麼define()函式的第乙個引數，必須是乙個陣列，指明該模組的依賴性。require(['math'], function (math));
define(['mylib'], function當require()函式載入上面這個模組的時候，就會先載入mylib.js檔案。(mylib)
return
; });
6，載入非規範的模組
理論上，require.js載入的模組，必須是按照amd規範、用define()函式定義的模組。但是實際上，雖然已經有一部分流行的函式庫（比如jquery）符合amd規範，更多的庫並不符合。那麼，require.js是否能夠載入非規範的模組呢？回答是可以的。這樣的模組在用require()載入之前，要先用require.config()方法，定義它們的一些特徵。舉例來說，underscore和backbone這兩個庫，都沒有採用amd規範編寫。如果要載入它們的話，必須先定義它們的特徵。
require.config(,require.config()接受乙個配置物件，這個物件除了有前面說過的paths屬性之外，還有乙個shim屬性，專門用來配置不相容的模組。具體來說，每個模組要定義（1）exports值（輸出的變數名），表明這個模組外部呼叫時的名稱；（2）deps陣列，表明該模組的依賴性。'backbone':
}});
比如，jquery的外掛程式可以這樣定義：
shim:}
談談模組化的 require 和 import
一 區別 require是commonjs的規範，在node中實現的api，import是es的語法，由編譯器處理。所以import可以做模組依賴的靜態分析，配合webpack rollup等可以做treeshaking。commonjs匯出的值會複製乙份，require引入的是複製之後的值 引用型...
前端模組化，元件化，工程化
1.前端模組化 2.前端元件化 指對具體的某個功能的封裝，比如所有的分頁可以封裝為分頁元件來統一使用，以此來達到元件復用，提高開發效率。3.前段工程化 概念 指使用軟體工程的技術和方法來進行前端專案的開發 維護和管理。前端工程化包含如下 1.規範 保證團隊所有成員以同樣的規範開發 2.分支管理 不同...
js模組化學習
乙個模組的組成 模組化 模組化的進化過程 namespace模式 iife模式 增強 模組化規範 引入模組 requirevar module require 模組名 模組相對路徑 引入模組發生在什麼時候?amd 瀏覽器端 cmd 瀏覽器端 es6 引入使用模組 import 問題 所有瀏覽器還不能...