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 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
javascript的函数
2007/01/31 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
python套接字流重定向实例汇总
2016/03/03 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
服装发布会策划方案
2014/05/22 职场文书
运动会通讯稿600字
2015/07/20 职场文书
感恩主题班会教案
2015/08/12 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
分享Python获取本机IP地址的几种方法
2022/03/17 Python
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫