highlight高亮
玩转正则之highlight高亮
2013-10-07 05:16 by 靖鸣君, 584 阅读, 3 评论, 收藏, 编辑
程序员在编写代码的时候少不了和字符串以及“查询”打交道,两者的交集中有一个叫做正则表达式的的东西,这家伙用好了可以提高编程效率,用不好的话...你可以先去好好学一学。
关于正则的使用,举个简单的例子:
var m = location.href.match(/(\w+:)\/{0,3}([^\/]+)(?:(\/[^\?#]*))?(?:(\?[^#]+|.+))?(?:(#.*))?/);
var res = {
protocol: m[1],
host: m[2],
path: m[3],
search: m[4],
hash: m[5]
};
憋了几分钟= =||,我也觉得这个正则不是特别好理解(红黑相间了,应该稍微清晰点),有些朋友可能不知道(?:content)是什么意思,还有类似(?!content)和(?=content)分组和前瞻的知识,建议去问问度哥和谷娘。
一. 正则应用小DEMO示例
下面是一串随手写的代码,放在textarea中:
正则匹配,处理上面那堆字符串的小DEMO:
* @author 靖鸣君
* @date 2013-10-06
* @email barret.china@gmail.com
*/
//outer var
var a = "this id outer string";
//closure
function b() {
//inner var
var a = "this is inner string";
var g = a.replace(/this is inner string/g, function() {
return new Function("/*clousure*/this.a")();
});
/**
* @description closure - regExp test
* @author 靖鸣君
*/
function c() {
return {
a: a,
g: g
}
}
return c;
}
var s = b()(); //s.a, s.g
博客园引入个js文件还真罗嗦,有时候会报XSS(跨站脚本攻击)相关的错误,(如果木有正常显示,刷新下试试)。
如果还是没有,可以看另外一个demo:SAE/highlight
跟着提示,下一步下一步多点几下,可以看出效果还是可以滴。主要是这里的正则略微的麻烦,处理一个色变得琢磨老半天。
P.S:上面这玩意儿只是一个小测试,代码相当不健壮,拿着学习正则练手~
二. 需要注意的地方
//step config
var config = {
regs: [
/^\s+|\s+$/g,
/(["'])(?:\\.|[^\\\n])*?\1/g,
/\/(?!\*|span).+\/(?!span)[gim]*/g,
/(\/\/.*|\/\*[\S\s]+?\*\/)/g,
/(\*\s*)(@\w+)(?=\s*)/g,
/\b...\b/g
],
//...
};
这些正则我是分开来写的,主要是为了做上面那个demo,方便单步显示。但是把这些正则分开写是相当不合理的,放在textarea中的是一串没有任何标签的字符串,为了着色,每处理一个正则都会在codes中插入一些标签(我这里用的是span),当我们处理下一个正则的时候就必须得考虑上一步加入的标签,这样会很大程度提高开发难度,最好的做法是把这些正则都放到一坨,然后用|隔开:
var reg = (/^\s+|\s+$/)|(/(["'])(?:\\.|[^\\\n])*?\1/)|(/\/(?!\*|span).+\/(?!span)[gim]*/)|(/(\/\/.*|\/\*[\S\s]+?\*\/)/)|(/(\*\s*)(@\w+)(?=\s*)/)|(/\b(break|continue|do|for|in|function|if|else|return|switch|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void|Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location|true|false|null|undefined|NaN)\b)
这样放的好处是可以直接
codes.replace(reg, function(){
var args = arguments;
//...
});
一次性处理,不用担心插入标签影响最后的结果,因为标签是同一时间插入的,不会有干扰。
代码高亮插件highlight的基本原理也差不多,只不过他的容错机制和代码健壮性这块做的更加完善,我在代码里头加了一个配置文件,
var colors = {
string: "#FFA0A0",
reg: "#16E916",
note: "#888",
tag: "orange",
keywords: "#B0B0FF"
};
按照自己的喜好,也可以加以修改,类似这样的扩展,我们在写代码的时候稍微注意下,多留几个接口就好了。(不过这些活儿干起来都还挺辛苦的~)
没有做成插件,也没这个必要,知道基本原理然后动手实践下就差不多了。
三. 小结
类似很多的前端模板,artTemplate,baiduTemplate等都是对正则表达式的绝伦应用,很值得去看看源码,好好钻研人家都考虑了那些容易出错的点,源码都不长,两三百行。了解一个大概比较容易,但是当自己动手的时候总会发现很多细节问题处理不好,我那上面几个正则就倒弄了半天= =
另外一个配色方案,随便弄的,戳这里SAE/highlight。
正则表达式,用起来还是挺方便的。正则技能,你值得拥有~
JavaScript中的继承
2013-10-07 01:24 by 二当家的, 348 阅读, 0 评论, 收藏, 编辑
主要有:
构造函数继承(类继承)
原型继承
掺元类(拷贝继承)
构造函数继承的实现方式主要是借助于JavaScript中的 call , apply 方法可以绑定this的特点,以及使用 new 关键字生成实例,模仿传统的继承方式,而后者的继承才是JavaScript语言本身提倡的继承方式。相比于类继承,原型继承具有节约内存,效率较高等特点,代码也更优雅。下面以具体的例子来简单说明下三种继承的不同。
比如目前有两个类,分别是
function super(id){
this.superId = id;
}
和
function sub(name){
this.name = name;
}
要让sub继承super,使用类继承可以这样实现
function sub(id,name){
super.call(this,id);
this.name = name;
}
这样的方式也可以实现多重继承,只要多加几条 call 或者 appley 语句即可。
使用这种方法的缺点是每次实例化一个对象都会为对象中的属性和方法创建新的副本,浪费内存,而且这样的继承无法用 instanceof 操作符来判断。
而原型继承则是
sub.prototype = new super();
sub.prototype.constructor = sub;
这是最简单最少语句的原型继承实现。已经可以实现我们要的效果,不过还可以继续改进。
在sub对象中,不变的属性和方法我们都可以放在其原型中比如:
function super(){}
super.prototype.superId = 100086;
然后我们可以让sub直接继承super的原型
sub.prototype = super.prototype;
sub.prototype.constructor = sub;
这样写的好处在于可以避免创建超类的新实例,因为它可能非常大或超类的构造函数有一些其他的副作用比如要进行一些复杂的运算,总之,可以减少这方面时间的花费,减少内存的占用,提高代码效率,当然也还有一些缺点,那就是现在的 sub.prototype 与 super.prototype 指向了同一个对象,那么对sub.prototype的任何修改都会反映到super.prototype上,如果此时还有其他的对象继承了super.prototype那么,就会直接影响到其他的对象,这不是我们所希望看到的。而且再看这句代码:
sub.prototype.constructor = sub;
这句代码的本意是想修复sub.prototype的constructor属性,而现在将会连同super.prototype.constructor也一起修改了。
所以以上的原型继承还需要继续完善,看下面:
var F = function(){};
F.prototype = super.prototype;
sub.prototype = new F();
sub.prototype.constructor = sub;
这里借助了一个空对象作为中介,这样上面所提到的问题就解决了,改变sub.prototype只会修改F的实例,而不会影响到super.prototypel了,而且由于F是空对象,几乎不占内存。将上面的方法封装成一个函数
function extend(sub, super) {
var F = function(){};
F.prototype = super.prototype;
sub.prototype = new F();
sub.prototype.constructor = sub;
sub.super= super.prototype;
if(super.prototype.constructor == Object.prototype.constructor){
super.prototype.constructor = super
}
}
上面的最终版本多出了额外的几行代码,它的作用是提供给sub一个super属性,来弱化子类与超类之间的耦合关系,并且确保超类的的prototype的constructor属性已经被正确设置,即使超类就是Object本身。这在既要调用超类的方法又想重写超类的某个方法时可以派上用场,可以直接通过super属性来访问。据说这个函数就是YUI库的继承方式。
除了上面两种继承方式外,还有一种方法——使用掺元类,通过对象扩充的方式让这些类包含的方法共享给其他类,直观点就是拷贝复制。
function augment(reveivingClass, givingClass){
for(methodName in givingClass.prototype){
if(!receivingClass.prototype[methodName]){
receivingClass.prototype[methodName] = givingClass.prototype[methodName];
}
}
}
上面就是一个简单的扩充方法。还可以改进一下,如果掺元类中包含许多方法,但我们只想要复制其中的一两个,那么上面这个函数还可以再添加一个参数表示要拷贝的方法数组
function augment(reveivingClass, givingClass, copyArr){
if(copyArr){
for(var i = 0; i < copyArr.length; i++){
var methodName = copyArr[i];
if(!receivingClass.prototype[methodName]){
receivingClass.prototype[methodName] = givingClass.prototype[methodName];
}
}
}else{
for(var methodName in givingClass.prototype){
if(!receivingClass.prototype[methodName]){
receivingClass.prototype[methodName] = givingClass.prototype[methodName];
}
}
}
}
现在就可以使用 augment(sub, super, [‘trim’]) 这样的语句来达到只为sub类添加一个trim方法的目的了,如果想添加更多的方法,只要把方法方法名传入数组即可。
用这样的方法扩充一个类有时比继承另一个类更合适。
总结
这次主要学习了继承的几种不同实现方式,以及每种方法的优缺点,主要参考综合了阮一峰大神的关于JavaScript面向对象编程系列的博文以及JavaScript设计模式继承章节的内容。
highlight高亮的更多相关文章
- 正则&highlight高亮实现(干货)
写完正则表达式以后在浏览器上检测实在是不方便,于是就写了一个JS正则小工具,大大地提高了学习效率.学习之余用正则实现了一个highlight高亮demo,欢迎交流. 什么是正则表达式? 简单的说:正则 ...
- highlight高亮风格
highlight代码高亮的style有很多个,今天闲着没事,突然想看看各个style的效果.列在这里,以后想用的时候看看. ------------------------------------- ...
- 玩转正则之highlight高亮
程序员在编写代码的时候少不了和字符串以及“查询”打交道,两者的交集中有一个叫做正则表达式的的东西,这家伙用好了可以提高编程效率,用不好的话...你可以先去好好学一学. 关于正则的使用,举个简单的例子: ...
- 如何使用 highlight.js 高亮代码
highlight 是一款简单易用的 web 代码高亮插件,可以自动检测编程语言并高亮,兼容各种框架,可以说是十分强大了.下面就简单介绍一下如何使用这款插件. 两种使用方式: 1. 手动选择主题,官网 ...
- elasticsearch高亮之highlight原理
一.highlight简介 highlight是提升用户体验的重要手段,搜索引擎通过高亮突出命中关键字等方式,方便用户通过关键字周围的信息快速的确认是否是自己希望的结果: highlight功能通常包 ...
- js 正则练习之语法高亮
原文:js 正则练习之语法高亮 学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解.今天就分析下 次碳酸钴 和 Barret Lee 语法高亮实现. 先 ...
- 高亮代码 SyntaxHighlighter
SyntaxHighlighter: http://alexgorbatchev.com/SyntaxHighlighter/download/ demo <!DOCTYPE html PUBL ...
- WordPress代码高亮插件SyntaxHighlighter终极使用详解
子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命 ...
- 实战JS正则表达式
-正则表达式是一种文本模式的匹配工具. -文章导读: --1.正则对象的属性和方法 --2.字符串对象的方法 --3.使用正则表达式: ---3.1 给字符串加上千分符 ---3.2 字符串中出现次数 ...
随机推荐
- 数据结构之Huffman树与最优二叉树
最近在翻炒一些关于树的知识,发现一个比较有意思的二叉树,huffman树,对应到离散数学中的一种名为最优二叉树的路径结构,而Huffman的主要作用,最终可以归结到一种名为huffman编码的编码方式 ...
- 图解zookeeper FastLeader选举算法
zookeeper当配置为群集模式,在启动或异常情况将被选举为的例子Leader.默认选择算法FastLeaderElection. 不知道zookeeper够考虑这样一个问题:某个服务能够配置为多个 ...
- javascript的语法作用域你真的懂了吗
原文:javascript的语法作用域你真的懂了吗 有段时间没有更新了,思绪一下子有点转不过来.正应了一句古话“一天不读书,无人看得出:一周不读书,开始会爆粗:一月不读书,智商输给猪.”.再加上周五晚 ...
- C++拷贝构造函数具体解释
一. 什么是拷贝构造函数 首先对于普通类型的对象来说,它们之间的复制是非常easy的,比如: int a = 100; int b = a; 而类对象与普通对象不同,类对象内部结构一般较为复杂,存在各 ...
- hdu3689(kmp+dp)
题意:问随机生成一个长度为m(m<=1000)长度的字符串,出现某个子串s的概率是多少. 解法:dp+kmp优化.ans[i][j]表示i长度,走到了s的j位置的概率,当然这是在i之前没有出现s ...
- 【百度地图API】当地址解析失败时,如何调用search方法查找地址
原文:[百度地图API]当地址解析失败时,如何调用search方法查找地址 有个朋友问我,当地址解析失败时,应该如何处理呢?比如,他想搜索“南宁市青秀区”. --------------------- ...
- oracle 电子商务解决方案讲义
1. 电商营销(CRM) - 高端客户体验 2. 当当网李国庆做 "千千面"购物体验 3. 所使用的唯一的产品oracle的CRM 4. 个人的事情.谁在世界上是用户体验. 5. ...
- Oracle / PLSQL写语句的时候常使用的函数
最近在学习数据库方面的知识,做个标记. 这里有英文解释,建议多看看英文文档: https://www.techonthenet.com/oracle/functions/ 下面开始记录一下,自己在Or ...
- [顶]ORACLE PL/SQL编程详解之二:PL/SQL块结构和组成元素(为山九仞,岂一日之功)
原文:[顶]ORACLE PL/SQL编程详解之二:PL/SQL块结构和组成元素(为山九仞,岂一日之功) [顶]ORACLE PL/SQL编程详解之二: PL/SQL块结构和组成元素(为山九仞,岂一日 ...
- 用一条SQL语句取出第 m 条到第 n 条记录的方法
原文:用一条SQL语句取出第 m 条到第 n 条记录的方法 --从Table 表中取出第 m 条到第 n 条的记录:(Not In 版本) * FROM Table id ...