用flow.js提升前端開發(fā)的體驗(yàn)

acrazing 發(fā)布于2019-08-20 11:13 / 2485人閱讀

摘要：聲明帶類型的函數(shù)這里是聲明一個(gè)函數(shù)，規(guī)定了自己需要的參數(shù)類型和返回值類型。同理，箭頭函數(shù)的寫法這里是聲明變量，規(guī)定了它所需的函數(shù)的特征參數(shù)返回值對(duì)比下面這種寫法兩者的聲明的地方不一樣，造成的意義也不同。

在小心翼翼維護(hù)項(xiàng)目代碼的時(shí)候經(jīng)常會(huì)看到這種代碼

function main(){
   //fn1函數(shù)獲取了一個(gè)數(shù)據(jù)
   var object = fn1()
   //fn2根據(jù)獲數(shù)據(jù)，產(chǎn)生一個(gè)結(jié)果
   var result = fn2(object)

   return result
}

很明顯，這個(gè)過(guò)程非常的‘黑’，如果你想知道object包含什么數(shù)據(jù)的話，可以

打印一下 console.log(object)

查看fn1的注釋，并且保佑它的注釋是正確，全面的

或結(jié)合1，2，然后仔細(xì)查看fn1的源碼，希望它不是很復(fù)雜

被上述步驟折磨完之后，終于能真正的寫點(diǎn)代碼了，但是依舊得非常小心，因?yàn)檫@里還有另一個(gè)函數(shù)：fn2。

在修改代碼的時(shí)候，得保證result這個(gè)結(jié)果沒有被影響，那么如何保證呢？

很簡(jiǎn)單，重復(fù)上面的步驟，搞清楚result包含的數(shù)據(jù)，在測(cè)試的時(shí)候確保其數(shù)據(jù)跟原先的相同。

…

是時(shí)候徹底優(yōu)化這個(gè)煩人的問(wèn)題了。

引入類型系統(tǒng)

其實(shí)問(wèn)題的根源就是因?yàn)閖avascript太靈活了，在代碼運(yùn)行期間幾乎可以做任何的修改，

沒有東西可以在代碼運(yùn)行前就保證某個(gè)變量，某個(gè)函數(shù) 跟預(yù)期的一致。

所以要加入類型系統(tǒng)來(lái)確保代碼的可靠性，在后期維護(hù)的時(shí)候同樣能夠傳達(dá)出有效的信息。

facebook出品的flow.js 做的就是這種事情。

使用flow.js

git 倉(cāng)庫(kù)：https://github.com/facebook/flow
flow 官方文檔：https://flowtype.org/docs/qui...

方便體驗(yàn)，這里有一個(gè)搭好的case集合

git clone [email protected]:JavascriptTips/flow-examples.git

基礎(chǔ)類型檢測(cè)

flow.js 中定義了的5種最簡(jiǎn)單的類型,（warning：都是小寫），其中void對(duì)應(yīng)js中的undefined

boolean

number

string

null

void

要想加入到j(luò)avascript中，只需要在關(guān)鍵的地方聲明想要的類型。其它時(shí)間我們的代碼還是熟悉的javascript，代碼如下（flow-examples工程中也有對(duì)應(yīng)js文件）：

//flow-examples/src/primitives.js

//在文件的頭部加入,用注釋加入 `@flow` 聲明，這樣flow.js才會(huì)檢查這個(gè)文件。
//@flow

//在聲明變量時(shí)，在變量名加入 `:[Type]` 來(lái)表明變量的類型,其它類型同理。
//這個(gè)語(yǔ)法非常像flash的ActionScript，咦？好像暴露了什么。
var num:number = 1;
var str:string = "a";

//當(dāng)然，也可以不加類型，這樣就跟原來(lái)的js一樣了。
var variable = "zz";

復(fù)雜類型檢測(cè)

主要有：

Object

Array

函數(shù)

自定義Class

這幾個(gè)類型比較復(fù)雜，而且可以相互嵌套。在flow.js中這幾種類型有非常多的檢查語(yǔ)法，在這里簡(jiǎn)單的展示幾項(xiàng)，具體見代碼代碼和官方文檔。

對(duì)象：Object

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

//Object大寫的O
var o:Object = {
  hello:"h"
};

//聲明了Object的key
var o2:{key:string} = {
  key:"z233"
};

數(shù)組：Array

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


//基于基本類似的數(shù)組，數(shù)組內(nèi)都是相同類型
var numberArr:number[] = [12,3,4,5,2];
//另一個(gè)寫法
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)];


//數(shù)組內(nèi)包含各個(gè)不同的類型數(shù)據(jù)
//第4個(gè)原素沒有聲明，則可以是任意類型
var arr:[number,string,boolean] = [1,"a",true,function(){},];

函數(shù)

函數(shù)比較特殊，因?yàn)楹瘮?shù)的核心在于參數(shù)和返回值，函數(shù)作文類型本身并沒有作用。

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

/**
 * 聲明帶類型的函數(shù)
 * 這里是聲明一個(gè)函數(shù)fn，規(guī)定了自己需要的參數(shù)類型和返回值類型。
 */
function fn(arg:number,arg2:string):Object{
  return {
    arg,
    arg2
  }
}
//同理，ES2015箭頭函數(shù)的寫法
var fn2 = (arg:number,arg2:string):Object => {
  return {
    arg,
    arg2
  }
}

/**
 * 這里是聲明變量fn2，規(guī)定了它所需的函數(shù)的特征:
 * 參數(shù)： (arg:string,arg2:number)
 * 返回值：Object
 */
var fn3:(arg:string,arg2:number)=>Object = function(){
  return {}
}

/**
 * 對(duì)比下面這種寫法,
 * 兩者的聲明的地方不一樣，造成的意義也不同。
 */
var fn4 = function(arg:string,arg2:Object):number{
  return 1;
}

自定義的class

聲明一個(gè)自定義類，然后用法如同基本類型

//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語(yǔ)法后，正常的js引擎肯定是不能跑的。

這時(shí)就要借助萬(wàn)能的babel編譯這些js。

1.如果是正經(jīng)的帶webpack + babel 的前端項(xiàng)目,可以無(wú)縫集成，加入babel插件即可：

babel-plugin-transform-flow-strip-types

2.如果只是跑一下測(cè)試這些js，可以直接在flow-examples工程中，如下：

npm run fnode src/object.js

其它跑起來(lái)的方法，可以在官方文檔查看

結(jié)論

這里只是介紹了flow.js一部分的特性，在引入flow.js之后，js只需要很小的改動(dòng)就能得到增強(qiáng)，在關(guān)鍵的地方確保邏輯的準(zhǔn)確性。

更進(jìn)一步，再結(jié)合js的函數(shù)式編程特性，以類型和函數(shù)驅(qū)動(dòng)開發(fā)，感覺很cool.

一點(diǎn)微小的疑問(wèn)

這里2個(gè)小問(wèn)題，

為什么是flow.js 而不是其它編譯到j(luò)s的強(qiáng)類型語(yǔ)言，如TypeScript ? 
答：我非常喜歡js的靈活性，它為編程帶來(lái)極大便捷。而且flow.js對(duì)工程的侵入性很小，無(wú)需大量的額外工作就能使用起來(lái)。

為什么不加強(qiáng)注釋，完善注釋，而是再加入一個(gè)工具？
答：因?yàn)閷懽⑨尯軣?，并且有無(wú)注釋不會(huì)影響代碼執(zhí)行。flow.js則是一種基本保障，確保檢查無(wú)誤才能運(yùn)行。

云服務(wù)器 GPU云服務(wù)器大前端體驗(yàn)開發(fā) 前端開發(fā)用什么前端開發(fā) 前端開發(fā)用什么語(yǔ)言前端開發(fā)用什么工具

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80454.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

acrazing

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 1995·2023-04-26 01:59
Friendhosting：九機(jī)房4.5折促銷$15/年起，100Mbps帶寬，不限制流量，可自定義

閱讀 3296·2021-10-11 11:07
如何選擇網(wǎng)絡(luò)服務(wù)器主機(jī)1核2g-云服務(wù)器2核2g夠用嗎？

閱讀 3333·2021-09-22 15:43
朋友當(dāng)初選擇測(cè)試行業(yè)大家都嘲笑他，如今月薪17K實(shí)力打我的臉...

閱讀 3414·2021-09-02 15:21
衡天云：香港站群服務(wù)器低至1010元/月;香港服務(wù)器低至499元/月,新人專享價(jià)

閱讀 2607·2021-09-01 10:49
CSS3-transition

閱讀 929·2019-08-29 15:15
微信小程序?qū)崙?zhàn)（一）之仿美麗說(shuō)

閱讀 3121·2019-08-29 13:59
一個(gè)類似于京東Plus權(quán)益介紹的小功能

閱讀 2858·2019-08-26 13:36

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

用flow.js提升前端開發(fā)的體驗(yàn)

對(duì)象：Object

數(shù)組：Array

函數(shù)

自定義的class

相關(guān)文章

類型系統(tǒng)-前端進(jìn)化的里程碑

JS 靜態(tài)類型檢查工具 Flow

**前端進(jìn)階（5） - js 擴(kuò)展：靜態(tài)類型檢查（facebook flow）**

前端性能優(yōu)化

Flow - JS靜態(tài)類型檢查工具

發(fā)表評(píng)論

0條評(píng)論

acrazing

男|高級(jí)講師

TA的文章

tensorflow

Friendhosting：九機(jī)房4.5折促銷$15/年起，100Mbps帶寬，不限制流量，可自定義

如何選擇網(wǎng)絡(luò)服務(wù)器主機(jī)1核2g-云服務(wù)器2核2g夠用嗎？

朋友當(dāng)初選擇測(cè)試行業(yè)大家都嘲笑他，如今月薪17K實(shí)力打我的臉...

衡天云：香港站群服務(wù)器低至1010元/月;香港服務(wù)器低至499元/月,新人專享價(jià)

CSS3-transition

微信小程序?qū)崙?zhàn)（一）之仿美麗說(shuō)

一個(gè)類似于京東Plus權(quán)益介紹的小功能

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

用flow.js提升前端開發(fā)的體驗(yàn)

對(duì)象：Object

數(shù)組：Array

函數(shù)

自定義的class

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！