Js模块化开发的理解
function func1(){
//...
}
function func2(){
//...
}
var nameModule={
name:0,func1:function(){
//...
},func2:function(){
//...
}
}
var nameModule = (function() {
var moduleName = "module"; // private
function setModuleName(name) {
moduleName = name;
}
function getModuleName() {
return moduleName;
}
return {
setModuleName: setModuleName,getModuleName: getModuleName
}
})();
console.log(nameModule.getModuleName()); // module
nameModule.setModuleName("nameModule");
console.log(nameModule.getModuleName()); // nameModule
CommonJS
// 1.js
var a = 1;
var b = function(){
console.log(a);
}
module.exports = {
a: a,b: b
}
/*
// 当导出的模块名与被导出的成员或方法重名时可以有如下写法
module.exports = {
a,b
}
*/
// 2.js
var m1 = require("./1.js")
console.log(m1.a); // 1
m1.b(); // 1
// 1.js
var a = 1;
var b = function(){
console.log(a);
}
exports.a = a;
exports.b = b;
// exports = { a,b } // 不能这么写，这样就改变了exports的指向为一个新对象而不是module.exports
// 2.js
var m1 = require("./1.js")
console.log(m1.a); // 1
m1.b(); // 1
AMD
require(['moduleA','moduleB','moduleC'],function (moduleA,moduleB,moduleC){
// do something
});
define(['moduleA',moduleC){
// do something
return {};
});
/**
define和require在依赖处理和回调执行上都是一样的，不一样的地方是define的回调函数需要有return语句返回模块对象(注意是对象)，这样define定义的模块才能被其他模块引用；require的回调函数不需要return语句，无法被别的模块引用
*/
// html的<script>标签也支持异步加载
// <script src="require.js" defer async="true" ></script> <!-- async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。 -->
CMD
- 对于依赖的模块，
AMD是提前执行（相对定义的回调函数,AMD加载器是提前将所有依赖加载并调用执行后再执行回调函数），CMD是延迟执行（相对定义的回调函数,CMD加载器是将所有依赖加载后执行回调函数，当执行到需要依赖模块的时候再执行调用加载的依赖项并返回到回调函数中），不过RequireJS从2.0开始，也改成可以延迟执行
-
AMD是依赖前置（在定义模块的时候就要声明其依赖的模块），CMD是依赖就近（只有在用到某个模块的时候再去require——按需加载，即用即返）。
define(function(require,exports,module){
var a = reuire('require.js');
a.dosomething();
return {};
});
ES6
-
export能按需导入，export default不行。
-
export可以有多个，export default仅有一个。
-
export能直接导出变量表达式，export default不行。
-
export方式导出，在导入时要加{}，export default则不需要。
// 导出单个特性
export let name1,name2,…,nameN; // also var,const
export let name1 = …,name2 = …,const
export function FunctionName(){...}
export class ClassName {...}
// 导出列表
export { name1,nameN };
// 重命名导出
export { variable1 as name1,variable2 as name2,nameN };
// 解构导出并重命名
export const { name1,name2: bar } = o;
// 默认导出
export default expression;
export default function (…) { … } // also class,function*
export default function name1(…) { … } // also class,function*
export { name1 as default,… };
// 导出模块合集
export * from …; // does not set the default export
export * as name1 from …; // Draft ECMAScript® 2O21
export { name1,nameN } from …;
export { import1 as name1,import2 as name2,nameN } from …;
export { default } from …;
// name－从将要导入模块中收到的导出值的名称
// member,memberN－从导出模块，导入指定名称的多个成员
// defaultMember－从导出模块，导入默认导出成员
// alias,aliasN－别名，对指定导入成员进行的重命名
// module-name－要导入的模块。是一个文件名
// as－重命名导入成员名称（“标识符”）
// from－从已经存在的模块、脚本文件等导入
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1,member2 } from "module-name";
import { member1,member2 as alias2,[...] } from "module-name";
import defaultMember,{ member [,[...] ] } from "module-name";
import defaultMember,* as name from "module-name";
import "module-name"; // 将运行模块中的全局代码,但实际上不导入任何值。
// 1.js
var a = 1;
var b = function(){
console.log(a);
}
var c = 3;
var d = a + c;
var obj = { a,b,c }
export {a,b};
export {c,d};
export default obj;
<!-- 3.html 由于浏览器限制，需要启动一个server服务 -->
<!DOCTYPE html>
<html>
<head>
<title>ES6</title>
</head>
<body>
</body>
<script type="module">
import {a,b} from "./1.js"; // 导入export
import m1 from "./1.js"; // 不加{}即导入export default
import {c} from "./1.js"; // 导入export 按需导入
console.log(a); // 1
console.log(b); // ƒ (){ console.log(a); }
console.log(m1); // {a: 1,c: 3,b: ƒ}
console.log(c); // 3
</script>
</html>
https://github.com/WindrunnerMax/EveryDay
https://zhuanlan.zhihu.com/p/22890374
https://www.jianshu.com/p/80354375e1a5
https://juejin.im/post/6844904120088838157
https://www.cnblogs.com/libin-1/p/7127481.html
https://cloud.tencent.com/developer/article/1436328
https://blog.csdn.net/water_v/article/details/78314672
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
服务热线 19970861797
