在javascript中，我們把比較複雜的都是用模塊化，今天我們就來了解一下require.js來實現模塊化開發
require.js是什麼？
require.js是在AMD規範上實現的一個 JavaScript 模塊異步加載器。
require.js下載
下載地址：
http://requirejs.org/docs/download.html
項目結構
首先請按照我的目錄創建如下目錄：
lib下存放一些常用的庫，和我們最關鍵的require.js
script下存放我們自己寫的一些js。
index.html代碼
<code> ><
html
><
head
><
meta
charset
="utf-8"
/><
title
>title
><
script
data-main
="js/script/main.js"
src
="js/lib/require.js"
>script
>head
><
body
><
table
><
tr
><
td
>module1：td
><
td
><
input
type
="button"
id
="module1"
value
="調用"
/>td
><
td
class
="module1"
>td
>tr
><
tr
><
td
>module2：td
><
td
><
input
type
="button"
id
="module2"
value
="調用"
/>td
><
td
class
="module2"
>td
>tr
><
tr
><
td
>module3：td
><
td
><
input
type
="button"
id
="module3"
value
="調用"
/>td
><
td
class
="module3"
>td
>tr
>table
>body
>html
>/<code>
這就是普通的html代碼，我們主要看script標籤，導入了require.js然後還有個data-main屬性，這屬性指定在加載完 reuqire.js 後，就用 requireJS 加載該屬性值指定路徑下的 JS 文件並運行，所以這個js為入口。
main.js代碼，require配置
<code>require
.config({baseUrl
:'js'
,paths
: {jquery
:'lib/jquery-3.4.1.min'
,module1
:'script/module1'
,module2
:'script/module2'
,module3
:'script/module3'
} });require
(['jquery'
,'module1'
,'module2'
,'module3'
],function
($, module1, module2, module3
) { $("#module1"
).click(function
() { module1.fun("module-1"
); }); $("#module2"
).click(function
() { module2.fun("module-2"
); }); $("#module3"
).click(function
() { module3.fun("module-3"
); }); })/<code>
main.js為入口，所以就要配置require，這裡我只配置兩個常用項
baseUrl:加載模塊的根目錄，因為模塊大多數情況都在同一目錄下，配置了此項在配置模塊的時候就不用加跟目錄了。
paths:這裡就是配置模塊了，以key：value結構的形式，可以省略文件的.js的後綴名。
require函數
此函數就是用於加載模塊和依賴的，加載完成後會只想回調函數，回調函數中的參數要和前面的模板的順序一致。我這裡就把paths裡配置了4個模塊都加載了。
模塊編寫(module1.js)
<code>define(['jquery'
],function
($
) {var
moduleclick =function
(name
) { $(".module1"
).html("hello:"
+ name +""
); };return
{fun
: moduleclick }; })/<code>
我們在編寫模塊的時候，需要按照amd的規範，使用define函數來定義，然後需要return返回你需要在外部調用的函數或者變量。
define函數跟require函數一樣，兩個參數，第一個參數是一個數組，用於加載依賴，比如我這裡用了jquery的語法，所以就必須加載jquery這個依賴。第二個參數也就是回調函數，在回調函數中編寫你的js邏輯代碼。
好了，下篇我們接著講require的全局配置和非amd規範的模塊導入。
延生(全局配置)：所謂全局配置，就是配置只需要設置一次，我們這篇的入口文件是main.js。難道我們要把整個項目的js都寫在main.js中嗎？如果不，那我們每個頁面都要重新寫一個main.js來配置require嗎？
延生(非amd規範)： 非amd規範的模塊就是不是使用define來定義的模塊，和沒有主動return返回你需要的函數這種類型的js。
