如何使用requireJs模塊化開發

一、安裝引入requireJs

控制台輸入命令安裝

cnpm install require.js

 

 

 

 

 

 二、引入requireJs

再你的項目頁面引入

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

data-main是引入主入口文件，后面你只需要再主入口文件里面使用模塊

require(['./config'],()=>{//引入配置文件（專門配置每個模塊的路徑）
    require(['header','footer','Rotation','BestSellers','NewProducts'],()=>{//引入模塊並使用
        
    })
})

require()方法用來引入使用模塊，第一個參數是數組，數組的每一項都是模塊，第二個參數是一個回調函數，函數也有參數，滿足AMD規范的參數就寫在里面，需要注意的是，滿足AMD規范的模塊再數組項里的位置要和函數參數里的參數保持一致，比如：

define(['jquery','template'], ($,template) => {

})

jquery模塊對應參數$,template模塊對應參數template

三、配置模塊路徑

再上面我們有引入一個config模塊，這里面是用來配置每個模塊的路徑的，這樣方便我們管理

require.config({//配置路徑文件
    baseUrl:'/',
    paths:{
       'jquery':'libs/jquery-3.3.1.min' ,
      
    },
    shim: {//墊片
        fly: {
            deps: ['jquery']
        }
    }
})

baseUrl是模塊公用路徑,shim（墊片）作用：有些模塊依賴着其它插件或者庫，我們就可以用這個墊片來配置它所依賴的插件或者庫

四、定義模塊

define(['jquery'], ($) => {//尾部

})

define關鍵字用來定義模塊，和require一樣有兩個參數，參數都是一致的，這里就不說明了，回調函數里面寫功能就可以了