IT博客-A JavaScript Fancier-随笔分类-javascript技巧总结

利用arguments.callee实现匿名函数的递归

Yemoo'S JS Blog — Thu, 10 Jul 2008 02:13:00 GMT

实现递归的算法大家都是很熟悉的，比如一个求0到n的和的递归函数如下：

var fn=function(n){
        if(n>0) return n+fn(n-1);
        return 0;
    }
    alert(fn(10))

当然这是一个很简单的函数，如果在一个很复杂的程序中我们可能只需要调用一次该函数，为了函数的精简我们当然要努力较少函数名的定义，这是很自然会想到用匿名函数来直接执行。但是如果是匿名函数如何实现递归？arguments.callee正好派上用场，他指代的就是当前执行的函数的引用。

利用匿名函数实现的递归如下：

var s=(function(n){
        if(n>0) return n+arguments.callee(n-1);
        return 0;
    })(10);
    alert(s)

一点小总结，主要是对匿名函数及arguments.calle的一些应用，例子举的不是很恰当，但这些知识在开发中还是有用的，总计起来增强一下自己的记忆。

Yemoo'S JS Blog 2008-07-10 10:13 发表评论

有关onpropertychange事件的一点小发现

Yemoo'S JS Blog — Mon, 23 Jun 2008 05:42:00 GMT

      相信很多web开发朋友都使用过onpropertychange这个事件，虽然是ieOnly但也能帮我们不少忙，可能我们只知道该事件在输入框值发生变化的时候会被立即触发，其实这里还有很多我们小秘密。

      首先从名字上看onpropertychange上来看，应该是属性改变的时候被触发。做个测试。

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
  <script type="text/javascript">

  script>

     执行上面的代码，单击输入框发现也会触发onpropertychange，输入一个值同样也会触发这个事件，这就证明了，只要有属性的值被修改就会触发该事件。

     第二、既然我们发现了这个特点，那就会有一个问题了：当我们有时在输入框值发生改变时希望执行一个函数操作，但同时也要修改一个自定义的属性，这样onpropertychange就会被触发两次，这个可能并不是我们所希望的。
    猜想一下，既然提供了这么一个属性，那一定应该能获取到是哪个属性被改变了。试着获取参数个数及参数内容.

  <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
  <script type="text/javascript">

  script>

执行上面一段代码，会发现弹出了1和[object]，这说明该事件只给回调函数传入一个参数而且是object类型。
那我们就试试遍历一下这个object。

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
  <script type="text/javascript">

  script>

执行一下，发现有很多个属性，但仔细看我们可能会发现这么一个属性：propertyName，相信每个人都能猜到这个属性的意思了。对，这个就是用来获取哪个属性被修改的。

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
  <script type="text/javascript">

  script>

   分别单击文本框和输入一个值，会发现分别弹出了myprop和value。

   再回到我们开始的问题，我们只需要判断是否是value被改变就ok了。
   直接看代码吧：

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
  <script type="text/javascript">

  script>

Yemoo'S JS Blog 2008-06-23 13:42 发表评论

“【XPATH错误】方法未知：-->contains(@<-” 的解决办法

Yemoo'S JS Blog — Mon, 23 Jun 2008 05:40:00 GMT

今天使用xpath做一个模糊查询，在使用了一句 result=this.xmlDocRoot.selectNodes(".//*[contains(@c,'"+value+"')]");的语句时，居然报“方法未知：-->contains(@<-”的js错，郁闷半天，不明白是怎么回事，以前一直都这样用的，语句没有问题。
详细对比了下以前的脚本，发现了一句不同地方：即创建xmlDom后有这么一句“xmlDom.setProperty('SelectionLanguage','XPath');”，突然回忆起来，原来在xmldom中使用xpath语法需要做一个声明，加上这一句测试，问题果然解决！对这个问题印象更加深刻了。希望对同样有遇到此问题的朋友能有所帮助。

Yemoo'S JS Blog 2008-06-23 13:40 发表评论

判断html元素是否真正可见的巧妙方法

Yemoo'S JS Blog — Mon, 23 Jun 2008 05:37:00 GMT

在Ext中，几乎所有的组件都有isVisible()方法和hidden属性，都是用来判断是否组件元素是否可见，这在ext内部管理来说没有问题，但有时我们把组件放在了自己的html结构内，如果我们把自己编写的html元素通过css定义为隐藏后，使用ext的isVisible方法和hidden属性就不能正确获取到组件是否可见了，因为ext也仅仅是根据判断元素的visibility和display属性来确定元素是否可见的。因此如果本身没有设定隐藏而外层设定了隐藏，则不能通过这两个css属性来判断元素是否可见了。

在实际的应用中，有时还必须需要知道元素的真实的可见性，但此时通过ext的内部方法就不管用了，思考测试许久突然想起了一个元素，当元素不可见时读取其实际高度或宽度则可能返回0，测试发现果然如此。
通过读取其offsetXXX或clientXXX来判断，或者使用Ext的getSize或getComputedWidth/Height方法获取，如果元素在页面不可见则会返回0，根据这点我们就可以获取到元素的真正可见性了。

如我们需要在元素可见时执行一些操作，则可以如下组织代码：

var timer=setInterval(function(){
    if(el.getComputedHeight()>0||el.getComputedWidth()>0){
            //do something
            clearInterval(timer);
    }
},1)

Yemoo'S JS Blog 2008-06-23 13:37 发表评论

try finally 妙用,防止内存泄漏【转自51js】

Yemoo'S JS Blog — Wed, 18 Jun 2008 06:58:00 GMT

觉得作者的思路实在绝妙，很佩服！以前也曾经对这样的问题很无奈，没想到居然还能有如此一招！

<div id="d1">div>
<script >
function createButton(){
         var obj = document.createElement("button");
          obj.innerHTML="点我!";
          obj.onclick=function(){
                      //处理click事件
            }
          obj.onmouseover=function(){
                   //处理mouseover事件
         }
        return obj;//这里由于需要返回创建的对象，所以不能把obj直接设为null. return 后obj是局部变量，不能在外部断开其与HTMLElement的引用.ie中将出现问题泄漏问题
}
var 按钮 = document.getElementsById("d1").appendChild( createButton());
按钮.做某些事();
按钮.做某些事();
..
某些东西.某些事(按钮);

script>

这种写法在IE中100%内存泄漏

使用try finally很容易解决些问题

一个函数或方法中，其实有很多地方都需要这种选返回值，最后执行某些事的

Yemoo'S JS Blog 2008-06-18 14:58 发表评论

JS完美实现对象克隆

Yemoo'S JS Blog — Wed, 18 Jun 2008 06:53:00 GMT

我们知道，在js中，当object作为参数传递到函数中进行处理后，实际上是修改了传入的对象本身（或者说是对象的引用），但很多时候我们并不希望函数去修改我们的这些对象参数，这就需要使用到对象的克隆，我们应该对该对象做一个克隆，然后操作这个克隆的对象，这样就不会影响我们的原对象了。
不过在js中并没有对象克隆功能，因此需要我们自己实现，实现方法也不复杂其实，基本上是做一些属性复制，我在网上找了一些，但有些实现并不好，如对于array对象克隆后就成json对象了，并没有保留原来的数组方式。不过最后还是找到了一个很好的克隆函数，完美实现了js对象的克隆功能，不论是Array对象或者是普通的Object，都可以很好的进行克隆，这个函数使用constructor(函数构造器)进行复制。

具体代码如下：

Object.prototype.Clone = function(){
    var objClone;
    if (this.constructor == Object){
        objClone = new this.constructor();
    }else{
        objClone = new this.constructor(this.valueOf());
    }
    for(var key in this){
        if ( objClone[key] != this[key] ){
            if ( typeof(this[key]) == 'object' ){
                objClone[key] = this[key].Clone();
            }else{
                objClone[key] = this[key];
            }
        }
    }
    objClone.toString = this.toString;
    objClone.valueOf = this.valueOf;
    return objClone;
}

Yemoo'S JS Blog 2008-06-18 14:53 发表评论

实现Ext Grid宽高自适应

Yemoo'S JS Blog — Fri, 30 May 2008 03:09:00 GMT

不知是Ext的Bug还是其他原因，当初始化grid并将宽度设为100%时，其宽度会变成10000px宽，高度100%则grid高度根据grid内容自适应，而不是根据其所在容器自适应，一直没有很好的办法，只能使用绝对宽高，但有时这是很不方便的。
对此问题一直耿耿于怀，后来终于想出了一个办法，还真的可行，但就是感觉有点蹩脚。
一般我们都通过render到指定id的层上来展现grid，虽然不能让grid宽高自适应，但层还是可以的。
如我们这里要用到的层是

。我们可以在这个层上设置高宽。
如

。
则在初始化grid的时候让其宽高与orgGrid宽高相同即可，并在页面resize时重新计算器宽度即可（一般高度固定还是比较好）。

js代码如下：

//..前面若干行代码省略，如ds/colmodel等
var orgGrid=Ext.get("orgGrid");  //展示grid的容器
    var grid = new Ext.grid.GridPanel({
        title:"人员管理",
        ds: ds,  //数据源
        cm: colModel,  //列模式
        sm:selMode,    //选择模式
        width:orgGrid.getComputedWidth(),
        height:orgGrid.getComputedHeight(),
        autoExpandColumn:"memory",  //自动扩展宽度的列
        autoScroll:true,
        loadMask:{msg:"数据加载中，请稍等"}
     });
     ds.load();
     grid.render(orgGrid);  //把grid铺到id为grid的容器中

window.onresize=function(){
        grid.setWidth(0);
        grid.setWidth(orgGrid.getComputedWidth());
};

这样不论页面宽度怎么变化grid都会自适应页面容器了。
<

Yemoo'S JS Blog 2008-05-30 11:09 发表评论

建立优美的面向对象JS编程风格

Yemoo'S JS Blog — Thu, 29 May 2008 06:01:00 GMT

由于js语言自身语法的灵活性，使得在js程序中出现了各种各样的代码风格，但也正因为如此，导致了代码的可读性和可维护性大大降低，特别随着项目的不断更新，js代码的不断增多，到后期维护时甚至连自己写的代码都不知所以然了，因此确定一种好的代码风格是很有必要的。

近两年随着ajax的兴起，js变得越来越受“重用”，js开始在web开发中中充当着非常重要的角色，因此也开始遇到了各种各样的问题。于是很多牛人们就提出了js的面向对象编程方法。

使用面向对象的编程思想实现js代码其实也并不难，实现方法也又多种，比如prototype原型，new object()等方法。前面的每个方法都有其自己的优缺点，但都存在一个问题，那就是对于js变量作用域的控制。如果不能很好控制js变量作用域，就可能导致对象内部变量被外部肆意修改，从而导致程序被破坏，不便于程序的维护，对象的封装特性和程序健壮性都大打折扣。被由于js本身没有很好的对变量范围的定义（public/private等限定符），因此在js的面向对象编程中也就遇到了变量的控制问题，特别是对于对象内部的公有变量在prototype原型方法中都很难实现。

如下面一段程序：

function testCls(a){
        this.a=a;
}
testCls.prototype.alertA=function(){
        alert(this.a);
}
var test=new testCls(5);
test.alertA();  //弹出5
alert(test.a);  //同样弹出5

要在其方法alertA中显示对象的内部公用变量a的值就必须在构造函数中通过this赋值，然后在方法中通过this引用。这样本身是没有什么问题，但这样a变量其实就成了一个全局变量，任何testCls的对象都可以直接引用到a，如上例中通过test.a获取到a的值。但很多时候我们并不希望一些对象变量对外公开，即不允许外部程序访问。这应该如何实现呢？如何才能实现一种更好的面向对象编程方式呢？

当然我们可能都会想到这种方式：

这样其实也很好解决了上面提到的问题，但是总又点不雅观，所有变量和方式都混杂在一起看起来很难区分哪些是可以公开访问哪些是不允许公开访问的，哪些是对象的私有变量和公开变量。这样在可读性上就有点差强人意了，我们可以去寻找一种更为雅观的实现方式。

其实只要利用js的闭包特性这个问题就很好搞定了，这也是俺从ext的源码中学习到的。

示例代码如下：

同样的实现上面的功能，而且将对象私有变量和公有变量完全分开区域，一目了然，很容易区分出哪些是私有变量哪些是公有变量，这样程序的可读性就得到了大大的提高，而且对对象变量也得到了很好的控制。

如此优美的实现方法，真的让我们不得不叹服js的伟大，当然也要赞一下Extjs的开发者们。

Yemoo'S JS Blog 2008-05-29 14:01 发表评论

使Ext的Template可以解析二层的json数据

Yemoo'S JS Blog — Tue, 29 Apr 2008 16:16:00 GMT

{id: 'myid', cls:{o:'myclass'}, name: 'foo', value: 'bar'}

Ext的Template支持通过传入json数据的方式进行模板替换。
API中有这样一段示例：

var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls}">{name:trim} {value:ellipsis(10)}span>',
    'div>'
);
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});

稍作修改做个测试：

var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls}">{name} {value}span>',
    'div>'
);
var dt=t.apply({id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
alert(dt);

运行上面的代码会弹出

foo bar

说明替换成功。

但如果又这样一个模板数据：

我们想在替换时将模板中原cls部分替换为cls.o的值，也就是myclass，该怎么做呢？是不是想直接用{cls.o}，你可以试下，绝对无效，没有替换。因为template匹配替换是直接对{}中冒号前的字符串与JSON变量进行匹配的。当然找不到cls.o这个串所以也就不能匹配。
好在Template支持对数据的解析处理。
我们可以自己定义一个解析函数即可。其实很简单：

我们定义了一个叫parseJSON的解析方法，在模板中访问顶层的cls然后对cls(是一个object)的值进行处理（直接访问它的o属性）即可。

Yemoo'S JS Blog 2008-04-30 00:16 发表评论

undefined==null！

Yemoo'S JS Blog — Mon, 31 Mar 2008 03:54:00 GMT

貌似以前也看过null==undefined，null!==undefined，但也一直没有在意。

近日看过去别人的一程序源码，到处都有一些如if(x!=undefined&&x!=null&&x!="")之类的判断，突然觉得写的很啰嗦，俺一般都直接if(x){}因为不论null、undefined、""在条件判断中其实都是false，何需如此啰嗦？（不过要注意如果你的x==0也是合法值的话就不能使用if(x){}来做条件判断了）

为了证明这种多余，俺也特意做了以下测试：
var x;
alert(x)
if(x==null){
alert('failed')
}

其中x为一个未初始化的变量，即undefined。
运行以上代码：先后弹出undefined和failed，说明x==null是符合条件的。

我们可以直接alert(null==undefined)其实也可以发现返回了true。

这都说明进行x==null||x==undefined或x!=null&&x!=undefined之类的写法纯属多余！

一般只需判断null或undefined一个即可。
<

Yemoo'S JS Blog 2008-03-31 11:54 发表评论

JS文件传参及处理技巧

Yemoo'S JS Blog — Tue, 11 Mar 2008 11:18:00 GMT

其实为js文件传参是很久就接触过的一个问题，只是一直没有放在心上，今天在无忧看到又有人问这个问题，今日总结一下。

解决思路：

1、首先获取到当前JS文件的SRC属性，这里有一个小技巧：我们只需要获取当前页面最后一个script标记内容即可。
为什么？？因为JS是顺序解析的，当前JS脚本解析时后面的js都还没有解析到，当然就认为自己就是最后一个script了。此外，这样获取还有一个好处：我们可以多次引用同一个文件且传入不同的参数，这样可以在js文件中根据参数不同做不同处理，很巧妙把！简直就是动态语言了。
代码如下：

var scripts=document.getElementsByTagName("script");
var curJS=scripts[scripts.length-1]; //curJS就是我们当前的js文件

得到这个就好办了，通过curJS.src即可获取到完整的路径内容（包括参数）。

2、下面的就是解析参数内容了，解析的过程相当简单，相信很多人都容易完成这一步。
但我们要对一个特殊情况进行处理：如果一个参数被传入了多次，则要将该参数值转换为数组存储每一个传入的值。

演示地址：http://www.ajaxbbs.net/test/getArgs/

完整测试脚本如下：

测试示例的HTML源码：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript" src="test.js?id=4&username=yemoo&id=1&uid=110">script>
  <script type="text/javascript" src="test.js?id=5&username=ajaxbbs&id=7&uid=253">script>
  <script type="text/javascript" src="test.js?id=6&username=jack&id=8&uid=258">script>
head>
<body>
body>
html>

Yemoo'S JS Blog 2008-03-11 19:18 发表评论

三种For循环写法的性能比较

Yemoo'S JS Blog — Tue, 18 Dec 2007 15:47:00 GMT

循环作为程序语言的三大逻辑控制结构之一，在实际开发是经常会遇到的。
在JavaScript程序的循环结构使用上，我们经常会遇到这种应用。
根据一个对象的长度进行循环并对对象每个每个元素进行处理。

如

for(var i=0;i<a.length;i++){
sum+=a[i]
}

以上只是一个简单的示例，对于如上程序，很多程序开发者都研究过关于其执行效率的问题。
因此就出现了以下的两种写法：

for(var i=0,iLen=a.length;i<iLen;i++){
sum+=a[i]
}

for(var i=0,item;item=a[i];i++){
sum+=item;
}
或
for(var i=0,item;(item=a[i])!=undefined;i++){
sum+=item;
}

对于三种写法其性能到底有多大差异呢？到底哪个的效率更高呢？

我在自己的机器上对其做了测试：
发现在10000条数据以下时三者执行速度差别不大，差别大概在0.01m左右，而且测试结果不稳定。
然后将数据变为50w条进行测试：
三种方法测试结果分别为：
1182
981
1673（而且出现“程序执行缓慢，是否取消该脚本”的提示）

1572
1462
12067（同样出现了脚本加载缓慢的提示）

尽管数据并不是非常稳定，但还是能从中发现点什么的。

速度最快的是第二种写法：即保存对象长度，避免每次都计算。
速度最慢的是第三种写法：即不关系对象的长度，而根据当前项是否存在来循环。

之前我一直以为是第三种写法速度应该是最快的（因为不用计算长度），今日一测才发现第三种的执行效率如此低下，看来还是避免使用。当然，很多时候我们可能还是不得不使用这第三种写法。

测试程序如下：（建议分开对三个程序进行测试，特别是在FF下）

Yemoo'S JS Blog 2007-12-18 23:47 发表评论

IE及FF下关于setTimeout传参的研究总结

Yemoo'S JS Blog — Tue, 18 Dec 2007 14:34:00 GMT

昨晚看《JavaScript核心技术》的BOM一章，上面写到setTimeout除了我们知道的两个参数（执行的函数，延迟时间）外后面还可以传一些参数，这些参数就是传递给“执行函数”的参数。

如 setTimeout(function add1(x,y){alert(x+y)},2000,3,5)会在2秒后弹出8，也许现在都明白这些参数的含义了。

近日突然想起于是测了一下，却失望的发现在IE下会弹出NaN，然后在add1里弹出arguments.length返回0，可见并没有将后面的两个参数传入add1中，不过在FF下确实是可以传入到add1中，看来又是一个IE/FF不兼容的特性，如此的一个特性其实挺好的，不晓得IE为何就不支持呢？每次都要在外面套一层Function真是麻烦。

接着在FF下测试setTimeout(function add1(){alert(arugments.length)},2000);执行后居然返回1，明明没有传参的，接着执行setTimeout(function add1(){alert(arugments.length)},2000,3);返回2，这不是多出了一个参数吗？

然后alert了最后的参数，发现延迟不同每次返回结果也都不同，而且都是数字。难道是setTimeout函数本身的执行时间？恩，应该是这样的，setTimeout本身执行也会有时间开销的。

作如下测试：

function add(){
alert((new Date().getTime()-t)+","+arguments[0]);
}
var t=new Date().getTime();
setTimeout(add,1000);

对延迟进行修改测试出了以下数据：
延迟时间    弹出内容
1000         1009,8
2000         1998 -2
3000         3006 6

发现一个小规律：执行时间差-那个奇怪的参数约等于延迟时间。
那个参数有点像setTimeout的执行的时间，但怎么会有负值呢？它的意义大概就是实际延迟时间与设定延迟时间的差值吧。

这个问题就到这里吧。

还有一个问题，能否在IE下实现如FF下setTimeout的功能呢？
网上查了一下，已经有人去实现了这个，偶对其做简单改造，发布出来，其中对于计算差值的一行在实际中可以去掉，这里只是为了模拟和FF下完全一样的接口效果。

实现方法也并不复杂，主要利用了JS的call和apply，对call和apply不熟悉的可以先查看一下他们的用法。

Yemoo'S JS Blog 2007-12-18 22:34 发表评论

用js实现模板替换机制

Yemoo'S JS Blog — Wed, 05 Dec 2007 09:44:00 GMT

Ext中为String扩展了一个静态方法format用于实现对字符串类模板机制的格式化。

如String.format("{0},{1},{2}","a","b","c");返回a,b,c。

看了一下其实现方式觉得比较优雅，而且该函数在实际当中也很有实用价值，于是自己就将其略加改造，实现对字符串的模板替换。

代码如下：

String.prototype.template=function(){
    var args=arguments;
    return this.replace(/\{(\d+)\}/g, function(m, i){
        return args[i];
    });
}

var a="arg1:{0},arg2:{1},arg3:{2}";
alert(a.template("a","b","c"));  //arg1:a,arg2:b,arg3:c
alert(a.template("1","2","3")); //arg1:1,arg2:2,arg3:3

主要用replace+巧妙的正则实现。

调用方式很简单，首先建立一个模板字符串。如a="{0},{1}"，每个模板字符用{数字}表示。
然后直接调用a.template("arg1","arg2","arg3");
传入的参数与模板中定义的模板字符会对应着被替换。

Yemoo'S JS Blog 2007-12-05 17:44 发表评论

使用eval动态创建变量的一个小提示

Yemoo'S JS Blog — Wed, 05 Dec 2007 09:41:00 GMT

eval虽然是一个很消耗资源的操作，但很多时候我们还非要靠它不可。

比如使用eval动态创建变量，如var a="str"，我们可能希望将a的值str创建成为一个变量并赋值为test，这时大概只能靠eval了。

第一次偶遇到这个问题，想都没想直接来了下面一句代码：eval(a)="test"，结果一执行就给出了一个错误：“不能给函数返回值赋值”，顿时恍然大悟，eval怎么说也是个函数啊，我们大概都没有写过如myfunc(a)=""的语句。因为函数本身返回的也是一个值，将一个值赋给一个值当然不会正确了。

因为eval的强大和其特殊差点使我忘记了它还是个函数。

正确的写法应该这样：eval(a+"='test'");
即将整个语句eval即可，一点小提示，以后不能再犯这种低级错误了！

Yemoo'S JS Blog 2007-12-05 17:41 发表评论

JavaScript创建命名空间(namespace)的最简实现

Yemoo'S JS Blog — Wed, 05 Dec 2007 09:39:00 GMT

最近看Ext源代码，看到了其实现命名空间函数的实现方法：

Ext NameSpace实现代码：

  namespace : function(){
            var a=arguments, o=null, i, j, d, rt;
            for (i=0; i<a.length; ++i) {
                d=a[i].split(".");
                rt = d[0];
                eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
                for (j=1; j<d.length; ++j) {
                    o[d[j]]=o[d[j]] || {};
                    o=o[d[j]];
                }
            }
        }

鄙人喜好最简编程（这很多时候并不是一个好习惯，写的越简单程序一般越难理解），于是就想用更短的方式解决这个问题。
尝试了将近半个小时写下了下面的实现，基本该考虑的情况都考虑，至少不会覆盖页面已经存在的函数。

实现代码如下：

你可以保存以下代码进行测试：

测试代码：

Yemoo'S JS Blog 2007-12-05 17:39 发表评论

关于JavaScript中apply与call的用法意义及区别

Yemoo'S JS Blog — Fri, 30 Nov 2007 02:37:00 GMT

JavaScript中有一个call和apply方法，其作用基本相同，但也有略微的区别。

先来看看JS手册中对call的解释：

call 方法
调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

参数
thisObj
可选项。将被用作当前对象的对象。

arg1, arg2, , argN
可选项。将被传递方法参数序列。

说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

说明白一点其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

引用网上一个代码段，运行后自然就明白其道理。

<input type="text" id="myText"   value="input text">
<script>
    function Obj(){this.value="对象！";}
    var value="global 变量";
    function Fun1(){alert(this.value);}

    window.Fun1();   //global 变量
    Fun1.call(window);  //global 变量
    Fun1.call(document.getElementById('myText'));  //input text
    Fun1.call(new Obj());   //对象！
script>

call函数和apply方法的第一个参数都是要传入给当前对象的对象，及函数内部的this。后面的参数都是传递给当前对象的参数。
运行如下代码：

可见分别弹出了func和var。到这里就对call的每个参数的意义有所了解了。

对于apply和call两者在作用上是相同的，但两者在参数上有区别的。
对于第一个参数意义都一样，但对第二个参数：
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])

同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入

Yemoo'S JS Blog 2007-11-30 10:37 发表评论

收藏一篇关于JavaScript继承的E文

Yemoo'S JS Blog — Mon, 19 Nov 2007 01:47:00 GMT

读了两遍，有所领悟，收藏以便今后温习。
翻译水平不行，就直接贴地址了。
网址：http://kevlindev.com/tutorials/javascript/inheritance/index.htm

Yemoo'S JS Blog 2007-11-19 09:47 发表评论

有关appendChild和innerHTML

Yemoo'S JS Blog — Tue, 30 Oct 2007 04:18:00 GMT

在我们向dom页面写入一些内容时，一般我们都是既使用innerHTML也可以使用appendChild，两者功能似乎没有多大差别。很多朋友一定也对这两个东西感到困惑，今天写代码时我就想到了这个问题，两者真的没有差别吗？

在网上查看了一些文章，然后再通过自己一些测试，得到了如下一些结论。

1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。
可运行下面的代码测试：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
head>

<body>
<div id="test1">div>
<input type="button" onclick="innerTest()" value="testInnerHTML">
<div id="test2">div>
<input type="button" onclick="appendTest()" value="testAppendChild">

  <script type="text/javascript">

  script>
body>
html>

2、如果appendChild的参数是页面存在的一个元素，则执行后原来的元素会被移除，如document.getElement("a").appendChild(document.getElementById("b"))，执行后，b元素会先被移除，然后再添加到a中。
3、通过appendChild添加到的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性，而innerHTML则是纯字符串，不能获取内部元素的属性。
4、在使用上innerHTML比appendChild要方便，特别是创建的节点属性多，同时还包含文本的时候。

因此在使用时如果数据量较大且对性能有所要求时，还是应该使用appendChild。

Yemoo'S JS Blog 2007-10-30 12:18 发表评论

增强程序的灵活性--使用JSON作为函数的参数

Yemoo'S JS Blog — Fri, 26 Oct 2007 04:24:00 GMT

var rootMenu=new Ext.tree.TreeNode({
        text:"示例中心",
        expanded:true
    });

Ext.MessageBox.show({
            title:"消息提示区内容",
            msg:hArea.dom.innerHTML,
            width:200,
            buttons:Ext.MessageBox.OK,
            animEl:hArea
        });

使用过Ext的朋友可能会发现，在其所有的API中大量用到了JSON对象，Ext使用类如配置的方式来生成各个页面对象等，其特点就是函数的参数大都是json对象，其主要特点就是函数的参数大都是json对象。
如

等等此类的用法在Ext中到处可见，那么那样写有什么优点呢？为什么不直接写函数参数而要通过JSON对象作为参数传入？

今日查看了Ext的帮助说明才真正认识到使用json对象作为函数参数的优点。
总结两点：

1、程序灵活性高，容易扩展和使用。
我们可以随时为一个函数添加/删除参数或在任意参数位置添加新参数，而不会像传统参数一样必须按照规定的顺序书写，而且每次添加或删除函数某个参数都要函数内容进行修改。而使用JSON作为参数可以不用考虑参数顺序。
看下面代码演示：

普通函数缺点很明显：必须记忆参数意义和顺序。而使用JSON的方法则不需要。

2、使用者对函数的调用非常方便，特别是在只需要传入其中几个或一个参数时。
看下面的代码演示：

JSON方法优点很明显：每次只需传入需要的参数即可，而不用考虑其他参数。

JSON真是一个好用的东西，不用在ajax方面还是在js的其他方面都体现了其方便灵活的特性，的确应该好好去挖掘和学习json。

Yemoo'S JS Blog 2007-10-26 12:24 发表评论

使用JS+Ajax记录用户鼠标移动过程【译-附原文】

Yemoo'S JS Blog — Mon, 22 Oct 2007 09:19:00 GMT

I just found some piece of code i created one or two years ago. The “movelogger” records the mouse movement a users does on a web site. Just before the user leaves the current page, the recorded data get posted back to the server using AJAX.
我发现了一两年前写的一些代码。其中一个"movelogger"的程序用于记录一个用户在网站浏览过程中的鼠标移动过程。当用户离开当前页面之前，我们可以通过ajax将这些记录的数据发送到服务端。

The cool thing is that you can “replay” these movements afterwards. The movelogger records clicks on links and other elements. In replay mode this events are fired in the exact same order as they have been recorded.
That way it would be possible to record a websesion (the click-flow) in a heavy AJAX based application. It would even be possible to record keyboard strokes and other type of events.
一个很酷的事就是我们可以之后重新“回放”这些移动行为（过程），movelogger还可以记录链接及其他一些元素的点击行为。在回放模式这些事件操作会像用户原来的操作过程和方式一样重新被触发。通过这种方法我们可以在一些基于ajax的程序中记录websesion（点击流），或者可以记录一些键盘的敲击或其它的一些事件等。

Check out the little demo of the movelogger here.
点击此处可查看一个movelogger的demo示例。

This technique may be usefull or not. But some use cases could be:
Instead of eye tracking, use mouse tracking.
Analyze the usage of ajax enabled websites.
Spionage and other Bad Things™ (not recommended).
这种技术可能会有用或者是没用的。但可能会有下面的一些使用场景：
使用鼠标跟踪代替眼睛跟踪。
分析一些ajax的站点的使用方式。
spionage或其它的一些坏事（不建议使用）

The whole thing is coded in javascript using Prototype and script.aculo.us with some php code on the server side.
这个程序的完整代码包括基于prototype和script.aculo.us的客户端javascript代码和用于服务端的php代码。

The data recorded on the demo website is stored only in the php session on the server and gets deleted automatically, soon after you close your browser. But theoreticaly it would be possible to store that data in some kind of database for further analysis.
在demo示例中记录数据保存在了php服务端的session中，当您关闭浏览器后它会自动删除。但在理论上它可以存储在各种数据库中
以便于以后分析或做其它应用。

Yemoo'S JS Blog 2007-10-22 17:19 发表评论

使用正则批量替换单元格空白

Yemoo'S JS Blog — Wed, 17 Oct 2007 04:33:00 GMT

在我们做table页面时可能都遇到过如果为table设定了大于0的边框border，当某个单元格中的内容未填充时在IE下浏览就会出现该单元格边框不显示的现象，这严重印象了表格界面的美观。我们一般使用填充的方法来解决这个问题，但是如果我们一个个的手工填充似乎就显得有些麻烦了，当表格内容复杂时这种修改可能会是一个极大的工程。
今天偶就想用js对这些替换进行批量的解决，首先想的的遍历单元格进行替换：

代码如下：

发现在表格数据很多时速度有些慢，对1800行xxxx的行进行替换需要1.5秒之多，毕竟这里使用循环变量，效率低是很正常的，于是开始想直接对整个表格进行搜索替换而不用循环来解决，思虑几分钟之后写出了如下代码：

执行了一下，效率的确提高了很多，和上面同样多的数据基本只需要60-70毫秒左右，这基本可以满足要求了。

考虑到只需要对ie做如上处理且在FF下不支持outerHTML的写法，再加上一个简单的浏览器判断搞定。

最终代码：

在需要对表格内的单元格做空白处理时只需调用tdSpace即可，参数为table的id。

演示地址：http://ajaxbbs.net/test/replaceTdSpace.html

Yemoo'S JS Blog 2007-10-17 12:33 发表评论

iframe src为图片时的高度自适应

Yemoo'S JS Blog — Fri, 12 Oct 2007 08:21:00 GMT

对于iframe高度自适应的问题，网上已经被讨论n次了，一般通过在iframe加载完毕时访问iframe内页body的offsetHeight和offsetWidth然后更新iframe的高宽来实现。
今日遇到的自适应问题与以往有一些不同，这次的src是一张图片，而且是一张大小不确定的图片（从数据库取出来的数据生成的），在此使用以往的方式似乎就没有那么灵验了。突然想到img标记的高宽是可以获取到的。于是突然有了思路。

解决办法如下：
先动态生成一个img元素，在iframe页面加载完成时(onload)将其src赋给img标记，然后获取该img的高宽，再动态修改iframe高宽即可，同时不要忘了设定iframe页面body的margin和padding为0，否则会由于padding和margin默认不为0的缘故导致出现滚动条。

测试代码如下：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript">

  script>
head>

<body>
<input type="button" value="test" onclick="document.getElementById('a').style.display=''">
  <iframe src="1.jpg" id="a" style="display:none" scrolling="auto" onload="resize(this)">iframe>
body>
html>

Yemoo'S JS Blog 2007-10-12 16:21 发表评论

JS中的instanceof和typeof

Yemoo'S JS Blog — Wed, 10 Oct 2007 07:15:00 GMT

对于instanceof和typeof，以前偶尔的用到过，特别是typeof用到的相对更多一些，今日研究ext源码，很多地方都用到了instanceof，突然觉得他们两个有些相似但也应该有他们区别，网上看了一些文章，对它们之间的关系有了一定的了解。

instanceof和typeof都能用来判断一个变量是否为空或是什么类型的变量。
typeof用以获取一个变量的类型，typeof一般只能返回如下几个结果：number,boolean,string,function,object,undefined。我们可以使用typeof来获取一个变量是否存在，如if(typeof a!="undefined"){}，而不要去使用if(a)因为如果a不存在（未声明）则会出错，对于Array,Null等特殊对象使用typeof一律返回object，这正是typeof的局限性。

如果我们希望获取一个对象是否是数组，或判断某个变量是否是某个对象的实例则要选择使用instanceof。instanceof用于判断一个变量是否某个对象的实例，如var a=new Array();alert(a instanceof Array);会返回true，同时alert(a instanceof Object)也会返回true;这是因为Array是object的子类。再如：function test(){};var a=new test();alert(a instanceof test)会返回true。

谈到instanceof我们要多插入一个问题，就是function的arguments，我们大家也许都认为arguments是一个Array，但如果使用instaceof去测试会发现arguments不是一个Array对象，尽管看起来很像。

Yemoo'S JS Blog 2007-10-10 15:15 发表评论

转换字符串为json对象的方法

Yemoo'S JS Blog — Mon, 08 Oct 2007 06:17:00 GMT

JSON是一种便于操作使用的轻量级数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。具体介绍请查看：http://www.json.org。

很多时候我们需要组装字符串为json对象，首先要组合字符串，然后转换为json对象，如下面的例子：

组合成了字符串arr，下一步就是转换成对象了，很快我们会想到使用eval方法，但如果这样做转换会出现错误，今日偶就这样尝试了，那该如何转换成json对象呢？郁闷许久，之后在json官网提供的json.js文件中找到了解决办法，方法如下：
在字符串两端再加上括号然后eval就ok了。测试代码如下：

上面代码执行后会弹出“xxx”，说明已经成功转换为json对象了，一个似乎很简单的问题，不过还是郁闷了半天才解决掉，还是记到blog上以加深印象，也希望能帮助遇到此问题的朋友早日解除郁闷。

Yemoo'S JS Blog 2007-10-08 14:17 发表评论

判断浏览器刷新与关闭的代码

Yemoo'S JS Blog — Sun, 30 Sep 2007 08:23:00 GMT

当浏览器退出时会触发onunload事件，因此我们可以使用onunload事件做一些在页面关闭时要执行的操作，如提示用户信息等。但或许在实际应用中我们都发现一个问题，刷新浏览器同样会触发onunload事件，也就是只要是离开该页面就会触发onunload事件，或许刷新时我们并不想执行onunload定义的操作，或者我们只想在刷新时执行某操作，这样我们就遇到了一些麻烦。
本以为这种问题没有什么解决办法，没想到还是有牛人用很牛的办法解决了这个办法，这里俺就把找到的两段代码共享出来，希望对正好需要解决此问题朋友有所帮助。

方法一：

<HTML>
<HEAD>
<TITLE>判断是刷新还是关闭－www.51windows.NetTITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Author" CONTENT="51windows,海娃,haiwa">
<META NAME="Description" CONTENT="Power by 51windows.Net">
HEAD>

<script>
function CloseOpen(event) {
if(event.clientX<=0 && event.clientY<0) {
alert("关闭");
}
else
{
alert("刷新或离开");
}
}
script>
<body onunload="CloseOpen(event)">
BODY>
HTML>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'>div>

第二种做法：

Yemoo'S JS Blog 2007-09-30 16:23 发表评论

超链接js事件导致IE6中GIF动画停止的解决办法

Yemoo'S JS Blog — Fri, 28 Sep 2007 04:26:00 GMT

其实这个也是曾经让俺头疼的一个问题，当时怎么都找不到原因，后来才知道这是IE6浏览器的一个bug，不过后来也没有在注意过这个问题。
      今日在蓝色经典发现有网友遇到了同样的问题，而且下面的回复者似乎也都不太清楚是什么造成，感觉还是有很多朋友会遇到这种问题的。于是在此对此bug出现的原因解释下下希望对各位有用！

      造成GIF停止的代码语句一般都是如下形式：

      如果你的gif突然停止，请检查您的代码是否有类如上面的语句调用!
     尽管将js语句直接写在链接的href属性上是允许的，但有时就会造成页面gif动画全部停止的现象。

      因此建议将js还是写在元素的事件上更合适，如

这样就可以避免gif停止的问题了。

Yemoo'S JS Blog 2007-09-28 12:26 发表评论

不能同时打开多个全屏窗口的解决办法

Yemoo'S JS Blog — Thu, 27 Sep 2007 01:21:00 GMT

您的系统登陆后是否是全屏的？如果是，您是否发现当保持你已经登入的系统全屏窗口后再次通过系统登录时仍然是一个全屏窗口，或者直接全屏窗口变成白板？或者提示“拒绝访问”的js错误？

偶所在公司的一些项目都出现了这种问题，当一个系统在一个机器上同时登录多个帐号（弹出多次全屏窗口）时，新开的窗口会将之前的全屏刷成白板。开始以为是IE的bug，没多在意，之后发现很多人都提这个问题，于是决定去探究下是否有解决办法。想到window.open弹出全屏，首先想到是否窗口名冲突，开始查看window.open的调用，找到如下代码：

workspace = window.open(targetURL, "workspace", "fullscreen=0,menubar=0,toolbar=0,directories=0,location=0,status=1,scrollbars=0");

想想不可能是workspace变量冲突，因为它只是一个页面级变量，新开的页面不会和之前页面定义的变量冲突，在看发现了window.open的第二个参数workspace，这个参数的意义之前我没有在意过，以为没有什么意义，突然感觉这个应该是代表窗口的名字，以便程序可以通过该名字来识别该窗口。如果定义了这个名字，那么在第二次弹出窗口时因为能找到workspace窗口所以并没有重新打开而是在workspace页面内重新写内容了。完全正确。之后偶特意写代码测试了。当然，这样就好解决了，只要把这个参数省略或定义不同的名字就可以解决这个问题。

看下面的测试：
window.open的第二个参数定义了相同名字

window.open的第二个参数定义了不同名字

Yemoo'S JS Blog 2007-09-27 09:21 发表评论

实现JS对象的克隆

Yemoo'S JS Blog — Tue, 25 Sep 2007 10:32:00 GMT

在js里没有类似JAVA的clone方法，无法实现对对象的克隆，一般使用等号操作符来传递对象，但这样就造成了指针关联问题，修改任何一个对象，其关联的对象也会被改变，但很多时候我们只想得到一个对象的拷贝，而非引用。今日偶就遇到了这个问题，以前还真没有注意过这个，朋友给找了两个方法，感觉写的都不错。只是实现稍有不同，但大体原理是相对的，即逐项复制对象内容。
相信这段代码对很多web开发的朋友都会有用。

方法一：定义一个clone方法来实现。

function clone(myObj){
  if(typeof(myObj) != 'object') return myObj;
  if(myObj == null) return myObj;

  var myNewObj = new Object();

  for(var i in myObj)
    myNewObj[i] = clone(myObj[i]);

  return myNewObj;
}

方法二：通过object原型扩展实现

Object.prototype.Clone = function()
{
    var objClone;
    if ( this.constructor == Object ) objClone = new this.constructor();
    else objClone = new this.constructor(this.valueOf());
    for ( var key in this )
    {
        if ( objClone[key] != this[key] )
        {
            if ( typeof(this[key]) == 'object' )
            {
                objClone[key] = this[key].Clone();
            }
            else
            {
                objClone[key] = this[key];
            }
        }
    }
    objClone.toString = this.toString;
    objClone.valueOf = this.valueOf;
    return objClone;
}

Yemoo'S JS Blog 2007-09-25 18:32 发表评论

function, new function, new Function【转自鸟食轩】

Yemoo'S JS Blog — Tue, 25 Sep 2007 10:30:00 GMT

函数是JavaScript中很重要的一个语言元素，并且提供了一个function关键字和内置对象Function，下面是其可能的用法和它们之间的关系。

使用方法一：

var foo01 = function() //or fun01 = function()
{
     var temp = 100;
     this.temp = 200;
     return temp + this.temp;
}

alert(typeof(foo01));
alert(foo01());

运行结果：
function
300
最普通的function使用方式，定一个JavaScript函数。两种写法表现出来的运行效果完全相同，唯一的却别是后一种写法有较高的初始化优先级。在大扩号内的变量作用域中，this指代foo01的所有者，即window对象。

使用方法二：

var foo02 = new function()
{
     var temp = 100;
     this.temp = 200;
     return temp + this.temp;
}

alert(typeof(foo02));
alert(foo02.constructor());

运行结果：
object
300
这是一个比较puzzle的function的使用方式，好像是定一个函数。但是实际上这是定一个JavaScript中的用户自定义对象，不过这里是个匿名类。这个用法和函数本身的使用基本没有任何关系，在大扩号中会构建一个变量作用域，this指代这个作用域本身。

使用方法三：

var foo3 = new Function('var temp = 100; this.temp = 200; return temp + this.temp;');
alert(typeof(foo3));
alert(foo3());

运行结果：
function
300
使用系统内置函数对象来构建一个函数，这和方法一中的第一种方式在效果和初始化优先级上都完全相同，就是函数体以字符串形式给出。

使用方法四：

var foo4 = Function('var temp = 100; this.temp = 200; return temp + this.temp;');

alert(typeof(foo4));
alert(foo4());

运行结果：

function
300

这个方式是不常使用的，效果和方法三一样，不过不清楚不用new来生成有没有什么副作用，这也体现了JavaScript一个最大的特性：灵活！能省就省。

Yemoo'S JS Blog 2007-09-25 18:30 发表评论