我们在实现v-bind时会有一种稍微复杂一点儿的情况，就是里面是一个表达式
<div :class='{customClass: key.a + 1 > 2}'>实现复杂的v-bind绑定</div>这个时候我们就需要运行这个表达式获取表达式的运行结果，正常情况下这一步需要代码编译才能获取结果，因为编译原理太复杂，所以我们这里把_data 和 vnode.env创建一个代码执行环境 并加上表达式放在 eval或者Function构造函数，来执行表达式内的代码获取结果。
代码实现：
在上一章的基础之上实现表达式的解析
import { isTrue, generateCode } from "../../utils/CodeUtils"
import { getObjectValue, getEnvAttr } from "../../utils/ObjectUtils"export function VBind(vm, vnode) {if(vnode.nodeType != 1) return;const attrs = vnode.ele.getAttributeNames()attrs.forEach((attr)=> {if(attr.startsWith("v-bind:") || attr.startsWith(":")) {// 设置的节点属性名称let attrName = attr.replace("v-bind:", "").replace(":", "")const attrValue = vnode.ele.getAttribute(attr)if(/^{[\W\w]+}$/.test(attrValue)) {complexVbind(vm, attrName, vnode, attrValue)} else {simpleVbind(vm, attrName, vnode, attrValue)}}})
}function simpleVbind(vm, key, vnode, value) {const attrValue = getObjectValue(vm, value)if(key==='class') {vnode.ele.classList.add(attrValue)} else {// 给节点设置属性值vnode.ele.setAttribute(key, attrValue)}
}/*** 复杂绑定* @param {*} key {customClass: key.a + 1 > 2}* @param {*} node * @param {*} value */
function complexVbind(vm, key, vnode, value) {// 移除表达式两边的花括号value = value.slice(1, -1)// 获取表达式列表const expressList = value.split(',')// 分析表达式const result = analyzeExpress(vm, vnode, expressList)vnode.ele.setAttribute(key, result)
}function analyzeExpress(vm, vnode, expressList) {let result = ""// 获取当前表达式执行的变量const env = getEnvAttr(vm, vnode)// 生成表达式执行的变量const codeStr = generateCode(env)for(let express of expressList) {const site = express.indexOf(':')// 获取值const attrValue = getObjectValue(vm, express.substring(0, site))if(site.length === 1) {result+=`${attrValue} `} else {// 取出表达式计算的内容 customClass: key.a + 1 > 2 -> key.a + 1 > 2const expressContent = express.substring(site + 1)// 执行表达式if(isTrue(expressContent, codeStr)) {result+=`${attrValue}`}}}return result
}// src/utils/CodeUtils.js/*** 将env对象转换为代码字符串* @param {*} env */
export function generateCode(env) {let code = '';for(let key in env) {code += `let ${key} = ${JSON.stringify(env[key])};`}return code;
}/*** 使用eva执行表达式并返回结果* @param {*} express * @param {*} envCode */
export function isTrue(expressStr, envCode) {let flag = false;try {eval(`${envCode} if(${expressStr}) flag = true`)} catch(e) {console.error(e)}return flag
}/*** 获取当前节点环境变量* @param {*} vm * @param {*} vnode * @returns */
export function getEnvAttr(vm, vnode) {let result = mergeAttr(vm._data, vnode.env || {})result = mergeAttr(result, vm._computed || {})return result;
}我们给上一章的按钮添加一个动态的样式，可以看到样式已经生效了
<button @click="pushNewItem" v-bind:class="{customClass: customLimit + 1 > 2}">添加新项</button>