Modulaire
Maintenabilité et réutilisation
Qu'est-ce que AMD / CMD et la différence?
CommonJS est une spécification Nodejs est l'implémentation de cette spécification
AMD / CMD est né de
commonjs seajs Suivez la spécification CMD
requirejs Suivez la spécification
AMD Définition du module asynchrone AMD Dépendance d'exécution anticipée Pré-CMD Définition
générale du module Dépendance d'exécution retardée à proximité (selon Need to load ) Avantages: pas de gaspillage de ressources Inconvénients: temps d'attente long
Utilisation AMD
<!---->
<h1></h1>
<script src="require.js" data-main="js/main"></script>
//定义模块 /test/a.js(公共)
define(function(){
var str_a = 'hello wrold';
return str_a;
})
//定义模块 /demo.js(公共)
define(function(reqire,exports,module){
/*
var demo = function(){
return 123
};
return {
demo:demo
};
*/
//字面量
var web = {
add:function(v){
return v
}
};
//return web;
//模块导出 与return web结果一样,只是写法不一样;
module.exports = web;
})
//AMD / CMD 规范
//AMD 依赖前置
define(['todo'],function(){
var t = todo.dotosomething();
var web = function(){
add:function(v,t){
return v+t
}
}
return web;
})
//CMD 依赖就近
/*
define(function(require,exports,module){
var todo = requuire("todo");
var t = todo.dotosomething();
var web = {
add:function(v){
return v
}
};
return web;
})
*/
//todo.js
define(function(){
var dotosomething = function(){
return 100
};
return {
dotosomething:dotosomething
}
})
//main.js a:别名
require.config({
// baseUrl:"node_modules",//全局定义
shim:{
//非AMD模块输出,继承AMD的规范
"bootstrap":{
deps:["jquery"],//表示有依赖关系
exports:"bootstrap"//名称
}
},
paths:{
"jquery":"../node_modules/jquery",
//"jquery":"/jquery",//使用baseUrl
"bootstrap":"../node_modules/bootstrap",
"a":"test/a",
"demo":"demo"
}
})
//require(['../jquery','../bootstrap','test/a'],function($,bootstrap,a){//路径太长 不推荐
require(['jquery','bootstrap','a','demo'],function($,bootstrap,a){
//别名要一一对应
console.log(a)//hello wrold
// document.querySelector("h1").innerHTML = a;
$("h1").text(a);
console.log(demo.demo(1000))
})
Requêtes multiples: rédaction de la chaîne de promesses