RequireJS的使用步骤 requirejs _知识分享

第一步，下载RequireJS下载过程略......

文章插图
第二步，编写模块//-----moduleA.jsdefine([],function(){ //通过return输出模块A return { f1(){ ... }， f2(){ ... } }})//-----moduelB.js//模块B引用了模块Adefine(["moduleA"],function(ma){ //参数ma就是模块A,可以直接使用 return ...; //根据需要输出B模块})//-----moduleC.js//模块C引用了模块B，和模块jquerydefine(["moduleB","jquery"],function(mb, $){ //参数mb对应模块B //参数$对应模块jquery //数组中声明的模块会被自动注入到参数中，编写时没有先后顺序 return ...; //根据需要输出模块C})第三步，编写配置文件requirejs({ baseUrl : "http://localhost:8000/myproject/", paths : { "vali" : "scripts/jquery.validate", "jquery" : "scripts/jquery-2.0.3", "swiper" : "scripts/swiper", "moduleA" : "mymodules/inputauto", "jq.cookie" : "scripts/jquery.cookie", //不符合AMD规范的JS "bootstrap" : "scripts/bootstrap" //不符合AMD规范的JS }, shim : { //对于不符合AMD规范的模块，需要使用shim配置 "jq.cookie" : { deps : ["jquery"] //使用deps声明该模块依赖jquery }, "bootstrap" : { deps : ["jquery"] } }})重要说明：
AMD规范要求
一个标准模块必须使用define函数来定义
就像上面的例子那样。
对于不符合AMD规范的代码，无法被视为一个标准的模块
这会带来一个问题，那就是它无法使用标准的方式来引入它需要的其它模块，例如jquery等

于是才有了shim配置
它可以有效地解决非规范模块的依赖问题
例如 jquery.cookie.js 文件

文章插图
$.extend({ addCookie: function(){ console.log("add cookie"); }, getCookie: function() { console.log("get cookie"); }, removeCookie : function(){ console.log("remove cookie"); }})由于这个文件不符合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文件