如何使用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一样有两个参数，参数都是一致的，这里就不说明了，回调函数里面写功能就可以了