Avalon中文长字符截取、关键字符隐藏、自定义过滤器


Posted in Javascript onMay 18, 2016

关于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中文长字符截取、关键字符隐藏、自定义过滤器的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
详解angular中的作用域及继承
May 31 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
vue中的inject学习教程
Apr 24 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 #Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 #Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 #Javascript
深入理解JQuery中的事件与动画
May 18 #Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 #Javascript
jQuery添加options点击事件并传值实例代码
May 18 #Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 #Javascript
You might like
MVC模式的PHP实现
2006/10/09 PHP
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python Property属性的2种用法
2015/06/21 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Django跨域请求原理及实现代码
2020/11/14 Python
新大陆软件面试题
2016/11/24 面试题
生日宴会主持词
2014/03/20 职场文书
2014年党支部工作总结
2014/11/13 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
贫困证明书范文
2015/06/16 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书