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

acrazing 发布于2019-08-20 11:13 / 2364人阅读

摘要：声明带类型的函数这里是声明一个函数，规定了自己需要的参数类型和返回值类型。同理，箭头函数的写法这里是声明变量，规定了它所需的函数的特征参数返回值对比下面这种写法两者的声明的地方不一样，造成的意义也不同。

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

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

   return result
}

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

打印一下 console.log(object)

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

或结合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 = [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则是一种基本保障，确保检查无误才能运行。

云服务器专线服务大前端体验开发前端开发用什么前端开发前端开发用什么语言前端开发用什么工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80454.html

类型系统-前端进化的里程碑

摘要：这些优势，其实都是类型系统所带来的强类型语言所具有的开发优势，无论是在开发体验还是后期项目维护上，都要优于目前的。大半夜的JavaScript Weekly发来贺电：TypeScript 2.0 Final Released！没错，继Angular2发布之后，TypeScript今天也发布了2.0版本，这不禁让我浮想一番。如果要说TS和JS最明显的差别，我想一定是Type Syst...

wangzy2019 2019-08-20 11:14 评论0 收藏0
JS 静态类型检查工具 Flow

摘要：本文主要介绍了解决作为弱类型语言没有类型检查痛点的静态类型检查工具，并且介绍了在中使用的方法，最后介绍了一些常用的语法。本文主要介绍了解决JS作为弱类型语言没有类型检查痛点的静态类型检查工具 Flow ，并且介绍了在WebStorm中使用Flow的方法，最后介绍了一些常用的Flow语法。 1. 简介 JS作为一种脚本语言是没有类型检测的，这个特点有时候用着很方便，但在一个较大的项目中...

CloudDeveloper 2019-08-22 16:17 评论0 收藏0
前端进阶（5） - js 扩展：静态类型检查（facebook flow）

摘要：扩展静态类型检查语言与系列等语言有一点很大的不同，就是语言是弱类型语言。但其实很多开发人员还是比较喜欢用来开发项目，所以开发出来帮助语言扩展静态类型检查功能，规避上面提到的问题。 js 扩展：静态类型检查（facebook flow） js 语言与 java、C 系列等语言有一点很大的不同，就是 js 语言是弱类型语言。js 语言的这个特性可能让大家觉得 js 很自由，没有强制性的约束...

孙淑建 2019-08-23 11:26 评论0 收藏0
前端性能优化

摘要：端优谈谈关于前端的缓存的问题我们都知道对页面进行缓存能够有利于减少请求发送，从而达到对页面的优化。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。这种方式主要解决了浅谈前端中的过早优化问题过早优化是万恶之源。优化向：单页应用多路由预渲染指南 Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一...

Dean 2019-08-21 18:19 评论0 收藏0
Flow - JS静态类型检查工具

摘要：介绍是个的静态类型检查工具，由出品的开源码项目，问世只有一年多，是个相当年轻的项目。现在，提供了另一个新的选项，它是一种强静态类型的辅助检查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目标是提供一些Flow工具的介绍与使用建议。Flow本质上也只是个检查工具，它并不会自动修正代码中的错误，也不会强制...

seanHai 2019-08-20 13:39 评论0 收藏0