avalon1與avalon2的異同點


avalon2並不向下兼容avalon1,但許多API與指令很相似,遷移成本比較低。此外,良好的性能與強大的功能是你遷移的動力。下面是一個列表,如有提問盡管提出。

avalon1與avalon2的異同一覽表

科題 avalon1 avalon2
如何得知某個屬性被改動 使用VBScript,Object.defineProperty實現對=號的重寫 在此基礎增加Proxy的魔術監聽
如何更新視圖 找到變動屬性對應的訂閱者數組,執行這些數組元素的update方法 使用vm.$render生成虛擬DOM樹,diff,從上到下有序更新
計算屬性 支持 移除,使用js指令實現相同功能
綁定屬性的處理 掃描后刪除 掃描后還留着
循環指令 ms-repeat,ms-each,ms-with ms-for
循環指令的語法 ms-repeat-el='array' ms-for="el in @array"
如何辯別指令中的vm屬性 avalon自行進行語法抽取 強制在前面帶@或#符號
垃圾回收 密封艙機制,負責清空訂閱者數組 由於不保存綁定對象,沒有CG的煩惱
性能 一般,但能撐起上萬個指令,瓶頸取決於綁定對象的所占內存 原來的5倍以上,瓶頸取決於虛擬DOM的規模
最復雜的指令 ms-repeat ms-duplex
數據驗證 使用oniui的validation 使用內置的ms-validate,ms-duplex,ms-rules
組件指令 ms-widget='id,name,opts' ms-widget='Array'傳入一個對象數組,用法更靈活
組件生命周期 onInit, onDispose onInit, onReady, onViewChange, onDispose
如何操作組件 通過onInit取得組件vm進行操作 直接操作配置對象
如何對組件傳入大片內容 使用ms-html或改成模板 通過slot機制
加載器 使用AMD風格的內置加載器 移除,建議使用webpack進行打包
動畫 ms-effect(與angular的animate更接近) ms-effect
模塊化 源碼里自由划分 使用nodejs的require與module.exports組織起來
important指令 有(讓頁面渲染更快)
{{}}與ms-text的關系 ms-text會對內容再次掃描,不是單純等價於{{}} 完全等價
if指令 ms-if ms-if
attr指令 ms-attr-name=value ms-attr="object" object是一個對象,方便每次處理多個屬性
class指令 ms-class='xxx: toggle' ms-class=’Array
visible指令 ms-visible ms-visible
過濾器 只能用於innerText中的{{}}及ms-text, ms-html 數量琳琅滿目,所有指令都支持
js指令 沒有 新增
模板指令 ms-include 移除,由於后端無法實現等價功能
事件指令 普通的事件綁定 能支持事件代理的都用事件代理
后端渲染 實現成本高昂 輕松支持
核心架構 觀察者模式 + 屬性劫持 大模板函數+虛擬DOM+屬性劫持

其中變量名前加上@,是一個很大的區別。雖然avalon也可以通過內部 分析得到,但可能有缺失,再三考慮,決定加上這一個標識符。如果大家還記得的話,我早些年的ejs模板引擎就是使用@來標識變量的。因此許多東西都是有傳承的,都是非常成熟的方案。

往后,我會出一系列教程來介紹avalon2。avalon的優點可以自行發掘,但可以說一點的是,其兼容性,易用性,體積在市面上都是數一數二的。

avalon2托管在GITHUB上,心急的人可以先下回來研究,但記得加星啊!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM