1. 程式人生 > 實用技巧 >App自動化測試系列[v1.0.0][MacAppium開發環境搭建]989

App自動化測試系列[v1.0.0][MacAppium開發環境搭建]989

參考:https://blog.csdn.net/Real_Bird/article/details/54869066

CommonJs(適用服務端)

特點

  • 每個檔案就是一個模組,有自己的作用域。在一個檔案裡面定義的變數、函式、類,都是私有的,對其他檔案不可見。
  • 在模組中使用global 定義全域性變數,不需要匯出,在別的檔案中可以訪問到。
  • 每個模組內部,module變數代表當前模組。這個變數是一個物件,它的exports屬性(即module.exports)是對外的介面。
  • 通過 require載入模組,讀取並執行一個js檔案,然後返回該模組的exports物件。
  • 所有程式碼都執行在模組作用域,不會汙染全域性作用域。
  • 模組可以多次載入,但是隻會在第一次載入時執行一次,然後執行結果就被快取了,以後再載入,就直接讀取快取結果。要想讓模組再次執行,必須清除快取。
  • 模組載入的順序,按照其在程式碼中出現的順序。

載入與輸出

requiremodule.exportsrequire命令用於輸入其他模組提供的功能,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通過importexport實現模組的輸入輸出。其中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);