浏览模式: 标准 | 列表分类:Javascript
Submitted by gouki on 2009, October 15, 9:51 AM
在美拓的BLOG【http://meito.22web.net/?p=51】上面看到这篇文章，先说说我的理解吧。
jQuery的代码中，this是代表了当前对象。例如：$("#test").click(function(){ alert(this.value )});，在这个方法里，如果用了this，那就是相当于直接使用了 test 元素这个对象，有点象document.getElementById("#test")一样【说的我自己都迷糊了。。。】在这个方法中的this，就是ID为test的元素本身
而$(this)，则是把这个元素对象重新进行了 jQuery的包装。。。
说的太乱了。。。。直接看美拓的原文吧。
-------原文开始-------------
起初以为this和$(this)就是一模子刻出来。但是我在阅读时，和coding时发现,总不是一回事。
What is “this”?
In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.
JavaScript代码
- $("#textbox").hover(
- function() {
- this.title = "Test";
- },
- fucntion() {
- this.title = "OK”;
- }
- );
这里的this其实是一个Html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了，Error–报了。
Error Code：
JavaScript代码
- $("#textbox").hover(
- function() {
- $(this).title ＝ "Test";
- },
- function() {
- $(this).title = "OK";
- }
- );
这里的$(this)是一个JQuery对象，而jQuery对象沒有title 属性，因此这样写是错误的。
JQuery拥有attr()方法可以get/set DOM对象的属性，所以正确的写法应该是这样：
正确的代码：
JavaScript代码
- $("#textbox").hover(
- function() {
- $(this).attr(’title’, ‘Test’);
- },
- function() {
- $(this).attr(’title’, ‘OK’);
- }
- );
使用JQuery的好处是它包裝了各种浏览器版本对DOM对象的操作，因此统一使用$(this)而不再用this应该是比较不错的选择。
---EOF---
看来还是不行啊我。。语言组织能力太差
Tags: jquery
Javascript | 评论:2
| 阅读:21684
Submitted by gouki on 2009, October 12, 12:49 PM
来自司徒正美，比较方便的关键符号替换。
司徒正美认为：
不用多言，这种技术被广泛应用于表单验证，语法高亮和危险字符过滤中。一段话如果很长，如果不想像下面那样替换，我们得想些办法了。
他先给了个简单的例子：
JavaScript代码
- var hash = {
- '<' : '<' ,
'>' : '>',
'…' : '…',
'“' : '“' ,
'”' : '”' ,
'‘' : '‘' ,
'’' : '’' ,
'—' : '—',
'–' : '–'
- };
-
- str = str.
- replace( /&(?!#?\w+;)/g , '&' ).
- replace( /"([^"]*)"/g , '“$1”' ).
- replace( /[<>…“”‘’—–]/g , function ( $0 ) {
- return hash[ $0 ];
- });
并表示：缺陷也很明显，如哈希的键必须是简单的普通字符串，不能是复杂正则，这就是我们不得不分开的原因。replace在老一点的浏览器是不支持function的。为此，我们只好放弃上面最后那个replace方式，替换方统一为普通字符串。
于是，他扩展的String的基类，添加了一个方法：
JavaScript代码
- String.prototype.multiReplace = function ( hash ) {
- var str = this, key;
- for ( key in hash ) {
- if ( Object.prototype.hasOwnProperty.call( hash, key ) ) {
- str = str.replace( new RegExp( key, 'g' ), hash[ key ] );
- }
- }
- return str;
- };
并给出了实现代码：
JavaScript代码
- str = str.multiReplace({
- '&(?!#?\\w+;)' :'&',
'"([^"]*)" : '“$1”',
'<' : '<' ,
'>' : '>',
'…' : '…',
'“' : '“' ,
'”' : '”' ,
'‘' : '‘' ,
'’' : '’' ,
'—' : '—',
'–' : '–'
- });
Look，多简单啊。如果觉得我这里的表示更简单的话，请看原文http://www.cnblogs.com/rubylouvre/archive/2009/10/12/1581094.html
Javascript | 评论:1
| 阅读:17012
Submitted by gouki on 2009, October 11, 10:04 PM
关于这个话题，是因为我一直在用FF，而且也经常在返回页面后，原来的数据还在。。。
平时感觉不出什么，也觉得会挺方便。但是，在作测试的时候，问题就来了。实在不不方便。。。。
所以，
Question
在Firefox等浏览器中，如果你打开一个页面并进行若干操作，例如在文本框进行输入，甚至点击按钮进行Ajax操作更新页面局部，这些操作的结 果都会被缓存下来。在你点击链接离开这个页面后，如果你通过后退按钮回到这个页面，你会发现它仍出于你离开时的状态，而非页面刚刚加载好后的初始状态。在 一些情况下，这样的缓存方式是符合我们预期的；但在另外一些情况下，我们更希望页面恢复到初始状态，或者说让页面从零开始重新加载一边。我们如何才能让浏 览器尊重我们的选择呢？
Answer
如果你只是希望页面不缓存加载后的变更，后退就恢复到最初加载的状态，你只需要一个空白的unload事件就可以了：
window.onunload = function(){};
其中的原理是，Firefox等浏览器会尝试通过“挂起（suspend）”的方式来缓存页面，使得后退能够恢复到页面之前被挂起那一刻的状态。然 而如果unload事件有处理函数，浏览器就认为你可能已经对页面进行了析构处理，这时候页面已经不可能回到正常的交互状态，也就不能以挂起的方式来缓存 页面。
如果我们希望允许浏览器挂起页面，同时又需要知道何时被挂起何时被恢复，那该怎么办呢？我们可以用window对象上的pageshow和 pagehide事件。当页面被挂起并隐藏时，pagehide事件会被触发；当页面被恢复到挂起前状态并显示出来时，pageshow事件会被触发。Firefox从1.5开始就支持这两个事件，Safari最新的nightly build也支持这两个事件。
来源：http://www.cnblogs.com/cathsfz/archive/2009/10/09/1579666.html
Javascript | 评论:0
| 阅读:17035
Submitted by gouki on 2009, October 9, 3:50 PM
不得不说如今的技术发展已经到了一个坎了。
剩下的就是如何把技术转化为经济了
用javascript编写游戏已经不是什么新鲜事，这里要推荐的是用纯javascript编写的windows xp系统中自带的蜘蛛纸牌游戏，兼容IE6-8,firefox,safari,chrome,opera浏览器。
除了分数提交之外，其它的基本与系统中的蜘蛛纸牌一样。大家可以玩玩。 游戏地址：http://carnot.cn/jsspider
这是从：http://www.cnbeta.com/articles/95099.htm来的消息。图片就不截了。反正XP的电脑里应该都有蜘蛛纸牌。。。
Javascript | 评论:0
| 阅读:17997
Submitted by gouki on 2009, September 21, 11:27 AM
极其标悍：http://www.cnblogs.com/rubylouvre/archive/2009/09/18/1568794.html
好象现在的很多用法不是第一种就是第二种，看了下面的测试，才知道原来性能相差这么大？恐怖之极。
司徒正美，博客园作者。。
原文如下：
W3C那帮人的脑袋被驴踢了，直到javascript1.8.1才支持trim函数（与trimLeft，trimRight），可惜现在只有 firefox3.5支持。由于去除字符串两边的空白实在太常用，各大类库都有它的影子。加之，外国人都很有研究精神，搞鼓了相当多实现。
实现1
1.String.prototype.trim = function() {
2. return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
3.}
看起来不怎么样，动用了两次正则替换，实际速度非常惊人，主要得益于浏览器的内部优化。一个著名的例子字符串拼接，直接相加比用Array做成的StringBuffer还快。base2类库使用这种实现。
实现2
1.String.prototype.trim = function() {
2. return this.replace(/^\s+/, '').replace(/\s+$/, '');
3.}
和实现1很相似，但稍慢一点，主要原因是它最先是假设至少存在一个空白符。Prototype.js使用这种实现，不过其名字为strip，因为Prototype的方法都是力求与Ruby同名。
实现3
1.String.prototype.trim = function() {
2. return this.substring(Math.max(this.search(/\S/), 0),this.search(/\S\s*$/) + 1);
3.}
以截取方式取得空白部分（当然允许中间存在空白符），总共调用了四个原生方法。设计得非常巧妙，substring以两个数字作为参数。Math.max以两个数字作参数，search则返回一个数字。速度比上面两个慢一点，但比下面大多数都快。
实现4
1.String.prototype.trim = function() {
2. return this.replace(/^\s+|\s+$/g, '');
3.}
这个可以称得上实现2的简化版，就是利用候选操作符连接两个正则。但这样做就失去了浏览器优化的机会，比不上实现3。由于看来很优雅，许多类库都使用它，如JQuery与mootools
实现5
1.String.prototype.trim = function() {
2. var str = this;
3. str = str.match(/\S+(?:\s+\S+)*/);
4. return str ? str[0] : '';
5.}
match是返回一个数组，因此原字符串符合要求的部分就成为它的元素。为了防止字符串中间的空白符被排除，我们需要动用到非捕获性分组 （?:exp）。由于数组可能为空，我们在后面还要做进一步的判定。好像浏览器在处理分组上比较无力，一个字慢。所以不要迷信正则，虽然它基本上是万能 的。
实现6
1.String.prototype.trim = function() {
2. return this.replace(/^\s*(\S*(\s+\S+)*)\s*$/, '$1');
3.}
把符合要求的部分提供出来，放到一个空字符串中。不过效率很差，尤其是在IE6中。
实现7
1.String.prototype.trim = function() {
2. return this.replace(/^\s*(\S*(?:\s+\S+)*)\s*$/, '$1');
3.}
和实现6很相似，但用了非捕获分组进行了优点，性能效之有一点点提升。
实现8
1.String.prototype.trim = function() {
2. return this.replace(/^\s*((?:[\S\s]*\S)?)\s*$/, '$1');
3.}
沿着上面两个的思路进行改进，动用了非捕获分组与字符集合，用?顶替了*，效果非常惊人。尤其在IE6中，可以用疯狂来形容这次性能的提升，直接秒杀火狐。
实现9
1.String.prototype.trim = function() {
2. return this.replace(/^\s*([\S\s]*?)\s*$/, '$1');
3.}
这次是用懒惰匹配顶替非捕获分组，在火狐中得到改善，IE没有上次那么疯狂。
实现10
01.String.prototype.trim = function() {
02. var str = this,
03. whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
04. for (var i = 0,len = str.length; i < len; i++) {
05. if (whitespace.indexOf(str.charAt(i)) === -1) {
06. str = str.substring(i);
07. break;
08. }
09. }
10. for (i = str.length - 1; i >= 0; i--) {
11. if (whitespace.indexOf(str.charAt(i)) === -1) {
12. str = str.substring(0, i + 1);
13. break;
14. }
15. }
16. return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
17.}
我只想说，搞出这个的人已经不是用牛来形容，已是神一样的级别。它先是把可能的空白符全部列出来，在第一次遍历中砍掉前面的空白，第二次砍掉后面的 空白。全过程只用了indexOf与substring这个专门为处理字符串而生的原生方法，没有使用到正则。速度快得惊人，估计直逼上内部的二进制实 现，并且在IE与火狐（其他浏览器当然也毫无疑问）都有良好的表现。速度都是零毫秒级别的。
实现11
01.String.prototype.trim = function() {
02. var str = this,
03. str = str.replace(/^\s+/, '');
04. for (var i = str.length - 1; i >= 0; i--) {
05. if (/\S/.test(str.charAt(i))) {
06. str = str.substring(0, i + 1);
07. break;
08. }
09. }
10. return str;
11.}
实现10已经告诉我们普通的原生字符串截取方法是远胜于正则替换，虽然是复杂一点。但只要正则不过于复杂，我们就可以利用浏览器对正则的优化，改善 程序执行效率，如实现8在IE的表现。我想通常不会有人在项目中应用实现10，因为那个whitespace 实现太长太难记了（当然如果你在打造一个类库，它绝对是首先）。实现11可谓其改进版，前面部分的空白由正则替换负责砍掉，后面用原生方法处理，效果不逊 于原版，但速度都是非常逆天。
实现12
1.String.prototype.trim = function() {
2. var str = this,
3. str = str.replace(/^\s\s*/, ''),
4. ws = /\s/,
5. i = str.length;
6. while (ws.test(str.charAt(--i)));
7. return str.slice(0, i + 1);
8.}
实现10与实现11在写法上更好的改进版，注意说的不是性能速度，而是易记与使用上。和它的两个前辈都是零毫秒级别的，以后就用这个来工作与吓人。
下面是老外给出的比较结果，执行背景是对Magna Carta 这文章（超过27,600字符）进行trim操作。
| 实现 |
Firefox 2 |
IE 6 |
| trim1 |
15ms |
< 0.5ms |
| trim2 |
31ms |
< 0.5ms |
| trim3 |
46ms |
31ms |
| trim4 |
47ms |
46ms |
| trim5 |
156ms |
1656ms |
| trim6 |
172ms |
2406ms |
| trim7 |
172ms |
1640ms |
| trim8 |
281ms |
< 0.5ms |
| trim9 |
125ms |
78ms |
| trim10 |
< 0.5ms |
< 0.5ms |
| trim11 |
< 0.5ms |
< 0.5ms |
| trim12 |
< 0.5ms |
< 0.5ms |
原文链接：http://blog.stevenlevithan.com/archives/faster-trim-javascript
注意本文非翻译，只是根据其中提到的trim函数实现发表自己的想法，想知道原作者说什么请看原文。
Tags: trim
Javascript | 评论:1
| 阅读:18115
