關於AvalonJS
avalon是一個簡單易用迷你的MVVM框架，它最早發布於2012.09.15，為解決同一業務邏輯存在各種視圖呈現而開發出來的。 事實上，這問題其實也可以簡單地利用一般的前端模板加jQuery 事件委托 搞定，但隨著業務的膨脹， 代碼就充滿了各種選擇器與事件回調，難以維護。因此徹底的將業務與邏輯分離，就只能求助於架構。 最初想到的是MVC，嘗試過backbone，但代碼不降反升，很偶爾的機會，碰上微軟的WPF， 優雅的MVVM架構立即吸引住我，我覺得這就是我一直追求的解決之道。
MVVM將所有前端代碼徹底分成兩部分，視圖的處理通過綁定實現（angular有個更炫酷的名詞叫指令）， 業務邏輯則集中在一個個叫VM的對象中處理。我們只要操作VM的數據，它就自然而然地神奇地同步到視圖。 顯然所有神秘都有其內幕，C#是通過一種叫訪問器屬性的語句實現，那麼JS也有沒有對應的東西。 感謝上帝，IE8最早引入這東西（Object.defineProperty），可惜有BUG，但帶動了其他浏覽器實現它，IE9+便能安全使用它。 對於老式IE，我找了好久，實在沒有辦法，使用VBScript實現了。
Object.defineProperty或VBS的作用是將對象的某一個屬性，轉換一個setter與getter， 我們只要劫持這兩個方法，通過Pub/Sub模式就能偷偷操作視圖。為了紀念WPF的指引，我將此項目以WPF最初的開發代號avalon來命名。 它真的能讓前端人員脫離DOM的苦海，來到數據的樂園中！
題外話：
最近接手一個項目，前端采用avalon這個mvvm框架，對於先前接觸過angularjs的人來說，總感覺avalon還是“太”輕量了（非褒義）
網上為avalon背書的無外乎是說：國產，體積小，逃離dom操作，上手難度低，兼容ie6；劣勢是：“然而avalon也有自己的劣勢——知名度較低”，呃，我想靜靜.....
吐槽jquery過渡依賴選擇器，繁雜的dom操作，可是avalon的ajax和動畫效果還得指望其他控件，實際上往往卻又是和jquery搭配使用，吐槽jquery，卻又離不開jquery，真是悲劇... 說angular非常難上手，ng上手難度低好不，ng生態好，功能強大，文檔和翻譯齊全，社區成熟活躍，官方插件第三方插件一大堆。
性能問題，為了平衡開發效率和性能，這只是一種選擇問題。用過ng的人，也不會擔心什麼性能問題吐槽angular版本兼容性。可Avalon還是出現這樣的聲明：“注意 : 以上三個分支都比較穩定, 但互相不太兼容。 建議直接用2.0。”
以上只是吐槽那些文案背書，avalon也算一個不錯的框架，也一直在優化改進和吸收那些知名MVVM框架的優點，比如2.0版本，就新增了4個數組的過濾器，指令也進入了to do list。
希望哪天用過angular的人再來用avalon後都會說：哎喲，不錯哦！
分享兩個非常簡單的過濾器：隱藏關鍵字符和字符截短。同樣也可以遷移到ng。後期還有不錯的過濾器，還往這裡面加
keyword:avalon,自定義,過濾器,中文,長字符,截短,截斷,truncate,隱藏字符，angular
隱藏關鍵字符
可能需要在前端某些頁面上隱藏一些關鍵信息（如果真正要隱藏，還是需要後端來處理），那麼可以用到：
/**
* 隱藏字符串中關鍵code ,隱藏字符默認為'*'
* 例如隱藏手機號，卡號：1890000000 - 189****0000; {{str|hide_code(3,4,'*')}}
* @param str
* @param pos 開始位置
* @param length 替換字符個數
* @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);
}
長字符截短（按字符截取，中文占兩字符-改進版）
原avalon的truncate過濾器，是按照中文英文均占一個字符來截取。該過濾器改進為中文占兩個字符英文一個字符來進行截取
/**
* 對長字符串截短，以字符長度截取，中文占兩字符;{{str|truncatex(4,'...')}}
* @param str
* @param length,新字符串長度（按照英文字符算，一個中文占兩字符），包含truncation的字符個數
* @param truncation,新字符串的結尾的字段
* @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中文長字符截取、關鍵字符隱藏、自定義過濾器的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！