设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

守护Javascript中的函数参数

2016-10-17 23:18| 发布者: joejoe0332| 查看: 988| 评论: 0|原作者: oschina|来自: oschina

摘要: 作为开发者,我们花费许多时间来调试,尤其是在发现问题来源方面。开发工具指导我们追踪调用栈,但是追踪过程仍然相当耗时,尤其在遇到级联异步调用的时候。这一问题在很早以前就被发现了。 ...

作为开发者,我们花费许多时间来调试,尤其是在发现问题来源方面。开发工具指导我们追踪调用栈,但是追踪过程仍然相当耗时,尤其在遇到级联异步调用的时候。这一问题在很早以前就被发现了。

假设我们有一个从不同文档结构中搜索包含指定字符串的元素的函数。我们使用以下看起来合法的调用:

grep( "substring", tree );

但是我们并没有得到期望的结果。按照以往的经验,我们会花费一些时间来检查给定的树形文档结构,时间有可能会很长。然后我们很可能会做其他的检查,但是在最终,我们会从函数代码中发现传入的参数顺序反了。这样看来的话,我们只要关注函数的参数,就不会发生上面的错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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语言有类型提示:

1
2
3
<?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(数据库计算机),强大且灵活:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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 提供的语法很符合我的要求:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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(100));

除了不是Javascript之外,看起来都很不错。如果你需要使用的话,必须用Contractual或者Babel Contracts把源代码编译成Javascript。我不反对跨语言编译器,但是如果让我选择的话,我宁愿用TypeScript。

但是回到Javascript,不知道你有没有发现,除了相关库和框架外,我们在注释函数和类的时候一直在用JSDoc描述函数入口和返回处的格式对比。如果文档注释可以用来验证格式的话就太好了。正如你所理解的,它离不开编译器。但是,我们可以使用依赖于Jascript文档表达式的库。幸运的是,byContract就是这样的库。byContract的语法看起来像这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 * @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`

 

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

下面是Js文档中nullable/non-nullable types(可空/不可空类型):
 

 

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

当然,我们可以用接口来做比较。这样我们就可以引用作用域范围内任何可用的对象,包括Javascript内置接口:
 

 

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

对于数组和对象,我们可以有选择性地验证其内容。比如可以验证所有数组的值必须是数字或者所有的对象的键和值是字符串类型:
 

 

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

以上的验证对线性数据结构有用,其他情况下就不起作用了。所以同样的,我们可以创建一个type definition(类型定义)来描述对象的内容(参考byContract类型定义)然后在后面作为一个类型引用它即可。
 

 

1
2
3
4
5
6
7
8
9
byContract.typedef( "Hero", {
  hasSuperhumanStrength: "boolean",
  hasWaterbreathing: "boolean"
});
var superman = {
  hasSuperhumanStrength: true,
  hasWaterbreathing: false
};
byContract( superman, "Hero" );

这个示例定义了一个'Hero'类型来表示一个对象/命名空间,必须有boolean类型的`hasSuperhumanStrength`和`hasWaterbreathing`属性。
 

所有的方法都通过类型验证传入的值,但是不变的量(常量)呢?我们可以用一个自定义类型来包装类型约束。比如说检测字符串是不是一个邮件地址类型,我们可以增加这样的验证:

1
2
3
4
5
6
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,我们可以用全局触发器来禁用验证逻辑

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

byContract是一个很小的验证插件(压缩文件大约1KB大小),你可以在你的Javascript代码中使用它从而得到对比编程设计模式的好处。

本文标题:守护 Javascript 中的函数参数 
本文地址:
https://www.oschina.net/translate/guarding-functions-in-javascript
参与翻译:
花间_拾零


酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部