RequireJS的使用步骤

这是我参与更文挑战的第7天，活动详情查看： 更文挑战

---

RequireJS的使用步骤

更多模块化的知识，请参考前端视频专题《前端为何须要模块化》

第一步，下载RequireJS

下载过程略......

第二步，编写模块

//-----moduleA.js

define([],function(){
   //经过return输出模块A
	return {
		f1(){ ... }，
 		f2(){ ... }
	}
})
复制代码

//-----moduelB.js
//模块B引用了模块A

define(["moduleA"],function(ma){
	//参数ma就是模块A,能够直接使用
   return ...; //根据须要输出B模块
})
复制代码

//-----moduleC.js
//模块C引用了模块B，和模块jquery
define(["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文件

到此为止，基本就能够使用了

不过在实战当中，这显然是不够完美的

由于咱们的CSS尚未被模块化

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

该文件非官方提供，须要自行百度

或私聊我吧，这个没办法放到文章中

第七步，改造配置文件

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",
		"bootstrap" : "scripts/bootstrap",
		"css" : "scripts/css" //处理CSS样式的模块
	},
	shim : {
		"jq.cookie" : {
			deps : ["jquery"]
		},
		"swiper" : {
			//css文件也能够被当成模块，直接声明依赖，自动加载
			deps : ["css!styles/swiper.css"]
		},
		"bootstrap" : {
			deps : [
				"jquery",
				//css文件也能够被当成模块，直接声明依赖，自动加载
				"css!styles/bootstrap.css"
			]
		}
	}
})
复制代码

经过css.js的处理，一个JS模块，能够自动依赖对应的样式文件

加载模块时，将更加的省力、省心

require(["swiper"],function(Swiper){
	//除了swiper对应的js文件外
	//因为以前作了shim配置，并声明了css依赖
	//swiper.js和swiper.css将会被做为一个总体一块儿加载
	//真正作到了模块化的思惟方式
})
复制代码

第八步，完。