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