用flow.js提升前端开发的体验

在小心翼翼维护项目代码的时候经常会看到这种代码


function main(){
   //fn1函数获取了一个数据
   var object = fn1()
   //fn2根据获数据,产生一个结果
   var result = fn2(object)

   return result
}

很明显,这个过程非常的‘黑’,如果你想知道object包含什么数据的话,可以

  1. 打印一下 console.log(object)

  2. 查看fn1的注释,并且保佑它的注释是正确,全面的

  3. 或结合1,2,然后仔细查看fn1的源码,希望它不是很复杂

被上述步骤折磨完之后,终于能真正的写点代码了,但是依旧得非常小心,因为这里还有另一个函数:fn2。

在修改代码的时候,得保证result这个结果没有被影响,那么如何保证呢?

很简单,重复上面的步骤,搞清楚result包含的数据,在测试的时候确保其数据跟原先的相同。

是时候彻底优化这个烦人的问题了。

引入类型系统

其实问题的根源就是因为javascript太灵活了,在代码运行期间几乎可以做任何的修改,

没有东西可以在代码运行前就保证 某个变量,某个函数 跟预期的一致。

所以要加入类型系统来确保代码的可靠性,在后期维护的时候同样能够传达出有效的信息。

facebook出品的flow.js 做的就是这种事情。

使用flow.js

git 仓库:https://github.com/facebook/flow
flow 官方文档:https://flowtype.org/docs/qui...

方便体验,这里有一个搭好的case集合

git clone git@github.com:JavascriptTips/flow-examples.git

基础类型检测

flow.js 中定义了的5种最简单的类型,(warning:都是小写),其中void对应js中的undefined

  • boolean

  • number

  • string

  • null

  • void

要想加入到javascript中,只需要在关键的地方声明想要的类型。其它时间我们的代码还是熟悉的javascript,代码如下(flow-examples工程中也有对应js文件):

//flow-examples/src/primitives.js

//在文件的头部加入,用注释加入 `@flow` 声明,这样flow.js才会检查这个文件。
//@flow

//在声明变量时,在变量名加入 `:[Type]` 来表明变量的类型,其它类型同理。
//这个语法非常像flash的ActionScript,咦?好像暴露了什么。
var num:number = 1;
var str:string = 'a';

//当然,也可以不加类型,这样就跟原来的js一样了。
var variable = 'zz';

复杂类型检测

主要有:

  • Object

  • Array

  • 函数

  • 自定义Class

这几个类型比较复杂,而且可以相互嵌套。在flow.js中这几种类型有非常多的检查语法,在这里简单的展示几项,具体见代码代码和官方文档。

对象:Object
//flow-examples/src/object.js
//@flow

//Object大写的O
var o:Object = {
  hello:'h'
};

//声明了Object的key
var o2:{key:string} = {
  key:'z233'
};
数组:Array
//flow-examples/src/array.js
//@flow


//基于基本类似的数组,数组内都是相同类型
var numberArr:number[] = [12,3,4,5,2];
//另一个写法
var numberAr2r:Array<number> = [12,3,2,3];

var stringArr:string[] = ['12','a','cc'];
var booleanArr:boolean[] = [true,true,false];
var nullArr:null[] = [null,null,null];
var voidArr:void[] = [ , , undefined,void(0)];


//数组内包含各个不同的类型数据
//第4个原素没有声明,则可以是任意类型
var arr:[number,string,boolean] = [1,'a',true,function(){},];
函数

函数比较特殊,因为函数的核心在于参数和返回值,函数作文类型本身并没有作用。

//flow-examples/src/function.js
//@flow

/**
 * 声明带类型的函数
 * 这里是声明一个函数fn,规定了自己需要的参数类型和返回值类型。
 */
function fn(arg:number,arg2:string):Object{
  return {
    arg,
    arg2
  }
}
//同理,ES2015箭头函数的写法
var fn2 = (arg:number,arg2:string):Object => {
  return {
    arg,
    arg2
  }
}

/**
 * 这里是声明变量fn2,规定了它所需的函数的特征:
 * 参数: (arg:string,arg2:number)
 * 返回值:Object
 */
var fn3:(arg:string,arg2:number)=>Object = function(){
  return {}
}

/**
 * 对比下面这种写法,
 * 两者的声明的地方不一样,造成的意义也不同。
 */
var fn4 = function(arg:string,arg2:Object):number{
  return 1;
}
自定义的class

声明一个自定义类,然后用法如同基本类型

//flow-examples/src/class.js
//@flow

class MyClass{
  name:string;
  constructor(n){
    this.name = n;
  }
}

var myClass : MyClass = new MyClass('abc');

引入flow.js

可以看到加入flow.js语法后,正常的js引擎肯定是不能跑的。

这时就要借助万能的babel编译这些js。

1.如果是正经的带webpack + babel 的前端项目,可以无缝集成,加入babel插件即可:

babel-plugin-transform-flow-strip-types

2.如果只是跑一下测试这些js,可以直接在flow-examples工程中,如下:

npm run fnode src/object.js

其它跑起来的方法,可以在官方文档查看

结论

这里只是介绍了flow.js一部分的特性,在引入flow.js之后,js只需要很小的改动就能得到增强,在关键的地方确保逻辑的准确性。

更进一步,再结合js的函数式编程特性,以类型和函数驱动开发,感觉很cool.

一点微小的疑问

这里2个小问题,

为什么是flow.js 而不是其它编译到js的强类型语言,如TypeScript ?

答:我非常喜欢js的灵活性,它为编程带来极大便捷。而且flow.js对工程的侵入性很小,无需大量的额外工作就能使用起来。

为什么不加强注释,完善注释,而是再加入一个工具?
答:因为写注释很烦,并且有无注释不会影响代码执行。flow.js则是一种基本保障,确保检查无误才能运行。

阅读 14.2k

推荐阅读
前端开发小记
用户专栏

某没节操前端的开发小记,专注前端开发和nodejs

11 人关注
5 篇文章
专栏主页