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功能函数代码
Jun 23 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
JavaScript基本编码模式小结
May 23 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
jquery实现显示已选用户
Jul 21 Javascript
js中split和replace的用法实例
Feb 28 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
vue实现计算器功能
Feb 22 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
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
javascript基本类型详解
2014/11/28 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
详解a++和++a的区别
2017/08/30 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
python 实现控制鼠标键盘
2020/11/27 Python
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
考博自荐信
2013/10/25 职场文书
班级入场式解说词
2014/02/01 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
干部考察材料范文
2014/12/24 职场文书
廉洁自律证明
2015/06/24 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫