JavaScript Array Remove

大牛John Resig写的Array Remove方法 第一种:扩展JavaScript的内置对象Array // Array Remove – By John Resig (MIT Licensed) Array.prototype.remove = function(from, to) { var rest = this.slice((to || from) + 1 || this.length); this.length = from < 0 ? this.length + from : from; return this.push.apply(this, rest); }; // Remove the second item from the array array.remove(1); // Remove the [...]

解放你的浏览器

在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出“脚本运行时间过长“的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化。 为什么会出现这种情况呢,我们先来看一下浏览器的内核处理方式: 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程。 1:JavaScript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来然后加以处理,浏览器无论再什么时候都只有一个JS线程在运行JS程序。 2:GUI 渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。 3:事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执 行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS 引擎处理。 了解了浏览器的内核处理方式就不难理解浏览器为什么会进入假死状态了,当一段JS脚本长时间占用着处理机就会挂起浏览器的GUI更新,而后面的事件 响应也被排在队列中得不到处理,从而造成了浏览器被锁定进入假死状态。另外JS脚本中进行了DOM操作,一旦JS调用结束就会马上进行一次GUI渲染,然 后才开始执行下一个任务,所以JS中大量的DOM操作也会导致事件响应缓慢甚至真正卡死浏览器,如在IE6下一次插入大量的HTML。而如果真的弹出了 “脚本运行时间过长“的提示框则说明你的JS脚本肯定有死循环或者进行过深的递归操作了。 Nicholas C. Zakas认为不论什么脚本,在任何时间、任何浏览器上执行都不应该超过100毫秒,否则一定要将脚本分解成若干更小的代码段。那么我们该如何来做呢: 第一步,优化你的循环,循环体中包含太多的操作和循环的次数过多都会导致循环执行时间过长,并直接导致锁死浏览器。如果循环之后没有其他操作,每次循环只处理一个数值,而且不依赖于上一次循环的结果则可以对循环进行拆解,看下面的chunk的函数 function chunk(array, process, context) { setTimeout(function() { var item = array.shift(); process.call(context, item); if (array.length > 0) { setTimeout(arguments.callee, 100); }), 100); } chunk()函数的用途就是将一个数组分成小块处理,它接受三个参数:要处理的数组,处理函数以及可选的上下文环境。每次函数都会将数组中第一个 对象取出交给process函数处理,如果数组中还有对象没有被处理则启动下一个timer,直到数组处理完。这样可保证脚本不会长时间占用处理机,使浏 览器出一个高响应的流畅状态。其实在我看来,借助JS强大的闭包机制任何循环都是可拆分的,下面的版本增加了callback机制,使可再循环处理完毕之 后进行其他的操作。 function chunk(array,process,cbfun){ var i=0,len = array.length;    //这里要注意在执行过程中数组最好是不变的 setTimeout(function(){ process( array[i] [...]

JQuery设计思想

jQuery是目前使用最广泛的javascript函数库。 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。 对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。 虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松。因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多。初学者常常感到,入门很方便,提高很困难。 目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的《jQuery基础》(jQuery Fundamentals)。在Google里搜索”jQuery 培训”,此书排在第一位。jQuery官方团队已经同意,把此书作为官方教程的基础。 这本书虽然是入门教材,但也足足有100多页。我对它做了一个详细的笔记,试图理清jQuery的设计思想,找出学习的脉络。我的目标是全面掌握jQuery,遇到问题的时候,心里有底,基本知道使用它的哪一个功能,然后可以迅速从手册中找到具体的写法。 下面就是我的笔记,它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识,就能看懂它,在最短的时间里,掌握jQuery的所有主要方面(除了ajax和插件开发)。

JavaScript时间格式转换及Date对象总结

1、当前系统区域设置格式(toLocaleDateString和toLocaleTimeString) 例子:(new Date()).toLocaleDateString() + ” ” + (new Date()).toLocaleTimeString() 结果: 2008年1月29日 16:13:11 2.普通字符串(toDateString和toTimeString) 例子: (new Date()).toDateString() + ” ” + (new Date()).toTimeString() 结果:Tue Jan 29 2008 16:13:11 UTC+0800 3.格林威治标准时间(toGMTString) 例子: (new Date()).toGMTString() 结果:Tue, 29 Jan 2008 08:13:11 UTC 4.全球标准时间(toUTCString) 例子: (new Date()).toUTCString() 结果:Tue, 29 Jan 2008 08:13:11 UTC 5.Date对象字符串(toString) 例子: (new Date()).toString() 结果:Tue Jan 29 [...]

getElementsByClass方法

function getElementsByClass(searchClass, node, tag) { var classElements = new Array(); if (node == null) node = document; if (tag == null) tag = ‘*’; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp(“(^|\s)” + searchClass + “(\s|$)”); for (i = 0, j = 0; i < elsLen; i++) { if (pattern.test(els[i].className)) [...]

给Function对象添加方法的几种方式

1,添加静态方法 其实就是给对象增加属性,其值为一个function,可直接用点选择符进行调用。 //创建Function extend方法 Function.prototype.extend=function (w, v){ if (w == null) { return this; } if (typeof w != “string”){ for (var x in w) { this[x]=w[x]; } }else{ this[w]=v; } return this; } //注册静态方法 var myFn=function(){}; myFn.extend({ say:function(){ alert(“I’m OK”); }, cry:function(){ alert(“5555555″) } }); myFn.say();//return I’m OK 2,扩展原型对象 需创建新对象,然后调用新增方法,这是与静态方法的不同之处。 //创建Function implement方法 Function.prototype.implement=function (w, [...]

URL的井号

去年9月,twitter改版。 一个显著变化,就是URL加入了”#!”符号。比如,改版前的用户主页网址为   http://twitter.com/username 改版后,就变成了   http://twitter.com/#!/username 在我印象中,这是主流网站第一次将”#”大规模用于直接与用户交互的关键URL中。这表明井号(Hash)的作用正在被重新认识。本文根据HttpWatch的文章,整理与井号有关的所有重要知识点。

Firebug控制台详解

Firebug是网页开发的利器,能够极大地提升工作效率。 但是,它不太容易上手。我曾经翻译过一篇《Firebug入门指南》,介绍了一些基本用法。今天,继续介绍它的高级用法。

如何判断Javascript对象是否存在

javascript语言的设计不够严谨,很多地方一不小心就会出错。 举例来说,请考虑以下情况。 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明。用自然语言描述的算法如下:   if (myObj不存在){     声明myObj;   } 你可能会觉得,写出这段代码很容易。但是实际上,它涉及的语法问题,远比我们想象的复杂。Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法。只有对Javascript语言的实现细节非常清楚,才可能分得清它们的区别。

关于URL编码

一、问题的由来 URL就是网址,只要上网,就一定会用到。 一般来说,URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号。比如,世界上有英文字母的网址 “http://www.abc.com”,但是没有希腊字母的网址“http://www.aβγ.com”(读作阿尔法-贝塔-伽玛.com)。这是 因为网络标准RFC 1738做了硬性规定: “…Only alphanumerics [0-9a-zA-Z], the special characters “$-_.+!*’(),” [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL.” “只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*’(),”[不包括双引号]、以及某些保留字,才可以不经过编码直接用于URL。” 这意味着,如果URL中有汉字,就必须编码后使用。但是麻烦的是,RFC 1738没有规定具体的编码方法,而是交给应用程序(浏览器)自己决定。这导致“URL编码”成为了一个混乱的领域。 下面就让我们看看,“URL编码”到底有多混乱。我会依次分析四种不同的情况,在每一种情况中,浏览器的URL编码方法都不一样。把它们的差异解释清楚之后,我再说如何用Javascript找到一个统一的编码方法。