关于javascript模块化

模块组织

随着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();
});

cmomonjs

//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'

关于javascript模块化

模块组织

关于javascriptIDE 目前功能薄弱的思考

AMD

cmomonjs

ES6

猜你喜欢