javascript --- > 函數的柯里化 && Vue 2.x中柯里化的使用

函數式編程部分重點

參考資料: 函數式編程

柯里化

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

var add = function (x) {
    return function(y) {
        return x + y
    }
}

var increment = add(1)
var addTen = add(10)

increment(2) // 3

addTen(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 true
    return 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放到緩存中.形成一個閉包,之後返回一個函數render
	let AST = getVNode(this._template)
	
	return function render(){
		// 這裏用到了緩存中的AST,將AST和數據結合生成新的虛擬DOM
		let _tmp = combine(AST, this._data)
		return _tmp
	}
}

【注:】

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