CommomJS(Node)
每個文件是一個模塊,有自己的作用域。
在一個文件中的變量、函數、類都是私有的。
定義模塊:
// module.js
let name = '';
let hello = function () {
console.log(name);
};
module.exports = { name, hello }
// 或者
exports.hello = hello;
加載模塊:
let module = require('./module.js');
module.sayName();
module.export跟exports的區別
module.exports 方法還可以單獨返回一個數據類型(String、Number、Object...),而 exports 只能返回一個 Object 對象
所有的 exports 對象最終都是通過 module.exports 傳遞執行,因此可以更確切地說,exports 是給 module.exports 添加屬性和方法
AMD: Asynchronous Module Definition 異步模塊定義。
使用define定義模塊
require方法加載模塊
define(['module'], function() {
let name = '';
function hello() {
console.log(name);
}
return { hello }
})
使用模塊:
// 通過 require 引入依賴
require(['module'], function(mod) {
mod.hello(); //
})
CMD
define(function(require, exports, module) {
// 通過 require 引入依賴
var otherModule = require('./otherModule');
// 通過 exports 對外提供接口
exports.myModule = function () {};
// 或者通過 module.exports 提供整個接口
module.exports = function () {};
})
ES6
export和import。export命令用于規定模塊的對外接口,import命令用于輸入其他模塊提供的功能。
定義模塊
export default { name: '' }
使用模塊
import people from 'a.js';
console.log(people); //
UMD: Universal Module Definition,通用模塊定義規范。
其不是專門的規范,而是
- 0. 前言
- 1. 基礎篇
- Node.js 入門介紹與安裝
- Node.js運行模式與入門實例
- npm介紹及與Node.js關聯
- Webpack 快速介紹及入門示例
- 模塊
- webpack
- gulp
- 2. 進階篇
- Node.js與Apache比較
- Node.js VS JavaScript
- CommonJS、AMD、CMD與ES6
- 3. 框架篇
- Node.js之Express快速介紹與入門示例
- 4. 實戰篇
- 調試器監聽
- webpack入門示例
- 5. 補充篇
- 語法
- 前端包管理工具:npm、cnpm、yarn
- 6. 問題解決篇
- webpack之options has an unknown property ‘contentBase‘. These properties are valid: