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实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
Javascript动画效果(4)
Oct 11 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python运用于数据分析的简单教程
2015/03/27 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
简单了解Django项目应用创建过程
2020/07/06 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
链表面试题-一个链表的结点结构
2015/05/04 面试题
安全月活动总结
2014/05/05 职场文书
授权委托书
2015/01/28 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
观后感的写法
2015/06/19 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python