2018-4-26 seo達(dá)人
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
例2很明顯,這個(gè)過(guò)程非常的‘黑’,如果你想知道object包含什么數(shù)據(jù)的話,可以:
被上述步驟折磨完之后,終于能真正的寫點(diǎn)代碼了,但是依舊得非常小心,因?yàn)檫@里還有另一個(gè)函數(shù):fn2
在修改代碼的時(shí)候,得保證result這個(gè)結(jié)果沒(méi)有被影響,那么如何保證呢?
很簡(jiǎn)單,重復(fù)上面的步驟,搞清楚result包含的數(shù)據(jù),在測(cè)試的時(shí)候確保其數(shù)據(jù)跟原先的相同。
動(dòng)態(tài)類型一時(shí)爽,代碼重構(gòu)火葬場(chǎng)
是時(shí)候徹底優(yōu)化這個(gè)煩人的問(wèn)題了
其實(shí)問(wèn)題的根源就是因?yàn)閖avascript太靈活了,在代碼運(yùn)行期間幾乎可以做任何的修改,
沒(méi)有東西可以在代碼層面保證 某個(gè)變量,某個(gè)函數(shù) 跟預(yù)期的一致。
所以要加入類型系統(tǒng)來(lái)確保代碼的可靠性,在后期維護(hù)的時(shí)候同樣能夠傳達(dá)出有效的信息
Flow是個(gè)JavaScript的靜態(tài)類型檢查工具,由Facebook出品的開(kāi)源碼項(xiàng)目,問(wèn)世只有兩三年,是個(gè)相當(dāng)年輕的項(xiàng)目。簡(jiǎn)單來(lái)說(shuō),它是對(duì)比TypeScript語(yǔ)言的解決方式。
會(huì)有這類解決方案,起因是JavaScript是一種弱(動(dòng)態(tài))數(shù)據(jù)類型的語(yǔ)言,弱(動(dòng)態(tài))數(shù)據(jù)類型代表在代碼中,變量或常量會(huì)自動(dòng)依照賦值變更數(shù)據(jù)類型,而且類型種類也很少,這是直譯式腳本語(yǔ)言的常見(jiàn)特性,但有可能是優(yōu)點(diǎn)也是很大的缺點(diǎn)。優(yōu)點(diǎn)是容易學(xué)習(xí)與使用,缺點(diǎn)是像開(kāi)發(fā)者經(jīng)常會(huì)因?yàn)橘x值或傳值的類型錯(cuò)誤,造成不如預(yù)期的結(jié)果。有些時(shí)候在使用框架或函數(shù)庫(kù)時(shí),如果沒(méi)有仔細(xì)看文件,亦或是文件寫得不清不楚,也容易造成誤用的情況。
這個(gè)缺點(diǎn)在應(yīng)用規(guī)?;瘯r(shí),會(huì)顯得更加嚴(yán)重。我們?cè)趫F(tuán)隊(duì)開(kāi)發(fā)協(xié)同時(shí),一般都是通過(guò)統(tǒng)一的代碼規(guī)范,來(lái)降低這個(gè)問(wèn)題的發(fā)生,但
TypeScript自然有它的市場(chǎng),但它有一些明顯的問(wèn)題:
*所以許多現(xiàn)行的開(kāi)源碼函數(shù)庫(kù)或框架,并不會(huì)直接使用TypeScript作為代碼的語(yǔ)言,另一方面因?yàn)門ypeScript并非是普及到一定程度的語(yǔ)言。
現(xiàn)在,Flow提供了另一個(gè)新的選項(xiàng),它是一種強(qiáng)(靜態(tài))類型的輔助
相較于TypeScript是另外重新制定一套語(yǔ)言,最后再經(jīng)過(guò)編譯為JavaScript代碼來(lái)運(yùn)行。Flow走的則是非強(qiáng)制與非侵入性的路線。
選擇flow.js工具而不選擇TypeScript強(qiáng)類型語(yǔ)言的原因顯而易見(jiàn)?
這種類型不符的情況在代碼中非常容易發(fā)生,例如上面的例1:
x這個(gè)傳參,我們?cè)诤瘮?shù)聲明時(shí)希望它是個(gè)數(shù)字類型,但最后使用調(diào)用函數(shù)時(shí)則用了字符串類型。最后的結(jié)果會(huì)是什么嗎? “Hello!10”,這是因?yàn)榧犹?hào)(+)在JavaScript語(yǔ)言中,除了作為數(shù)字的加運(yùn)算外,也可以當(dāng)作字符串的連接運(yùn)算。想當(dāng)然這并不是我們想要的結(jié)果。
聰明如你應(yīng)該會(huì)想要用類型來(lái)當(dāng)傳參的識(shí)別名,容易一眼看出傳參要的是什么類型,像下面這樣:
利用Flow類型的定義方式,來(lái)解決這個(gè)小案例的問(wèn)題,可以改寫為像下面的代碼:
當(dāng)使用非數(shù)字類型的值作為傳入值時(shí),就會(huì)出現(xiàn)由Flow工具發(fā)出的警告消息,像下面這樣:
[flow] Cannot call
如果是要允許多種類型也是很容易可以加標(biāo)記的,假使這個(gè)函數(shù)可以使用布爾與數(shù)字類型,但返回可以是數(shù)字或字符串,就像下面這樣修改過(guò):
在多人協(xié)同開(kāi)發(fā)某個(gè)有規(guī)模的JavaScript應(yīng)用時(shí),這種類型的輸出輸入問(wèn)題就會(huì)很常遇見(jiàn)。如果利用Flow工具的檢查,可以避免掉許多不必要的類型問(wèn)題。
可能你會(huì)認(rèn)為Flow工具只能運(yùn)用在小型代碼中,其實(shí)不然,Vue源碼中大量使用flowjs中類型檢測(cè):
“javascript.validate.enable”: false
4 . babel插件在編譯時(shí)就會(huì)一并轉(zhuǎn)換Flow標(biāo)記
Flow支持原始數(shù)據(jù)類型,如下面的列表:
如果你在React class里面使用了React.PropTypes規(guī)范,你可以對(duì)JSX上的attributes做靜態(tài)類型檢查:
更多關(guān)于支持React的細(xì)節(jié) 請(qǐng)移步 https://flow.org/en/docs/react/components/
看一段常見(jiàn)代碼:
…
知乎傳送門:為什么說(shuō)“動(dòng)態(tài)類型一時(shí)爽,代碼重構(gòu)火葬場(chǎng)”
引入類型系統(tǒng)
Flow & TypeScript
JS語(yǔ)言本身
無(wú)法有效阻止這些問(wèn)題。TypeScript這樣的強(qiáng)(靜態(tài))類型的JavaScript超集語(yǔ)言就開(kāi)始流行,用嚴(yán)格的角度,以JavaScript語(yǔ)言為基底,來(lái)重新打造另一套具有強(qiáng)(靜態(tài))類型特性的語(yǔ)言,就如同Java或C#這些語(yǔ)言一樣,這也是為什么TypeScript稱自己是企業(yè)級(jí)的開(kāi)發(fā)JavaScript解決方案。
TypeScript存在的問(wèn)題
當(dāng)然TypeScript也是個(gè)活躍的開(kāi)源碼項(xiàng)目,發(fā)展到現(xiàn)在也有一段時(shí)間,它的背后有微軟公司的支持,全新打造過(guò)的Angular2框架中(由Google主導(dǎo)),也采用了TypeScript作為基礎(chǔ)的開(kāi)發(fā)語(yǔ)言*。
Flow你的新選擇
檢查工具
。Flow的功能是讓現(xiàn)有的JavaScript語(yǔ)法可以事先作類型的聲明(定義),在開(kāi)發(fā)過(guò)程中進(jìn)行自動(dòng)檢查
,當(dāng)然在最后編譯時(shí),一樣可以用babel工具來(lái)移除這些標(biāo)記。
Flow的優(yōu)點(diǎn)
輕
且易學(xué)易用
它的學(xué)習(xí)曲線沒(méi)有TypeScript來(lái)得高,雖然內(nèi)容也很多,但半天學(xué)個(gè)大概,就可以漸進(jìn)式地開(kāi)始使用
檢查工具
不是新的程序語(yǔ)言或超集語(yǔ)言,所以它可以與各種現(xiàn)有的JavaScript代碼兼容,如果你哪天不想用了,就去除掉標(biāo)記就是回到原來(lái)的代碼,沒(méi)什么負(fù)擔(dān)
so
flow.js對(duì)工程的侵入性很小,無(wú)需大量的額外工作就能使用起來(lái)
從一個(gè)小例子演示
foo
with 'hi'
bound to x
because string 1 is incompatible with number 2. (a.getting-start.js:6:5)
真實(shí)案例
Flow使用
1. flow init
2. // @flow 或 /* @flow */
3. IDE插件 或 flow check
在Visual Studio Code中因?yàn)樗鼉?nèi)建TypeScript與JavaScript的檢查功能,如果要使用Flow工具來(lái)作類型檢查,需要在用戶設(shè)置中,加上下面這行設(shè)置值以免沖突:
Flow支持的數(shù)據(jù)類型
類型別名&常見(jiàn)語(yǔ)法
React中的應(yīng)用
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com