AMD https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)
异步模块定义规范(AMD)制定了定义模块的规则,
这样模块和模块的依赖可以被异步加载。
这和浏览器的异步加载模块的环境刚好适应
(浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题)。
index.html 在body部分
//这里的data-main = "main" 是同目录 下的main.js
<script src = "lib/require.js" data-main = "main"></script>
=============
main.js
//配置
require.config({
paths :{
//这里是先加载 , 不执行 ,所以 不用但心 执行 顺序
//注意 这里 的 文件 不需要 写 后缀
'jquery' : './lib/jquery-2.1.1.min',
'Zepto' : './lib/zepto',
'underscore': './lib/underscore.min',
//backbone 依赖 underscore库 , 所以必需有
//backbone 单页 应用
'backbone' : './lib/backbone.min',
//text 用来 解析 切换 内容 页面的
'text' : './lib/text',
'home' : './js/home'
}
});
// require方法: 当数组内的依赖文件加载完毕之后,
//再执行回调函数内的方法。
//这里可以只加载 , 不执行回调函数 , 如test
//require(['jquery','home','test'],function($,home){
//假如 下面的 依赖文件 上面没写, 则 根据 路径 来找
//如 router 假如 ,找的只是js文件
require(['jquery','router'],function($,router){
// home.fn1();
});
========================
home.js
define(['Zepto'],function(Zepto){
console.log("home.js");
function fn1(){
$('html').css({
'background':'#000'
});
}
function fn2(){
$('body').html("hello AMD");
}
//多个方法 ,通过 obj返回
return {
fn1:fn1,
fn2:fn2
}
});
网友评论