开始使用requireJS
-
文件引入
直接在页面上引入requireJS文件。
requireJS改变了传统script标签引入模块的形式，有两个非常直观的改变
- 直接在head标签引入js文件，文件的执行并不阻塞页面渲染
- 使用require方法引入一个或多个js模块，使得引入模块更加清晰，更加简洁。
- 基本使用方法
- require([arr])，使用require方法引入一个或者多个模块，这个方法可以在html页面中引入模块，也可以在js模块中使用这个方法引入其他模块。反正使用了requireJS，js文件就变成了一个一个的模块，引入变得非常直观。
-
基本API
require会定义三个变量：define，require，requirejs，其中require === requirejs。
- define(function(){moudle})
- require(arr,[callback]) 加载依赖模块，并执行加载完成后的回调函数
- 使用requir.config()方法来配置模块位置
require.config({
paths:{
'jquery':['http://libs.baidu.com/jquery.js'],
'test':'js/test'
}
})
//然后可以直接引用
require(['jquery','a'],function($){
$(function(){
//then,do something
})
})
//paths可以批量配置模块位置，为模块资源取一个简洁的名字来进行调用，paths还有一个重要的功能就是，可以同一个名字可以设置多个路径，这样线上的CDN库没有加载成功，也可以使用本地的库
上面的例子可以看出来：
1. requirejs加载模块的时候不用写.js后缀，也不能写
2. callback函数为模块的输出变量，要在回调函数中使用它，必须要通过传参，如果模块没有输出变量，则没有，所以尽量将输出的模块写在前面，防止位置错乱引发误解。
-
全局配置
有时候我们希望某些模块能够全局使用，而不需要配置模块路径，我们可以使用erquire的全局配置
//先创建一个config.js,放置我们的配置文件
require.config({
paths:{
'jquery':'http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min'
'test':'test'
}
})
然后在页面中调用requireJS的时候，加上data-main='config'即可以使用配置好的短命来加载模块了。
5.定义一个模块
define(['jquery'],function($){
var sayhello = {
init:function(){
$('body').text('hello wrold!');
}
}
return module = sayhello;
})
6.加载非规范模块
require.config({
shim:{
'underscore':{
exports:'_'
},
'backbone':{
deps:['underscore','jquery'],
//deps为依赖的模块
exports:'Backbone'
//exprots为输出的变量名
}
}
})
6.使用插件
requireJs有一个text插件，可以异步加载一段文本，使用结合模板使用。
使用方法：
- 到github上下载require/text.js
- 引用的时候像下面那样
define(["text!"],function(html){
console.log(html)
})
