javascript --- 函数的柯里化 Vue 2.x中柯里化的使用

函数式编程部分重点

参考资料: 函数式编程

柯里化

只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数

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源码中柯里化的使用】

在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)

虚拟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}
}