avalon是一個(gè)簡單易用迷你的MVVM框架。通過本文給大家介紹Avalon中文長字符截取、關(guān)鍵字符隱藏、自定義過濾器的相關(guān)資料，需要的朋友一起學(xué)習(xí)吧

關(guān)于AvalonJS

avalon是一個(gè)簡單易用迷你的MVVM框架，它最早發(fā)布于2012.09.15，為解決同一業(yè)務(wù)邏輯存在各種視圖呈現(xiàn)而開發(fā)出來的。 事實(shí)上，這問題其實(shí)也可以簡單地利用一般的前端模板加jQuery 事件委托 搞定，但隨著業(yè)務(wù)的膨脹， 代碼就充滿了各種選擇器與事件回調(diào)，難以維護(hù)。因此徹底的將業(yè)務(wù)與邏輯分離，就只能求助于架構(gòu)。 最初想到的是MVC，嘗試過backbone，但代碼不降反升，很偶爾的機(jī)會(huì)，碰上微軟的WPF， 優(yōu)雅的MVVM架構(gòu)立即吸引住我，我覺得這就是我一直追求的解決之道。

MVVM將所有前端代碼徹底分成兩部分，視圖的處理通過綁定實(shí)現(xiàn)（angular有個(gè)更炫酷的名詞叫指令）， 業(yè)務(wù)邏輯則集中在一個(gè)個(gè)叫VM的對(duì)象中處理。我們只要操作VM的數(shù)據(jù)，它就自然而然地神奇地同步到視圖。 顯然所有神秘都有其內(nèi)幕，C#是通過一種叫訪問器屬性的語句實(shí)現(xiàn)，那么JS也有沒有對(duì)應(yīng)的東西。 感謝上帝，IE8最早引入這東西（Object.defineProperty），可惜有BUG，但帶動(dòng)了其他瀏覽器實(shí)現(xiàn)它，IE9+便能安全使用它。 對(duì)于老式IE，我找了好久，實(shí)在沒有辦法，使用VBScript實(shí)現(xiàn)了。

Object.defineProperty或VBS的作用是將對(duì)象的某一個(gè)屬性，轉(zhuǎn)換一個(gè)setter與getter， 我們只要劫持這兩個(gè)方法，通過Pub/Sub模式就能偷偷操作視圖。為了紀(jì)念WPF的指引，我將此項(xiàng)目以WPF最初的開發(fā)代號(hào)avalon來命名。 它真的能讓前端人員脫離DOM的苦海，來到數(shù)據(jù)的樂園中！

題外話：

最近接手一個(gè)項(xiàng)目，前端采用avalon這個(gè)mvvm框架，對(duì)于先前接觸過angularjs的人來說，總感覺avalon還是“太”輕量了（非褒義）

網(wǎng)上為avalon背書的無外乎是說：國產(chǎn)，體積小，逃離dom操作，上手難度低，兼容ie6；劣勢是：“然而avalon也有自己的劣勢——知名度較低”，呃，我想靜靜.....

吐槽jquery過渡依賴選擇器，繁雜的dom操作，可是avalon的ajax和動(dòng)畫效果還得指望其他控件，實(shí)際上往往卻又是和jquery搭配使用，吐槽jquery，卻又離不開jquery，真是悲劇... 說angular非常難上手，ng上手難度低好不，ng生態(tài)好，功能強(qiáng)大，文檔和翻譯齊全，社區(qū)成熟活躍，官方插件第三方插件一大堆。

性能問題，為了平衡開發(fā)效率和性能，這只是一種選擇問題。用過ng的人，也不會(huì)擔(dān)心什么性能問題吐槽angular版本兼容性?？葾valon還是出現(xiàn)這樣的聲明：“注意 : 以上三個(gè)分支都比較穩(wěn)定, 但互相不太兼容。 建議直接用2.0?！?/P>

以上只是吐槽那些文案背書，avalon也算一個(gè)不錯(cuò)的框架，也一直在優(yōu)化改進(jìn)和吸收那些知名MVVM框架的優(yōu)點(diǎn)，比如2.0版本，就新增了4個(gè)數(shù)組的過濾器，指令也進(jìn)入了to do list。

希望哪天用過angular的人再來用avalon后都會(huì)說：哎喲，不錯(cuò)哦！

分享兩個(gè)非常簡單的過濾器：隱藏關(guān)鍵字符和字符截短。同樣也可以遷移到ng。后期還有不錯(cuò)的過濾器，還往這里面加

keyword:avalon,自定義,過濾器,中文,長字符,截短,截?cái)?truncate,隱藏字符，angular

隱藏關(guān)鍵字符

可能需要在前端某些頁面上隱藏一些關(guān)鍵信息（如果真正要隱藏，還是需要后端來處理），那么可以用到：

/**

* 隱藏字符串中關(guān)鍵code ,隱藏字符默認(rèn)為'*'

* 例如隱藏手機(jī)號(hào)，卡號(hào)：1890000000 - 189****0000; {{str|hide_code(3,4,'*')}}

* @param str

* @param pos 開始位置

* @param length 替換字符個(gè)數(shù)

* @param newChar 替換的字符/字符串

* @returns {*}

*/

avalon.filters.hide_code = function (str, pos, length, newChar) {

pos = pos || 0;

length = length || 0;

newChar = newChar || '*';

if (pos < 0 || length <= 0 || pos + length > str.length) {

return str;

}

var repStr = "";

for (var i = 0; i < length; i++) {

repStr += newChar;

}

return str.slice(0, pos) + repStr + str.slice(pos + length, str.length);

}

長字符截短（按字符截取，中文占兩字符-改進(jìn)版）

原avalon的truncate過濾器，是按照中文英文均占一個(gè)字符來截取。該過濾器改進(jìn)為中文占兩個(gè)字符英文一個(gè)字符來進(jìn)行截取

/**

* 對(duì)長字符串截短，以字符長度截取，中文占兩字符;{{str|truncatex(4,'...')}}

* @param str

* @param length,新字符串長度（按照英文字符算，一個(gè)中文占兩字符），包含truncation的字符個(gè)數(shù)

* @param truncation,新字符串的結(jié)尾的字段

* @returns {返回新字符串}

*/

avalon.filters.truncatex = function (str, length, truncation) {

var chinese_pattern = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;

// [\u4E00-\u9FA5]表示漢字，[\uFE30-\uFFA0]表示全角

str = str || " ";

length = length || 30;

truncation = typeof truncation === "string" ? truncation : "...";

var chineseIn = function (s) {

return chinese_pattern.exec(s) ? true : false;

};

var calcSize = function(source){

var strTemp = source.replace(chinese_pattern, "aa");

return strTemp.length;

};

var recursion = function (source, length) {

if (calcSize(source) <= length || (!chineseIn(source))) {

return source;

} else {

return recursion(source.slice(0, source.length - 1), length);

}

};

var sliceLength = length - truncation.length;

return calcSize(str) > length ? recursion(str.slice(0, sliceLength), sliceLength) + truncation : String(str);

}

以上所述是小編給大家介紹的Avalon中文長字符截取、關(guān)鍵字符隱藏、自定義過濾器的相關(guān)知識(shí)，希望對(duì)大家有所幫助