requirejs

更多模块化知识，请参考前端视频专题“前端为什么需要模块化？”

第一步，下载RequireJS

下载过程……

第二步，编写模块

//-modulea.jsdefine ([]，function(){//输出模块A return {F1 () {…}，F2 () {…} })//-moduleb . js//模块B引用模块A定义([]。moduleA & # 34]，function(ma){ //参数ma是模块A，可以直接使用return…；//根据需要输出模块B })/})//-moduleC.js///Module C是指模块B和模块jquery define([& # 34；moduleB & # 34,"jquery & # 34]，function(mb，$){ //参数mb对应模块B //参数$对应模块jquery //数组中声明的模块会自动注入到参数中，写的时候没有返回的顺序…；//按要求输出模块C}第三步，编写配置文件require js({ base URL:& # 34；http://localhost:8000/my project/& # 34；，路径:{ & # 34；瓦利& # 34；: "scripts/jquery . validate & # 34；, "jquery & # 34: "脚本/jquery-2 . 0 . 3 & # 34；, "swiper & # 34: "脚本/swiper & # 34；, "moduleA & # 34: "my modules/input auto & # 34；, "jq.cookie & # 34: "scripts/jquery . cookie & # 34；//不符合AMD规范的& # 34自举& # 34；: "脚本/引导& # 34；//不符合AMD规范的JS，Shim:{//不符合AMD规范的模块，需要配置Shim & # 34；jq.cookie & # 34:{ deps:[& # 34；jquery & # 34]//使用deps声明模块依赖jquery }，& # 34；自举& # 34；:{ deps:[& # 34；jquery & # 34]}}})重要提示:

AMD规范要求

必须使用define函数定义标准模块。

就像上面的例子一样。

不符合AMD规范的代码不能视为标准模块。

这样会带来一个问题，就是它无法以标准的方式引入它需要的其他模块，比如jquery。

因此有了垫片配置。

可以有效解决非标准模块的依赖性问题。

例如，jquery.cookie.js文件。

$.extend({ add cookie:function(){ console . log(& # 34；添加cookie & # 34);}，get cookie:function(){ console . log(& # 34；获取cookie & # 34);}，remove cookie:function(){ console . log(& # 34；删除cookie & # 34);}})因为这个文件不符合AMD规范。

这个文件实际上依赖于jquery。

但是requireJS不能管理它的依赖项。

如果您不使用shim进行配置，您将会得到一个错误，即找不到＄的消息。

第四步，编写业务文件，使用这些模块

//—–home.js//加载配置文件，使其生效，注意配置文件的路径要根据实际情况编写require(["./conf/config.js"],function(){ //加载所有你需要的模块，模块名称需要跟配置文件中一致 //数组中声明的依赖模块会被自动加载，并注入到对应的参数中 require(["jquery","swiper","moduleA","jquery.cookie"], function($,Swiper,ma){ //$对应jquery模块，Swiper对应swiper模块，ma对应moduleA模块 //由于jquery.cookie模块本身没有输出内容 //只是对jquery的扩展，因此不需要写参数来接收 //编写正常的业务代码 })})第五步，页面引入JS文件

///-home.js///Load配置文件以使其生效。注意配置文件的路径并写入require([& # 34；。/conf/config . js & # 34；]，function(){ //加载所有需要的模块，并且模块名称需要与配置文件一致//数组中声明的依赖模块会被自动加载并注入相应的参数require([& # 34；jquery & # 34,"swiper & # 34,"moduleA & # 34,"jquery.cookie & # 34]、函数($，swiper，ma) {/$对应jquery模块，Swiper对应Swiper模块，ma对应moduleA模块//因为jquery.cookie模块本身没有输出内容//只是jquery的扩展，所以不需要写参数接收//写正常业务代码}})第五步，将JS文件引入页面。

到目前为止，基本可以用了。

但在实战中，这显然并不完美。

因为我们的CSS还没有模块化。

第六步，下载样式处理文件css.js

这个文档不是官方提供的，需要百度自己下载。

或者私下跟我说，发给你。

第七步，改造配置文件

require js({ base URL:& # 34；http://localhost:8000/my project/& # 34；，路径:{ & # 34；瓦利& # 34；: "scripts/jquery . validate & # 34；, "jquery & # 34: "脚本/jquery-2 . 0 . 3 & # 34；, "swiper & # 34: "脚本/swiper & # 34；, "moduleA & # 34: "my modules/input auto & # 34；, "jq.cookie & # 34: "scripts/jquery . cookie & # 34；, "自举& # 34；: "脚本/引导& # 34；, "css & # 34: "脚本/CSS & # 34；//处理CSS样式的模块}，shim:{ & # 34；jq.cookie & # 34:{ deps:[& # 34；jquery & # 34] }, "swiper & # 34:{//css文件也可以视为模块，直接声明依赖关系，自动加载deps:[& # 34；css！styles/swiper . CSS & # 34；] }, "自举& # 34；:{ deps:[& # 34；jquery & # 34//css文件也可以看作是模块，直接声明依赖关系，自动加载& # 34；css！styles/bootstrap . CSS & # 34；]}}})通过对css.js的处理，一个js模块可以自动依赖对应的样式文件。

加载模块的时候会更加省力省心。

require(["swiper"],function(Swiper){ //除了swiper对应的js文件外 //由于之前做了shim配置，并声明了css依赖 //swiper.js和swiper.css将会被作为一个整体一起加载 //真正做到了模块化的思维方式})第八步，完。