App自動化測試系列[v1.0.0][MacAppium開發環境搭建]989
參考:https://blog.csdn.net/Real_Bird/article/details/54869066
CommonJs(適用服務端)
特點
- 每個檔案就是一個模組,有自己的作用域。在一個檔案裡面定義的變數、函式、類,都是私有的,對其他檔案不可見。
- 在模組中使用global 定義全域性變數,不需要匯出,在別的檔案中可以訪問到。
- 每個模組內部,module變數代表當前模組。這個變數是一個物件,它的exports屬性(即module.exports)是對外的介面。
- 通過 require載入模組,讀取並執行一個js檔案,然後返回該模組的exports物件。
- 所有程式碼都執行在模組作用域,不會汙染全域性作用域。
- 模組可以多次載入,但是隻會在第一次載入時執行一次,然後執行結果就被快取了,以後再載入,就直接讀取快取結果。要想讓模組再次執行,必須清除快取。
- 模組載入的順序,按照其在程式碼中出現的順序。
載入與輸出
require
和module.exports
。require
命令用於輸入其他模組提供的功能,module.exports
命令用於規範模組的對外介面,輸出的是一個值的拷貝,輸出之後就不能改變了,會快取起來。載入完成後生成的物件如下
{ id: '...', exports: { ... }, loaded: true, ... }
id是模組名,exports是該模組匯出的介面,loaded表示模組是否載入完畢。以後需要用到這個模組時,就會到exports屬性上取值。即使再次執行require命令,也不會再次執行該模組,而是到快取中取值。
示例
// math.js exports.add = function(a, b) { return a + b; }
var math = require('math'); math.add(2, 3); // 5
優勢
CommonJS是同步載入模組,這對於伺服器端不是一個問題,因為所有的模組都放在本地硬碟。等待模組時間就是硬碟讀取檔案時間,很小。但是,對於瀏覽器而言,它需要從伺服器載入模組,涉及到網速,代理等原因,一旦等待時間過長,瀏覽器處於”假死”狀態。所以在瀏覽器端,不適合於CommonJS規範
ADM(適用瀏覽器)
特點
- 非同步方式載入模組
- 依賴前置(載入一個模組先載入依賴後執行模組和cmd的不同)
載入與輸出
AMD也採用require命令載入模組,但是不同於CommonJS,它要求兩個引數,其中回撥函式中引數對應陣列中的成員(模組)。
//第一個引數是需要載入的模組陣列,第二個是載入完成的回撥函式 require([module], callback);
輸出
define(id?, dependencies?, factory);
-
id:模組的名字,如果沒有提供該引數,模組的名字應該預設為模組載入器請求的指定指令碼的名字;
-
dependencies:模組的依賴,已被模組定義的模組標識的陣列字面量。依賴引數是可選的,如果忽略此引數,它應該預設為
["require", "exports", "module"]
。然而,如果工廠方法的長度屬性小於3,載入器會選擇以函式的長度屬性指定的引數個數呼叫工廠方法。 -
factory:模組的工廠函式,模組初始化要執行的函式或物件。如果為函式,它應該只被執行一次。如果是物件,此物件應該為模組的輸出值。
示例
輸出這裡只給出了引數三
// math.js define(function() { var add = function(x, y) { return x + y; } return { add: add } })
// main.js require(['math'], function(math) { alert(math.add(1, 1)); })
如果math模組還依賴其他模組,寫法如下
// math.js define(['dependenceModule'], function(dependenceModule) { // ... })
當require()函式載入math模組的時候,就會先載入dependenceModule模組。當有多個依賴時,就將所有的依賴都寫在define()函式第一個引數陣列中,所以說AMD是依賴前置的。
CMD(AMD基礎上優化依賴載入)
特點
- 依賴就近,延遲執行(在factory方法中靈活載入依賴)
載入與輸出
與amd類似不同之處在於輸出時
define(factory)
示例
// CMD define(function(require, exports, module) { var a = require('./a'); a.doSomething(); var b = require('./b'); b.doSomething(); })
對比amd沒有了依賴引數並且在factory 方法執行時預設會傳入三個引數:require、exports 和 module.
UMD
特點
- 相容各種載入規範
示例
(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery', 'underscore'], factory); } else if (typeof exports === 'object') { // Node, CommonJS之類的 module.exports = factory(require('jquery'), require('underscore')); } else { // 瀏覽器全域性變數(root 即 window) root.returnExports = factory(root.jQuery, root._); } }(this, function ($, _) { // 方法 function a(){}; // 私有方法,因為它沒被返回 (見下面) function b(){}; // 公共方法,因為被返回了 function c(){}; // 公共方法,因為被返回了 // 暴露公共方法 return { b: b, c: c } }));
ES6
特點
- 語法直觀靈活對比adm和cmd
載入與輸出
es6通過import
、export
實現模組的輸入輸出。其中import命令用於輸入其他模組提供的功能,export命令用於規定模組的對外介面。
輸出
var a = 1; var b = 2; var c = 3; //其中上面的as表示給匯出的變數重新命名 export {a, b, c as d}
要注意的是
- export匯出的變數只能位於檔案的頂層,如果處於塊級作用域內,會報錯
- export語句輸出的值是動態繫結,繫結其所在的模組
載入
// abc.js var a = 1; var b = 2; var c = 3; export {a, b, c} //main.js //部分匯入 import {a, b, c} from './abc'; //整體載入 import * as adc from './abc' console.log(a, b, c);
export default:在export輸出內容時,如果同時輸出多個變數,需要使用大括號{}
,同時匯入也需要大括號。使用export defalut
輸出時,不需要大括號,而輸入(import)export default
輸出的變數時,不需要大括號
本質上,export default
輸出的是一個叫做default的變數或方法,輸入這個default變數時不需要大括號
// abc.js export {a as default}; // main.js import a from './abc'; // 這樣也是可以的 // 這樣也是可以的 import {default as aa} from './abc'; console.log(aa);