資訊專欄INFORMATION COLUMN
摘要：最近因項目進展需求對現(xiàn)有項目進行重構(gòu)，由于目前項目還未實現(xiàn)真正意義上的前后端分離后續(xù)會循序重構(gòu)實現(xiàn)，在時間緊產(chǎn)品循序迭代的情況下，想一次性實現(xiàn)前后端分離精力實在有限主要是前端開發(fā)人力不足。
最近因項目進展需求對現(xiàn)有項目進行重構(gòu)，由于目前項目還未實現(xiàn)真正意義上的前后端分離（后續(xù)會循序重構(gòu)實現(xiàn)），在時間緊產(chǎn)品循序迭代的情況下，想一次性實現(xiàn)前后端分離精力實在有限（主要是前端開發(fā)人力不足）。所有決定先將影響項目開發(fā)進度和影響團隊開發(fā)的一些歷史遺留問題進行改造（包括模塊發(fā)、配置化、前端渲染引擎等問題的改造）。
模塊發(fā)、配置化的改造此處省略，需要的同學請自行補腦，目前流行的模塊化思想的產(chǎn)物有requirejs、seajs(項目中使用)等......
目前比較流行的前端MVVM框架包括Angular、React、Avalon等，由于前兩者均已在后續(xù)的版本中拋棄了對IE的支持（老的版本對ID的支持也不太友好，這是我直接拋棄前兩者的直接原因），avalon是一款基于虛擬DOM與屬性劫持的 迷你、 易用、 高性能， 擁有超優(yōu)秀的兼容性, 支持移動開發(fā), 后端渲染, WEB Component式組件開發(fā), 無需編譯, 開箱即用。avalon體積雖小但五臟俱全，包括虛擬DOM、指令（自定義組件開發(fā)和完善的第三方組件庫）、雙向綁定（相比原先利用ejs渲染爽了很多）、過濾器、驗證、服務端渲染等等...
直接上示例：
html:
first example
Hello,{{@name}}!
是不是和我們熟悉的Angular等前端MVVM架構(gòu)很像？ 直接定義一個avalon作用域（Avalon的作用域也是向上冒泡查找的），通過$id屬性進行綁定，html通過“{{@aa}}”或“ms-text”屬性直接進行綁定（avalon有個“賣”點就是“改變model及改變View”,其實就是通過虛擬DOM的特性實時監(jiān)聽變化達到局部更新視圖的效果，所以我們項目中必不可少的會有很多種狀態(tài)--這點類似于React里的"狀態(tài)機"，需要合理去搭配使用。）
例如常見的Tab頁切換：
html:
js：
var searchNav = avalon.define({
$id: "searchNavCtrl",
active: 1,
checkSearch: function(indx) {
if (indx == 1) {
this.active = 1;
} else {
this.active = 2;
}
}
});
只要上述幾行代碼就可以搞定這個功能，比起原先直接操作DOM要方面的許多。
根據(jù)上述代碼不難發(fā)現(xiàn)avalon是已’ms-‘字符開頭作為屬性名稱的，常用的屬性如下：
當多個屬性并行時建議使用已下寫法（一些保留字節(jié)屬性需要加單引號如id,class等，為了統(tǒng)一格式建議全部加上）：
未完待續(xù)......
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/50162.html
摘要：的相關文章其實框架就是讓你使用起來簡單些關于路由其實用一個輕便的框架就可以了路由就是根據(jù)后面的路徑不同變換代碼前端路由由于其特殊性最常見表述為這樣的形式然后我們直接上使用代碼可以使你使用現(xiàn)在我們開始寫組件組件寫法定義組件使用組件 avalon2 的相關文章https://segmentfault.com/blog/jslouvre 其實框架就是讓你使用起來簡單些 關于路由其實用一個輕便...
摘要：使用前端框架開發(fā)信息管理系統(tǒng)有三年了，最近半年花了些心血將這三年的積累凝聚起來，誕生了兩個開源項目和。，中文名安逸，是基于的端組件庫。有用于數(shù)據(jù)展示的組件用于數(shù)據(jù)提交的組件用于消息提示的與組件組件和用戶輸入組件等，并且還在不斷完善中。 使用 Avalon 前端框架開發(fā)信息管理系統(tǒng)有三年了，最近半年花了些心血將這三年的積累凝聚起來，誕生了兩個開源項目 ms-bus 和 ane。 ms-b...
摘要：也是一個版本，沒有增加任何新特征。不同的是內(nèi)部源碼已經(jīng)全部用重新編寫了。之前使用風格的編寫，進行合并。很好的解決這問題。隨著對的大膽嘗試的成功，以后源碼也計劃隨遷移。不過，大家放心，最后出來的框架還是形式，能運行于下。 avalon2.1.16也是一個Fix BUG版本，沒有增加任何新特征。不同的是內(nèi)部源碼已經(jīng)全部用es6 modules重新編寫了。之前使用nodejs風格的Commo...
摘要：場景描述某表單中有一個郵箱的輸入框，但是為非必填項，我們期望的結(jié)果不填寫可以驗證通過如果填寫了郵箱驗證郵箱格式代碼如下全部通過備用郵箱非必填提交未填寫郵箱運行結(jié)果沒有達到期望結(jié)果，如下圖方案重寫驗證規(guī)則官方有示例，可以自己重寫一個驗 場景描述 某表單中有一個郵箱的輸入框，但是為非必填項，我們期望的結(jié)果 1. 不填寫可以驗證通過 1. 如果填寫了郵箱,驗證郵箱格式 代碼如下 ...
