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的函数