守護 Javascript 中的函數參數

MajorREVG 8年前發布 | 6K 次閱讀 JavaScript開發 JavaScript

作為開發者，我們花費許多時間來調試，尤其是在發現問題來源方面。開發工具指導我們追蹤調用棧，但是追蹤過程仍然相當耗時，尤其在遇到級聯異步調用的時候。這一問題在很早以前就被發現了。

假設我們有一個從不同文檔結構中搜索包含指定字符串的元素的函數。我們使用以下看起來合法的調用：

grep( "substring", tree );

但是我們并沒有得到期望的結果。按照以往的經驗，我們會花費一些時間來檢查給定的樹形文檔結構，時間有可能會很長。然后我們很可能會做其他的檢查，但是在最終，我們會從函數代碼中發現傳入的參數順序反了。這樣看來的話，我們只要關注函數的參數，就不會發生上面的錯誤。

function grep( tree, substring ){

  if ( !( tree instanceof Tree ) ) {

    throw TypeError( "Invalid tree parameter" );

  }

  if ( typeof substring !== "string" ) {

    throw TypeError( "Invalid substring parameter" );

  }

  //...

}

這種驗證方式是 Design by Contract approach 的一部分。它在軟件組成部分中列出了需要驗證的前置條件和后置條件。在以上示例中，我們必須測試函數輸入參數符合指定的格式（比較第一個參數符合樹文檔的類型，第二個參數符合字符串類型）同時我們建議檢查函數輸出類型是否是一個字符串。

但是，Javascript目前為止還沒有其他語言那樣內置的功能作為函數入口和結束處的驗證。對于一個示例，PHP語言有類型提示：

<?php

function grep( Tree $tree, string $substring ): string {}

TypeScript 有嚴格類型：

function grep( tree: Tree, substring: string ): string {}

此外，它還支持高級類型（聯合類型，可選類型，交叉類型，泛型等等）：

function normalize( numberLike: number | string, modifier?: boolean ): string {}

根據在ES規范中提出來得特性，今后會有一個叫做 Guards 的功能，它建議使用下面的語法：

function grep( tree:: Tree, substring:: String ):: String {}

目前為止在Javascript中，我們必須使用外部庫或者可轉換的編譯器來解決這一問題。但是，可用的資源較少。最老的庫是 Cerny.js 。它類似于DbC(數據庫計算機)，強大且靈活：

var NewMath = {};

(function() {

    var check = CERNY.check;

    var pre = CERNY.pre;

    var method = CERNY.method;

    // The new division

    function divide(a,b) {

      return a / b;

    }

    method(NewMath, "divide", divide);

    // The precondition for a division

    pre(divide, function(a,b) {

       check(b !== 0, "b may not be 0");

    });

})();

但是對我而言，它讀起來很復雜。我更喜歡使用簡潔干凈的方式校驗前提條件/后置條件即可。 Contractual 提供的語法很符合我的要求：

function divide ( a, b ) {

  pre:

    typeof a === "number";

    typeof b === "number";

    b !== 0, "May not divide by zero";

  main:

    return a / b;

  post:

    __result < a;

}

alert(divide(10, 0));

除了不是Javascript之外，看起來都很不錯。如果你需要使用的話，必須用 Contractual或者 Babel Contracts 把源代碼編譯成Javascript。我不反對跨語言編譯器，但是如果讓我選擇的話，我寧愿用 TypeScript。

但是回到Javascript,不知道你有沒有發現，除了相關庫和框架外，我們在注釋函數和類的時候一直在用 JSDoc 描述函數入口和返回處的格式對比。如果文檔注釋可以用來驗證格式的話就太好了。正如你所理解的，它離不開編譯器。但是，我們可以使用依賴于Jascript文檔表達式的庫。幸運的是， byContract 就是這樣的庫。 byContract 的語法看起來像這樣：

/**
 * @param {number|string} sum
 * @param {Object.<string, string>} dictionary
 * @param {function} transformer
 * @returns {HTMLElement}
 */
function makeTotalElement( sum, dictionary, transformer ) {
  // Test if the contract is respected at entry point
  byContract( arguments, [ "number|string", "Object.<string, string>", "function" ] );
  // ..
  var res = document.createElement( "div" );
  // ..
  // Test if the contract is respected at exit point
  return byContract( res, "HTMLElement" );
}
// Test it
var el1 = makeTotalElement( 100, { foo: "foo" }, function(){}); // ok
var el2 = makeTotalElement( 100, { foo: 100 }, function(){}); // exception

如你所見，我們可以從文檔注釋處復制/粘貼指定的類型到 byContract 然后進行對比，就這么簡單。下面我們更仔細地檢查以下。 byContract 可以被當做UMD模塊（AMD或者CommonJS）或者全局變量來訪問。我們可以把值 /Javascript 文檔表達式作為一對參數傳給 byContract

byContract( value, "JSDOC-EXPRESSION" );

或者值列表對應文檔表達式列表作為一對參數也可以：

byContract( [ value, value ], [ "JSDOC-EXPRESSION", "JSDOC-EXPRESSION" ] );

byContract 會檢測傳入的值，如果和對應的 JSDoc 表達式格式不一致，就會拋出帶有像 ` 傳入的值違反類型NaN`信息的 byContract.Exception 異常。

在最簡單的案例中，byContract用來驗證如 `array`, `string`, `undefined`, `boolean`, `function`, `nan`, `null`, `number`, `object`, `regexp`之類的原型類型：

byContract( true, "boolean" );

當我們需要允許輸入值在一個指定類型列表中的時候，可以使用 type union 。

byContract( 100, "string|number|boolean" );

一個函數可以有必填的參數，也可以有可選參數。默認情況下，參數在和原型類型做對比的時候是必填的。但是用'='修飾符我們就可以設置成可選類型。所以 byContract 處理如 `number=` 這樣的表達式時候，會轉為 `number|undefined`

function foo( bar, baz ) {
  byContract( arguments, [ "number=", "string=" ] );
}

下面是Js文檔中 nullable/non-nullable types （可空/不可空類型）：

byContract( 42, "?number" ); // a number or null.
byContract( 42, "!number" ); // a number, but never null.

當然，我們可以用接口來做比較。這樣我們就可以引用作用域范圍內任何可用的對象，包括Javascript內置接口：

var instance = new Date();
byContract( instance, "Date" );
byContract( view, "Backbone.NativeView" );
byContract( e, "Event" );

對于數組和對象，我們可以有選擇性地驗證其內容。比如可以驗證所有數組的值必須是數字或者所有的對象的鍵和值是字符串類型：

byContract( [ 1, 1 ], "Array.<number>" );
byContract( { foo: "foo", bar: "bar" }, "Object.<string, string>" );

以上的驗證對線性數據結構有用，其他情況下就不起作用了。所以同樣的，我們可以創建一個 type definition （類型定義）來描述對象的內容（參考byContract類型定義）然后在后面作為一個類型引用它即可。

byContract.typedef( "Hero", {
  hasSuperhumanStrength: "boolean",
  hasWaterbreathing: "boolean"
});
var superman = {
  hasSuperhumanStrength: true,
  hasWaterbreathing: false
};
byContract( superman, "Hero" );

這個示例定義了一個'Hero'類型來表示一個對象/命名空間，必須有boolean類型的 `hasSuperhumanStrength`和`hasWaterbreathing` 屬性。

所有的方法都通過類型驗證傳入的值，但是不變的量（常量）呢？我們可以用一個自定義類型來包裝類型約束。比如說檢測字符串是不是一個郵件地址類型，我們可以增加這樣的驗證：

byContract.is.email = function( val ){
  var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test( val );
}
byContract( "john.snow@got.com", "email" ); // ok
byContract( "bla-bla", "email" ); // Exception!

事實上，你很可能不要用事件來寫驗證函數，而是用外部庫（類似 validator ）代替：

byContract.is.email = validator.isEmail;

驗證邏輯取決于開發環境。使用 byContract，我們可以用全局觸發器來禁用驗證邏輯：

if ( env !== "dev" ) {
  byContract.isEnabled = false;
}

byContract 是一個很小的驗證插件（壓縮文件大約1KB大小），你可以在你的Javascript代碼中使用它從而得到對比編程設計模式的好處。

來自：https://www.oschina.net/translate/guarding-functions-in-javascript

本文由用戶 MajorREVG 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1476409793164.html

JavaScript開發 JavaScript

守護 Javascript 中的函數參數

相關經驗

相關資訊

相關文檔

目錄