requirejs 基本知识
2016-10-20 本文已影响17人
春困秋乏冬眠夏打盹
define 定义了一个模块
define(function(){
function(){
alert('');
}
});
require 加载依赖模块,并执行加载完后的回调函数。require中的依赖是一个数组。
// 加载本地js文件
require(["js/a"], function(){
alert('load a model');
});
// 加载非本地文件
// require.config 是用来配置模块加载位置,给模块起一个更短更好记的名字
require.config({
paths: {
'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
'a': 'js/a'
}
})
上面例子中的callback函数中发现有$参数,这个就是依赖的jquery模块的输出变量,如果你依赖多个模块,可以依次写入多个参数来使用:
require(["jquery", "a"], function($){
$(function(){
alert('load');
})
})
// 多个参数
require(['jquery', 'underscore'],function($,_){
$(function(){
_.each([1,2,3], alert)
})
})
每个页面中都加入配置。这样十分繁琐。
requirejs提供了一种叫"主数据"的功能,我们首先创建一个main.js:
// main.js
require.config({
paths: {
'jquery': ["http://cdn/", "js/jquery"], // 可以配置多个路径,第一个加载不成功再加载第二个
'a': 'js/a'
}
})
// html
<script data-main="js/main" src="js/requier.js"></script>
data-main属性,这个属性制定的js将在加载完require.js后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都是用这个配置,然后页面中就可以直接使用require来加载所有的短模块名。
data-main 还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径
// 引用非AMD规范的js文件,是不能用require([''])的。要用到shim。
require.config({
shim: {
'underscore': {
exports: '_'
}
}
})
//应用
require(['underscore'], function(_){
_.each();
})
//插件形式的非AMD模块。也要用到shim。
require.config({
shim: {
'jquery.form': {
deps: ['jquery']
}
}
})