圖片決議
FLOW介紹
- Flow 是 facebook 出品的 JavaScript 靜態型別檢查工具，Vue.js 的原始碼利用了 Flow 做了靜態型別檢查，所以了解 Flow 有助于我們閱讀原始碼，
FLOW的作用
- JavaScript是一門動態型別語言，很靈活，容易寫出有隱患的代碼，在編譯期能夠編譯通過，在運行期間出現BUG
- 型別檢查，就是在編譯期盡早發現（由型別錯誤引起的）bug，又不影響代碼運行（不需要運行時動態檢查型別），使撰寫 JavaScript 具有和撰寫 Java 等強型別語言相近的體驗
- 靜態型別檢查
- Babel 和 ESLint 都有對應的 Flow 插件以支持語法，完全沿用現有的構建配置，非常小成本的改動就可以擁有靜態型別檢查的能力
FLOW的作業機制
型別檢查的兩種方式：
- 型別推斷：通過變數的使用背景關系來推斷出變數型別，然后根據這些推斷來檢查型別
- 型別注釋：事先注釋好我們期待的型別，Flow 會基于這些注釋來判斷
型別推斷
/*@flow*/
function split(str) {
return str.split(' ')
}
split(11)
通過代碼，分割字串，那么自動推斷出必須是string型別
型別注釋
/*@flow*/
function add(x, y){
return x + y
}
add('Hello', 11)
//由于沒有型別注釋，因此add方法的引數可以是字串或者數字
/*@flow*/
function add(x: number, y: number): number {
return x + y
}
add('Hello', 11)
//編譯報錯，因為已經加了型別注釋，引數必須是number型別
//陣列
/*@flow*/
var arr: Array<number> = [1, 2, 3]
arr.push('Hello')
//編譯報錯，因為已經加了型別注釋，添加陣列的元素必須是number型別
//類和物件
/*@flow*/
class Bar {
x: string; // x 是字串
y: string | number; // y 可以是字串或者數字
z: boolean;
constructor(x: string, y: string | number) {
this.x = x
this.y = y
this.z = false
}
}
var bar: Bar = new Bar('hello', 4)
var obj: { a: string, b: number, c: Array<string>, d: Bar } = {
a: 'hello',
b: 11,
c: ['hello', 'world'],
d: new Bar('hello', 3)
}
// 類的型別注釋格式如上，可以對類自身的屬性做型別檢查，也可以對建構式的引數做型別檢查，這里需要注意的是，屬性 y 的型別中間用 | 做間隔，表示 y 的型別即可以是字串也可以是數字，
// 物件的注釋型別類似于類，需要指定物件屬性的型別，
//Null
/*@flow*/
var foo: ?string = null
//等等
FLOW在VUE中的應用
- 在 Vue.js 的主目錄下有 .flowconfig 檔案， 它是 Flow 的組態檔，感興趣的同學可以看官方檔案，這其中的 [libs] 部分用來描述包含指定庫定義的目錄，默認是名為 flow-typed 的目錄，
- 這里 [libs] 配置的是 flow，表示指定的庫定義都在 flow 檔案夾內，我們打開這個目錄，會發現檔案如下：
flow
├── compiler.js # 編譯相關
├── component.js # 組件資料結構
├── global-api.js # Global API 結構
├── modules.js # 第三方庫定義
├── options.js # 選項相關
├── ssr.js # 服務端渲染相關
├── vnode.js # 虛擬 node 相關
使用FLOW的好處
- 有利于大型專案原始碼的開發和維護
- 與之相對的還有TypeScript
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/278525.html
標籤：區塊鏈
上一篇：C#基礎06(基礎的增刪改查)