吐槽專用

吐槽 avalon.js

歷史背景

• 需求重大調整，全部業務推倒重來（pc端主要任務涉及管理後臺類型的網站）；

• 開發週期很緊，過年前要上線；

• 公司pc端業務要求兼容到ie8；

• 2015年前端工資猛漲（特別是p2p這塊），離職潮加重，前來面試的要麼不合適（99%的面試者技術水平對不起那份高工資，也許是我要求過高），合適的人沒有選擇咱們，最後只剩下2我的，一個作業務邏輯，一個作頁面重構；

• 開發週期很緊，過年前要上線；

• 我剛入職不久，以前的前端團隊沒留下什麼現成的代碼或模式，幾乎全部的東西都須要從新開發。

技術選型

在這種狀況下，爲了更快的開展業務，花了兩三天時間，對技術選型作了一次任性而粗暴的預研：

• 拋棄了jquery這種基於dom操做的開發模式，後臺有大量的數據交互和綁定，開發起來比較慢，維護性不高。由於ui都是徹底自主，像easyui這類很重的框架一方面定製起來比較繁瑣，並且學習成本高，最重要的是我的不是很喜歡。

• 而當下最流行的mvvm框架，像ng，vue，react都有一個致命問題--兼容性，雖然ng，react早期版本兼容ie8，當考慮之後的維護升級，就沒有考慮。

最終選擇了兼容到ie6的avalon.js，終於使用上mvvm框架，雖然它只是個vm。
對比過1.5和以前版本，本着對做者的大名的神往及信任，項目使用了v1.5這個版本，爲後來的開發買下伏筆。

沒有對比就沒有傷害

原本想着技術棧統一，移動端也準備使用avalon.js。因爲一些需求和開發優先級等緣由，遲遲沒有開始。
前期粗暴的預研，漸漸在pc端業務開發到了中期，一直在chrome上作開發，回頭作ie兼容性時，卻踩了史上最嚴重的坑。

因而，以後對移動端的技術選型上更加慎重了，最終採用了文檔更漂亮的vuejs。雖說是慎重之選，其實更是一個幸運之選。

兩個庫我都在項目中使用，對vue愈來愈喜歡，而avalon越用越多槽點。

issue回覆草率，bug坑死人，胡亂報錯

像這個issue，我想知其因此然。
雖然我經過用vuejs同理可知是由於涉及生成虛擬dom，組件模版必須有惟一的根元素。

這算我要求過高了，做者沒有那麼多精力，那麼接下來的有點難忍了。

avalon 在v1.5中竟然不兼容ie8-，包括官方的例子。
一樣v2.0也是這樣，本身寫個教程，給的例子本身都不測試下。
他回覆 issue的原話以下：

ms-modal關閉不了本身改改，那個原本就是教程！

太不負責了吧！若是連兼容--avalon的最重要的最基礎一點都沒作到，那我就沒有使用他的必要了。

至於報錯這項，好比父組件傳值給子組件一個子組件未定義過的值，它竟然這樣報錯

TypeError: 對象不支持此屬性或方法 onInit

那onInit是什麼鬼？

組件

vue中有一個局部組件的概念，起初不明白爲何要那麼設計。後來慢慢發現，這個設計過重要了，特別是在把某一個組件太過複雜，把他拆分紅更小的組件時，把這些更小的組件做爲一個局部組件封裝在父組件內部，而不會被暴露到外部。

反觀avalon的組件系統，內層組件會把全部外層容器的屬性都繼承下來，並且組件一旦定義就是全局的了。並且組件的屬性沒有卻份內部屬性和外部屬性，沒有了私有屬性和方法的概念，所有能被外部傳值給覆蓋。

語法糖

對一些語法包裝上不是很友好，好比他寫的教程

有一次調試ie兼容終性時，終於明白他爲何要這麼寫，由於在ie8-中，this[cbName]被包裹了一層函數，全部在ie8-下，必須執行兩次，以下

this[cbName]()             // 非ie8-
this[cbName]().call(this)  // ie8-

固然，或許是我使用的姿式不對。

對ms-if的設計很糟糕，對ms-if內部的語法限制頗多。好比：教程中提到的

注意,有許多人喜歡用ms-if作非空處理,這是不對的,所以ms-if只是決定它是否插入DOM樹與否,ms-if裏面的 ms-指令仍是會執行.

正確的作法是,當你知道這裏面有非空斷定,須要用方法包起來

avalon.define({
  $id: 'test',
  aaa: {},
  show: function(aaa, bbb, ccc){
     var obj = aaa[bbb]
     if(obj){
        return obj[ccc]
     }
     return ''
  }
})

<div ms-controller="test">
   <div ms-if="@aaa.bbb">
     {{@show(@aaa, 'bbb', 'ccc')}}
   </div>
</div>

我有大量的數據，那不是要寫不少？若是ms-if裏面還包着ms-if呢，寫大量的這樣醜陋的代碼，太不人道了吧。到目前爲止v2.1.14還存在大量的bug，好比組件中（非組件場景沒注意）ms-if嵌套ms-for在ie8-不執行。

文檔

可能由於vue的做者設計出身，相比之下，vuejs的文檔設計的至關漂亮。

且不說vue支持多種語言（好像中文文檔是社區提供的），avalon的教程中充斥這大量的口語話的表達，這點尚且能夠忍。

做爲一份教程，avalon沒有很好的把使用用法，注意事項清晰系統的表述，給出的例子七零八落，甚至還夾雜着bug。

做爲一份api文檔，v1.5中只給出寥寥幾個api接口，以及一些簡單的說明；v2.0有所進步，可是連基本的完整性都沒作到，好比組件的api就沒有羅列。可能他想解釋：「你去看教程啊，裏面有寫啊！」

項目推廣

avalon 和國內不少開源庫同樣，沒有作好推廣工做，固然不是簡單的拉來一堆人來助威，建個QQ羣這樣的堆人模式。

以前加過不少相關技術羣，感受聊天的模式解決問題太沒效率了，不如在github上看issue提issue或者看源碼。

相比之下vue的做者在這方面更善於經營。

黑魔法的坑

定義組件時用wbr標籤兼容低版本ie，用html-minifer壓縮代碼時遇到一個問題

<!-- 壓縮前 -->
<wbr ms-a="a" ms-b="b"> 
<!-- 當前的html-minifer v2.1.3 全部空格被壓縮-->
<wbrms-a="a"ms-b="b"> 
<!-- 最新的html-minifer v3.0.2 只有第一個屬性前保留一個空格-->
<wbr ms-a="a"ms-b="b">

可能你們對這個標籤的語意和用法理解不一樣，先給html-minfer提了個issue

根據issue上的回覆，發現這個是我本身配置的坑

任性的代碼

avalon2.0內置了驗證組件，可是卻赤裸裸的用起了promise，說好的兼容低版本呢。並且使用時裏面夾雜着不少dom操做，不是應該數據驅動，告別dom操做

總結一下

avalon2是一款基於虛擬DOM與屬性劫持的 迷你、 易用、 高性能 的 前端MVVM框架， 擁有超優秀的兼容性, 支持移動開發, 後端渲染, WEB Component式組件開發, 無需編譯, 開箱即用。

迷你 就不要內置什麼插件，我可能幾百年用不上。
易用 還真不易用，坑還真多。
擁有超優秀的兼容性 最起碼的沒作好。
組件開發 封裝性太差
支持移動開發, 後端渲染 基於以上幾點，一個不太敢用，並且沒有什麼優點可言