函數(shù)式編程部分重點

參考資料: 函數(shù)式編程

柯里化

只傳遞給函數(shù)一部分參數(shù)來調(diào)用它,讓它返回一個函數(shù)去處理剩下的參數(shù)

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

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

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

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

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

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

• Vue中,使用柯里化可以將時間復(fù)雜度將為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)

虛擬DOM的Render方法

• 在此之前我們需要理解Vue中抽象語法樹的概念:
  • 是源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式,在Vue的mount過程中,template會被編譯成AST語法樹
• 由于AST比較復(fù)雜,這里暫時采用虛擬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放到緩存中.形成一個閉包,之后返回一個函數(shù)renderlet AST = getVNode(this._template)return function render(){// 這里用到了緩存中的AST,將AST和數(shù)據(jù)結(jié)合生成新的虛擬DOMlet _tmp = combine(AST, this._data)return _tmp} }

【注:】

• getVNode是將template中的HTML模板轉(zhuǎn)換成AST的函數(shù)
• combine是將AST和數(shù)據(jù)結(jié)合形成新的虛擬DOM的函數(shù)

總結(jié)

以上是生活随笔為你收集整理的javascript --- 函数的柯里化 Vue 2.x中柯里化的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。