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上,心急的人可以先下回來研究,但記得加星啊!