函數式編程部分重點

參考資料: 函數式編程

柯里化

只傳遞給函數一部分參數來調用它,讓它返回一個函數去處理剩下的參數

var add = function (x) {return function(y) {return x + y}
}var increment = add(1)
var addTen = add(10)increment(2) // 3addTen(10)	// 12

• 判斷元素:Vue本質上是使用HTML的字符串作為模板的,將字符串轉換為AST(抽象語法樹),再轉換為VNode(虛擬DOM)
  • 模板 -> AST (此處做了字符串解析,最消耗性能)
  • AST -> VNode
  • Vnode -> DOM

【Vue源碼中柯里化的使用】

1. 在Vue中常常需要判斷,一個標簽是原生的HTML標簽,還是組件標簽.你可能會想到如下的代碼

let tags = 'div,p,a,img,ul,li,span'.split(',')  // 有很多種原生的標簽,這里只列舉了一小部分
function isHTMLTag(tagName){tagName = tagName.toLowerCase();if( tags.indexOf(tagName) > -1) return truereturn false
}

• 以上每次判斷都要循環時間復雜度為o(n)遍.

• Vue中,使用柯里化可以將時間復雜度將為O(1)

let tags = 'div,p,a,img,ul.li,span'.split('.')
function makeUp(keys) {let set = {}tags.forEach( key => set[key] = true)return function (tagName) {return !!set[tagName.toLowerCase()]}
}
let isHTMLTag = makeUp(tags)

2. 虛擬DOM的Render方法

• 在此之前我們需要理解Vue中抽象語法樹的概念:
  • 是源代碼的抽象語法結構的樹狀表現形式,在Vue的mount過程中,template會被編譯成AST語法樹
• 由于AST比較復雜,這里暫時采用虛擬DOM + mustache語法來作為AST
• 在Vue中使用到了柯里化來緩存首次渲染生成的AST, 縮減版如下:

function Vue(options){this._template = document.querySelector(options.el)this.mount()
}
Vue.prototype.mount = function(){// 這里用到了柯里化this.render = this.createRenderFn()
}
Vue.prototype.createRenderFn = function() {// 將AST放到緩存中.形成一個閉包,之后返回一個函數renderlet AST = getVNode(this._template)return function render(){// 這里用到了緩存中的AST,將AST和數據結合生成新的虛擬DOMlet _tmp = combine(AST, this._data)return _tmp}
}

【注:】

• getVNode是將template中的HTML模板轉換成AST的函數
• combine是將AST和數據結合形成新的虛擬DOM的函數