1.模塊化開發的原因:
為了解決頁面堵塞,往往會采用異步加載js的方式,但這種方式會帶來一些不確定因素;
為此,James Burke 便搞了一個AMD(Asynchronous Module Definition 異步模塊定義)規范
異步加載模塊,模塊加載不影響后續語句執行。
2.模塊化開發的作用:
異步加載模塊,模塊加載不影響后續語句的執行。
3.require.js:
是一個實現了AMD的庫,它的作用;
a:實現了js異步加載,避免頁面加載出現假死;
b:管理模塊之間的依賴性,便於代碼的編寫與維護;
c:簡化了過於復雜的模塊依賴關系;
4.require.js的實現流程
1.下載require.js:https://requirejs.org/
2.在頁面引入require.js
<script scr="./require.js" data-main='將要引入的js 如:index.js'></script>
即要引入的js就為一個出口js。
3.編寫一個配置文件 “config.js”文件;
此文件配置所有的模塊,然后再出口文件中用 require 引入。
4.出口js的編寫;例如:出口js為 “index.js”,
在編寫此文件時,必須首先用require引入config配置文件,
兩個參數;參數1:配置文件的名稱,參數2:回調函數,里面開始編寫各個模塊的依賴。
第二個require引入的是,各個模塊的依賴關系,兩個參數;
參數1:所依賴的模塊,都不加 .js ;此名稱和配置文件中的自定義的名稱必須保持一致,
參數2:依賴這個模塊干什么,是一個回調函數,里面所傳遞的參數必須和第一個參數所依賴的名稱必須保持一致。
5.自定義模塊的編寫:例如:(demo1.js)
自定義模塊的需要暴露,暴露模塊的方法為define;
把此模塊需要在配置文件中引入進行配置,配置方法轉上第3步驟;
**整個過程除了HTML文件中引入index.js時后面加.js,其他過程中均不加!!**