avalon 属性操作进阶：`ms-attr` 从指令拆分到对象化表达的演进与源码解析

前端【免费下载链接】avalonan elegant efficient express mvvm framework项目地址https://gitcode.com/gh_mirrors/ava/avalon点击查看免费下载ms-attr是 avalon 框架中用于批量操作 DOM 元素属性的核心指令。本文以官方教程 tutorials/lesson05.md 为主线系统对比 avalon1 与 avalon2 两代框架在属性操作上的设计差异完整讲解 avalon2 中ms-attr的三种写法对象字面量、VM 对象属性、对象数组并结合仓库源码剖析表达式的作用域转换机制、属性 diff 算法与 DOM 写入策略帮助读者既掌握可复制的实战写法也理解其底层实现原理。一、为什么 avalon2 要重写属性指令avalon1 中操作 DOM 属性采用一个指令对应一个属性的方式。比如要同时设置aaa、bbb、ccc三个属性就必须写出三条指令div ms-attr-aaaa ms-attr-bbbb ms-attr-cccb/div其语法为ms-attr-valueNamevmProp也就是说想操作多少个属性就要写多少个ms-attr-前缀一个都不能省略。除此之外avalon1 还内置了一批属性缩略写法例如ms-title、ms-alt、ms-src、ms-href、ms-selected、ms-checked等。麻烦在于到底哪些属性可以缩写、哪些不能很少有人能记全这给使用者带来了不小的记忆负担。avalon2 从减轻用户记忆出发重新设计了该指令将所有要操作的属性打包成一个对象统一交给ms-attr一个指令处理规定只有属性值value 部分才能使用开头的 VM 属性引用键名key 部分保持普通字符串即可彻底取消了ms-title这类缩略写法avalon2 中不存在任何属性缩略指令。这一设计让属性操作从写多条指令、记缩写清单收敛为写一个对象与后续介绍的数组写法共同构成了 avalon2 灵活而统一的属性操作模型。二、avalon2 中ms-attr的三种标准写法1. 对象字面量写法最常用div ms-attr{aaa:a, bbb:b11, ccc: fn(d,e)}/div这是最直观的写法ms-attr的值是一个 JavaScript 对象字面量键名是目标属性名键值可以是直接的 VM 属性引用aaa:a带运算的表达式bbb:b11调用 VM 方法的表达式ccc: fn(d,e)。avalon 的表达式引擎会解析整个对象并对其中每一个xxx建立依赖收集当对应 VM 属性变化时自动重算并更新 DOM 属性。2. 直接引用 VM 中的对象属性div ms-attrattrObj/div其中attrObj是 VM 的一个对象属性。这种写法把属性集合的定义收敛到 VM 内部视图层只写一个引用适合属性集在多个位置复用的场景。原文档也指出这种写法不太常用——因为属性集的维护被移出了视图可读性不如对象字面量直观。3. 数组写法源自 ReactNative 的设计灵感div ms-attr[{aaa:a}, {bbb: b}, toggle ? {add:111}: {}]/divms-attr的值还可以是一个数组数组中每个元素是一个对象或一个求值后为对象的表达式。数组会按顺序被合并为一个最终对象再应用。原文档明确指出这个设计灵感来自 ReactNative 的 style 指令——ReactNative 允许通过数组向样式指令传入多个样式对象avalon 把这一模式移植到了属性操作上。数组写法在实际应用中价值很大可以按条件插拔整组属性例如toggle ? {add:111}: {}表示toggle为真时合并{add:111}为假时合并空对象从而实现属性的条件启用可以将静态属性与动态属性分开书写便于阅读和维护。无论采用上面哪种写法最终传进去的数据只要能被 avalon 内部还原成一个普通对象指令就能正常工作——这是ms-attr的统一前提。三、前缀表达式如何引用 VM 属性avalon2 中ms-attr的属性值以及插值表达式等一律用前缀引用当前作用域的 VM 属性。这一机制的底层实现在 src/parser/index.js 中var rvmKey /(^|[^\w\u00c0-\uFFFF_])(|##)(?[$\w])/g在表达式编译阶段addScope函数会执行input.replace(rvmKey, $1__vmodel__.) //转换与##为__vmodel__即把foo转换为__vmodel__.foo随后通过createGetter用new Function(__vmodel__, return body ;)生成取值函数见 src/parser/index.js。也就是说引用当前作用域的 VM在ms-for循环内则指循环项所在作用域##引用顶层 VM用于在循环等局部作用域中跳出到根 VM例如模板组件中访问外层数据时使用##属性对象的键名不会被转换只有键值参与解析这与原文档只有属性值才能使用 开头的 vm 属性的规则完全对应。四、多行书写与性能取舍当属性对象很长时avalon2 支持将ms-attr的值写成多行。原文档甚至给出了一段写得很恶心但依然能被正常解析的示例!DOCTYPE html html head titleTODO supply a title/title meta charsetUTF-8 meta nameviewport contentwidthdevice-width script src./dist/avalon.js/script script var vm avalon.define({ $id: test, title:111, src: 222, lang: 333 }) /script /head body ms-controllertest div aaaddd bbb333 ms-attr{title: title, ddd:src, lang:lang} {{ src ? 333: empty }}/div input ms-duplexsrc/ /body /html这个示例还展示了两个与属性操作密切相关的细节表达式解析会规整空白与换行。ms-attr的值在编译阶段会经过 src/parser/index.js 中ruselessSp去除.与|两侧空白等正则的清洗因此跨行书写的对象仍可被正确识别为{title: title, ddd:src, lang:lang}ms-duplexsrc与ms-attr可以协同工作input通过双向绑定修改srcdiv上的ms-attr会自动把新的src值同步到ddd属性上属性内部的插值{{src ? 333: empty}}也随依赖联动更新这正是 MVVM 响应式属性操作的典型场景。不过原文档也给出明确建议为了性能起见ms-attr最好还是保持在一行。多行写法虽然可用但对象表达式越长解析与 diff 的开销越大生产中应尽量保持属性对象短小精悍。五、底层实现attr 指令的 diff 与 DOM 写入ms-attr的运行时实现位于 src/directives/attr.compact.js兼容 IE 版本与 src/directives/attr.modern.js现代浏览器版本两处代码一致avalon.directive(attr, { diff: cssDiff, update: function (vdom, value) { var props vdom.props for(var i in value){ if(!!value[i] false){ delete props[i] }else{ props[i] value[i] } } var dom vdom.dom if (dom dom.nodeType 1) { updateAttrs(dom, value) } } })这里有三个关键点diff: cssDiffattr 指令直接复用了css指令的 diff 算法src/directives/css.js它会把数组形式的值合并为对象——源码中遇到Array.isArray(newVal)时依次avalon.shadowCopy(b, el)合并各元素——然后逐键比较新旧值标记差异属性并生成补丁对象patch属性同步进 vdomupdate阶段把计算后的属性写回虚拟节点的props值为false的属性被delete即移除其他属性直接赋值随后再落到真实 DOMupdateAttrs统一写入真正的 DOM 写入由updateAttrs完成现代版实现在 src/dom/attr/modern.js兼容版在 src/dom/attr/compact.js。写入策略非常讲究data-*自定义属性与 SVG 元素一律使用setAttribute布尔属性如checked、disabled、readOnly、selected必须通过node[propName] !!val设值因为若用setAttribute设置空字符串IE 全系列会被误判为生效进而影响样式值为false时调用removeAttribute移除属性内建属性通过attrName in node.cloneNode(false)判断使用node[propName] val 其余属性使用setAttribute。属性名映射表 propMapupdateAttrs在写入前会查询属性名映射表 src/dom/attr/propMap.js处理属性名与 JS 属性名不一致的情况不规则映射class → className、for → htmlFor、accept-charset → acceptCharset、http-equiv → httpEquiv等布尔属性清单checked、disabled、readOnly、selected、multiple、autofocus、async、declare、defer、open等异常映射清单contentEditable、tabIndex、cellPadding、maxLength、rowSpan等。这也从侧面解释了 avalon1 为什么会有ms-checked、ms-selected等一堆缩略指令——它们本质上对应这些需要特殊处理的属性而 avalon2 将这些特殊逻辑全部内聚到ms-attr的updateAttrs中用户无需再关心哪个属性能不能缩写。六、测试用例对写法的验证仓库的 test/directives/attr.spec.js 为上述各种写法提供了可运行的验证用例覆盖了实战中最容易踩坑的场景checkedms-attr{checked:a}vm.a在true/false间切换时el.checked随之同步变化a: true时checked为truereadOnly与disabledms-attr{readonly: a, disabled:b}验证多个布尔属性可共存于一个对象且置false后属性被正确移除selectedoption ms-attr{selected:a}111/option配合multiple下拉框验证选项选中态的响应式更新contentEditablems-attr{contenteditable:a}验证非布尔属性以字符串形式写入valuems-attr{value:a}验证普通属性值写入数组写法ms-attr[toggle active]验证数组元素求值为对象toggle为真时合并{title:active}为假时合并false被忽略这正是原文档所述数组传多个对象的落地形态:attr简写与对象复制div ms-controllerattr7 :attr{title: aaa||aaa} ...验证ms-attr可写作:attr简写形式且对象键值支持||短路表达式与ms-for协同option :for(i,v) in data :attr{value:i}{{v}}/option验证在循环渲染中为每个option动态写入value属性。这些用例与教程文档相互印证无论对象字面量、VM 对象属性还是数组写法最终都能被还原为普通对象并正确应用到真实 DOM。七、实战小结avalon1 用ms-attr-xxx逐属性声明并依赖ms-title、ms-checked等缩略指令记忆成本高avalon2 统一为ms-attr{attr: expr}的对象写法删除了所有缩略指令。avalon2 的ms-attr支持三种形态对象字面量最常用、VM 对象属性引用复用场景、对象数组条件合并、灵感来自 ReactNative style 指令。属性值中通过引用当前作用域 VM 属性、##引用顶层 VM底层由 src/parser/index.js 的addScope将其编译为__vmodel__.xxx表达式。布尔属性、class/for等特殊属性名、SVG 与data-*属性都由updateAttrs与propMap自动分流处理使用者无需记忆缩写规则。多行书写虽然被支持但保持一行有利于性能diff 阶段数组会被合并为对象值false会触发属性移除。若需验证或深入学习可结合 test/directives/attr.spec.js 中的用例以及 src/directives/attr.modern.js、src/directives/css.js、src/dom/attr/modern.js、src/dom/attr/propMap.js 等源码文件对照阅读。赞分享前端【免费下载链接】avalonan elegant efficient express mvvm framework项目地址https://gitcode.com/gh_mirrors/ava/avalon点击查看免费下载相关推荐CMake get_test_property 命令详解从测试对象读取属性与作用域进阶用法CMake get_test_property 命令详解从测试对象读取属性与作用域进阶用法 本篇技术指南围绕 CMake 内置命令 get_test_prop构建工具开发工具CLIgrill-me 拷问实战四个动作把模糊想法逼成可辩护的决策grill me 拷问实战四个动作把模糊想法逼成可辩护的决策 grill me 是 Skills for Real Engineers 仓库里的一个生产力技能AI 技能AI 插件Osintgram 版本演进全解析从 0.1 到 1.3 的功能演进、命令体系与源码实现对照Osintgram 版本演进全解析从 0.1 到 1.3 的功能演进、命令体系与源码实现对照 本篇技术指南以仓库 doc/CHANGELOG.md https网络安全上一篇LrcHelper网易云音乐双语歌词下载终极指南下一篇LrcHelper网易云音乐双语歌词下载工具 - 如何轻松获取完美歌词创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考