直接式
var foo = 256;
var bar = 1000;
console.log(foo, bar);
这种方式最基础,也最常见,适用于浏览器和Node.js®
,可以通过工具包装成其他模式。
加上'use strict';
后变种成严格模式:
'use strict';
var a = 'a';
var b = 'b';
var ab = a + b;
console.log(ab);
IIFE式(立即调用函数表达式)
;(function(var1, var2, var3) { // ';'可以有,也可以没有。
// 一般是为了避免合并js文件时出现问题。
'use strict';
// 此处有代码10000行...
}(globalVar1, globalVar2, globalVar3));
或者
;(function(var1, var2, var3) {
'use strict';
// 此处有代码100000行...
})(globalVar1, globalVar2, globalVar3);
这种方式的好处是可以简单的避免代码全局污染。适用于浏览器和Node.js®
。
$式(没想到好的名字zzz)
在使用jQuery的工程中通常也写成:
;$(function() {
'use strict';
// 此处有代码100000行...
});
这样写可以使得代码在文档加载完后执行。
CommonJS式
var fs = require('fs');
var path = require('path');
module.exports = function myModule() {
// 请注意,此处有代码
};
或者
var fs = require('fs');
var path = require('path');
exports.myModule = function myModule() {
// 请注意,此处有代码
};
AMD式
// 定义
define('myModule', ['jquery'], function($) { // 定义一个叫myModule的模块
// $ 是 jquery 模块的输出
$('body').text('hello world');
});
// 使用
define(['myModule'], function(myModule) { // 没有id的匿名模块通常作为应用的启动函数
});
UMD式
(function( root, factory ) {
if( typeof define === 'function' && define.amd ) {
// AMD. Register as an anonymous module.
define( function() {
root.myModule = factory();
return root.myModule;
} );
} else if( typeof exports === 'object' ) {
// Node. Does not work with strict CommonJS.
module.exports = factory();
} else {
// Browser globals.
root.myModule = factory();
}
}( this, function() {
'use strict';
// 此处省略代码1000行
}
这种模式是全局模式、AMD模式、CommonJS模式的混合体,兼容大部分的应用场景。
es6式
import fs from 'fs';
import path from 'path';
export default function defaultModule() {
// 请注意,此处有代码
};
export function myModule() {
// 请注意,此处有代码
};
我们通常会使用工具将这种模式下的代码转成AMD、CommonJS或者UMD模式。
这也是当下最流行的写法,很多流行的前端框架,工具库都采用这种写法,比如Angular 2、Reactjs、vue.js、lodash等等。