标签 js 下的文章

字符串+正则相关函数汇总

有这样几个和字符串替换中经常使用到的函数:replacematchsearchexectest,老是混淆,这里列出来对比。

前三个是字符串的方法,后面两个方法属于正则式。


String相关的函数:

1. replace

调用方法:str.replace(regexp|substr, newSubStr|function)

注意点:如果第一个参数为字符串或者非全局g的正则,替换只会发生一次。

'aaaa'.replace('a','b')==='baaa';
'aaaa'.replace(/a/,'b')==='baaa';
'aaaa'.replace(/a/g,'b')==='bbbb';

使用字符串作为第二个参数的时候,替换字符串newSubStr可以插入下面的特殊变量名

变量名代表的值
$$插入字符串 "$".
$&插入第一个参数所匹配的子串
$`插入匹配子串左边的内容.
$'插入匹配子串右边的内容.
$n or $nn如果n或nn是个十进制的数字,并且replace方法的第一个参数是个正则表达式,那么$n表示正则表达式中的第n个子匹配字符串.

- 阅读剩余部分 -

使用Canvas生成照片直方图

最近刚接触HTML5的Canvas,然后想做点小东西。

什么是照片直方图

直方图是用来直观地表示图片的RGB三种颜色通道在不同亮度值上面,所占的量的多少。

大家都知道,电脑上的数码照片的每个像素由红绿蓝三种颜色合成,所以一个像素具有R-红色,G-绿色,B-蓝色三种颜色的信息;每种颜色取值是0-255————当为0的时候,表示当前像素没有这种颜色,当为最大值255的时候,表示这种颜色含量已经最高。

比如,纯红色的RGB就是(255,0,0),即红色最多,不含绿色和蓝色。黄色由红色和绿色合成,所以纯黄色RGB就是(255,255,0)。

Photoshop的直方图

然后,直方图的横坐标从左到右依次是0到255,纵坐标没有上限,当x为定值的时候,不同颜色的y值表示的是:亮度(姑且这么称呼)为x的这种颜色的量有y这么多。

直方图在摄影中经常用到,通过查看照片的直方图,可以知道曝光是否准确。如果需要的是正常的曝光,那么就应该使照片的各种颜色集中在x的中间值,大约100-150区间内,直方图呈现中间凸起的形状。

更多的信息,大家可以搜索查看照片直方图

说了这么多,终于进入正题了。

DEMO演示

点击查看:Canvas生成照片直方图

思路说明:

先载入一张图,然后获取图片的每个像素的值,然后对每个像素的RGB值分别统计,然后得到一个数组包含了3种颜色的量。这里设的是一个叫做tj的二维数组,红色是tj[0],绿色是tj[1],蓝色是tj[2];用tj0的值来表示亮度为210的红色像素的数量。

得到tj数组之后转换为直方图:例如tj1=3872转换为在x为145,y为3872的像素的地方用绿色画一个点,当然,y太大的话,直方图太高,所以下面会将y除以10来“压扁”直方图。

代码部分的说明直接写到注释中了。

- 阅读剩余部分 -

JS中“较高级”的正则表达式知识点

Javascript的正则表达式虽然很早以前就接触过了,那时候还在做编辑的时候,用AS写了一个文本替换的小程序。

最近逛书店,发现有本21天学通XXX的系列书,一向对这种名字的书没有好感,不过还是很好奇地拿了起来,随便翻了一下,正好看到一些以前没有注意到的地方,回来继续查看犀牛书等书补充了一下。

(XXX)

capturing groups(捕获性分组,犀牛书上叫组合)。

这个最常见的,就是用括号把一部分表达式包起来,方便在后面用+或者*或者{n,m}等来表示数量等,又或者有时候要用到|的情况。


(?:XXX)

non capture group (非捕获性分组,犀牛书上叫只组合)

和捕获性分组的区别就是,这里的括号内的内容不被计算入分组,也就是说是不存入$1,$2这些里面的。


x(?=y)

lookahead (零宽度正预测先行断言、先行断言)

- 阅读剩余部分 -

JS控制滚轮横向滚动页面

本文的目的:

有时候遇到一个很宽的页面,想要用滚轮横向滚动,这时候一般的鼠标估计都不能做到吧?

演示

说得有点抽象,Demo请点击:JS控制滚轮横向滚动演示

鼠标滚轮事件介绍

鼠标滚轮事件一直以来没有统一的事件。太混乱了,各种浏览器甚至操作系统都会产生差异。

简单点来看,分成两个时间段。

最初的时候,所有的浏览器,除了FireFox,都支持一个叫做MouseWheelEvent的事件,甚至IE6都支持哦

addEventListener使用mousewheel即可,attachEvent则是onmousewheel

对于FireFox有一个类似的DOMMouseScroll事件,addEventListener的时候监听addEventListener

然后,到了后来,其实也就是现在,有了一个新的、标准的滚轮事件,就叫WheelEvent了。

得到了下列浏览器的支持:

Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
31 17.0 (17.0) 9.0 Not supported Not supported

不过MDN说

This is really different event object from MouseWheelEvent.

具体怎么不一样,没有说,不过我不在意,不过估计主要是Delta增量的不一样。

不同浏览器不同操作系统下wheelDelta, wheelDeltaX and wheelDeltaY value的差异:MDN原文(En)

对我来说,Delta量多少都无所谓,我只需要得到正向还是反向滚轮就好了,正负判断即可,一次滚轮事件触发一次想要的效果。

- 阅读剩余部分 -

Javascript对象、原型、继承什么的最傲娇了

最近辞职鸟,又可以开心地无打扰地学习了。O(∩_∩)O~
现实是残酷的,JS的对象和继承这部分看了好几个月了,还是没有进展,理解起来一团糟,超级抽象。
于是我开始自怨自艾,我开始后悔当初没有选择计算机专业,于是……

你是否和我一样的烦恼?
打住!
这不是你的错!

说说个人的感觉吧,W3School什么的讲得不错,不过太简略了,而网上百度出来的相关文章良莠不齐,好的文章多半是一些大牛的博客,需要一些背景知识才能看懂,而且他们好喜欢拿Java来类比,难不成为了这个比喻我还要去学习Java 囧rz……余下的,多数文章都是COPY,举的例子都那么雷同,正当我迷茫的时候,突然想起还有书这位好家伙。

书本是个好东西啊啊啊!!!
书的优点:知识系统!知识专业!表达严密!

下面进入正题

我觉得上面的吐槽才是主要的内容,下面的主要是笔记吧。

Javascript的对象这一节相信不是那么简单就能理解的,个人觉得主要的原因不是难,而是知识点比较广,另外比较抽象而又缺少实践。

先有几个概念要弄清:

  1. 先是对象的概念,这里不说了,为啥呢,因为网上的文章这部分都讲烂了。//感觉就是该详细的地方略过,不该详细的地方使劲举例。
  2. 然后是原型(prototype),网上说那么玄干嘛!说白了就是一个特殊的实例。对一个构造函数A来说,A的原型就是A的一个特殊的实例!用A.prototype来表示。这里补充一下,原型是对构造函数来说的,实例没有原型的说法,不过在浏览器内部,每一个实例会有一个_proto_的指针,指向的是把a生出来的时候A的原型,这个指向不可见,不过在chrome或者FF的控制台里面看得到,用a._proto_表示的,并且A的prototype和a的_proto_不是永远相等的!当a从A生出来之后,如果执行A.prototyoe=YYY,a._proto_就和A.prototype没有一毛钱关系了!A的原型就是YYY了,后来A生出来的宝宝的_proto_也是指向YYY了,而a._proto_还是指向最初的那个A的原型。

上面的prototype这个概念把我搞得好辛苦啊,还是看书好,对了,这本书就是《Javascript高级程序设计》Professional.JavaScript.for.Web.Developers.已经出到第三版了,我看的是第二版的。
然后就是几个检验实例和构造函数之间关系的函数。

  • constructor属性(Object.prototype.constructor):指向创造prototype属性所在的构造函数,是prototype的一个属性,可修改,除非是基本数据类型1、'1'、true。例:alert(a.constructor) //A
  • instanceof操作符:检查实例是否指向某个构造函数的原型。constructor属性指向是唯一的,instanceof就不是了,a可能既是A的实例又是B的实例,同时所有的实例都是Object的实例。例:
function A(){};
function B(){};
B.prototype = new A();
b = new B();
b instanceof B; //true
b instanceof B; //true
b instanceof Object; //true
  • isPrototypeOf()方法:检测某个原型是否是被某个实例所指向,正好和instanceof操作符逆向的操作,也就是说a instanceof A 等于 A.prototype.isPrototypeOf(a)。
    继续使用上面的例子,那么B.prototype.isPrototypeOf(b)就是true,A.prototype.isPrototypeOf(b)也是true。

注意这里的A.prototype和B.prototype是不等的,然后,B.protoype有一个隐藏的_proto_属性指向了A.prototype,而b的_proto_指向B.prototype,所以b当然也指向A.prototype啦。

  • hasOwnProperty()方法:如果实例的某个属性来自于实例,返回true,其余的比如来自于原型啊,就false。例:alert(a.hasOwnProperty("name"))
  • in操作符:不管实例的某个属性来自于实例自身还是实例通过原型访问到的,只要存在,都是true。例:alert("name" in a)。 PS:对于in操作符还有一个地方出现就是for in循环。

来,我们做点题目巩固一下。

function A(){};
function B(){};
function C(){};
B.prototype = new A();
b = new B();
B.prototype = new C();
b2 = new B();
b instanceof A; //true
b instanceof B; //false
b instanceof C; //false
b instanceof Object; //true 
b.constructor; //A
b2.constructor; //C

看完了还是一头雾水?那么……看书去吧o( ̄▽ ̄)o