2014年11月

javascript:void(0) 你知道为什么这么写吗？

经常看到 html 页面中的 a 的 href 是这个值： javascript:void(0).

这个可以这么翻译： 它的协议是 javascript协议, 后面的javascript表达式是 void(0).
void 是 javascript 的一个操作符, 后面跟一个表达式. 不论表达式的最终结果是什么, 这个 void 操作符都返回 undefined.
浏览器发现 href 的值是 javascript 的undefined, 那么就不执行任何操作, 也不跳转.

a 的 href 常见的值有:

  1. href="https://example.com/s.php" //跳到另外一个网站s.php页面 页面刷新
  2. href="d.jsp" //跳到一个相对路径 d.jsp 页面刷新
  3. href="#top" //跳到锚点 top 页面不刷新
  4. href="#" //一般跳到页面顶端 页面不刷新
  5. href="" // 空值, 相当于当前页面, 页面刷新

继续前面的 javascript:void(0)
既然前面说了, 只要返回的是 undefined, 这个链接就打到不刷新的效果, 为何不用下面这2种方式呢?

  1. href="undefined" //这个undefined不属于javascript的, 它让浏览器跳转到相对路径为 undefined 的页面
  2. href="javascript:undefined" // 这个应该是和 javascript:void(0) 效果一样的

但是 undefined 在javascript中, 不是一个保留的关键字, 所以 它可以在非全局的命名空间中被用作变量名. 详情参看 这里
如果你再 html 中直接写 href="javascript:undefined" 那么, undefined 肯定是js中那个全局的 undefined值, 所以效果是和 void(0) 一致的. 只是怕出错而已.

另外 void(0) 和 void 0, void 1, void("hello world") 又有什么区别?
表达式加 (), 只是为了可读性. 既然不论表达式怎么执行, 返回都是 undefined, 其实表达式无所谓, 可以随便写.

一般情况下, 用 href="javascript:void(0)" 的地方, 都是不想执行这个默认的跳转链接, 而是通过 click 事件来决定跳转或提交.
既然用click 事件, 为什么不用 button 呢?

Javascript 添加事件 传入参数 闭包

在用javascript开发html页面的时候, 我们经常遇: 遍历一个某些DOM 结点, 给它添加event, 代码大概如下

var nodeValue = null;
for (var i in domNodes) {
    nodeValue = domNodes[i].val();
    domNodes[i].click(function(){
        //do something, but we need to nodeValue to identify
        console.log(nodeValue);
    });
}

运行下来, 发现所有的click事件, 传入的都是最后一次loop的nodeValue 值.

这是为什么?

nodeValue 作为一个local variable, 一般情况下执行完这段代码, 它的生命周期就应该结束了, 它就在内存不存在了, 可是在这段代码, click事件的这个匿名函数却在内部使用了这个值, 形成了闭包, 所以它的生命周期被延长. 同时这个匿名函数在这里只是被定义, 并不被执行(当触发click事件时候, 才会执行). 这个Loop 在最后一次循环后, 它的值被最后确定为最后一个loop的值, 当有click事件被触发时候, 它的值自然是最后一次赋的值.

如何解决?

那么我们要现在要解决的是: 传入这次循环时候的值, 而不是最后的值. 同时, 这个click 方法接受的是一个 function. 方法如下:

domNodes[i].click(function(curValue){

return function(){
    //do something, but we need to curValue to identify
    console.log(curValue);
};

}(nodeValue););

首先定义一个匿名函数, 并且声明一个形参, 同时执行这个匿名函数(通过后面加()执行). 那么这个当前值就被传入了. 同时在这个外层匿名函数内部返回一个匿名function, 同时这个内部函数使用了外部函数传入的值, 那么这个外部传入的值的生命周期被延长, 形成闭包, 那么就可以在真正触发click事件的时候使用到了这个值.
  1. 1
  2. 2