模块组织
随着javascript发展,从增强显示的脚本到解决一类问题的库,然后构建应用,一个有效的模块加载方案也就成为了必须的元素。 因为当想用一个语言构建一个大型应用,模块机制不可或缺。
- 浏览器端运用最广泛的为 AMD 规范
- 服务端使用 CommonJS 规范
- 而ES6 Module 加载规范不远的将来将要统一前后端(我们要是采用ES6 加载规范)
关于javascriptIDE 目前功能薄弱的思考
javascript 尤其运行在浏览器端并没标准统一的入口,通过简陋的<script>标签引入,所以无法判断一个文件中出现的对象该有何种行为,而且script 还可能是动态加载的。 必然不能像其他语言那样智能检验差错与提示,如果以后模块化编程根深蒂固,javascriptIDE也会像其他语言一样强大。 有必要的话兴许还能实时预览,因为现在集成webkit渲染引擎开发桌面的应用正在蓬勃发展(比如我正在使用的vscode)
AMD
define(['module1', 'module2'], function(m1, m2) {
return {
method: function() {
m1.methodA();
m2.methodB();
}
};
});
require(['foo', 'bar'], function ( foo, bar ) {
foo.doSomething();
});
comonjs
//index.js
const m1=require("module1");
m1.dosomething()
.........
//module1
......
module.exports={
dosomething:function(){
....
}
}
ES6
import
//import
import { stat as _stat, exists, readFile } from 'fs';
//由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。
// 报错
import { 'f' + 'oo' } from 'my_module';
// 报错
let module = 'my_module';
import { foo } from module;
// 报错
if (x === 1) {
import { foo } from 'module1';
} else {
import { foo } from 'module2';
}
//上面三种写法都会报错,因为它们用到了表达式、变量和if结构。在静态分析阶段,这些语法都是没法得到值的。
export
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
//上面代码是profile.js文件,保存了用户信息。ES6 将其视为一个模块,里面用export命令对外部输出了三个变量。
//export的写法,除了像上面这样,还有另外一种。
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName as _firstName, lastName, year};
export default
/ export-default.js
export default function () {
console.log('foo');
}
上面代码是一个模块文件export-default.js,它的默认输出是一个函数。
其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'