javascript事件:获取事件对象getEvent函数

javascript开发中我们会经常获取页面中的事件对象,然后来处理这些事件,例如下面的getEvent函数就是获取javascript下的页面事件对象。


function getEvent(event){
    return event || window.event;
}

我们使用getEvent的时候可以这样调用。


function foo(event){
    var evt = getEvent(event);
    alert(evt);
}

并且把foo函数绑定到一个onclick事件上。
但是常用的是foo函数不会有参数,或者第一个参数没有传入,我们可以通过arguments[0]来获取第一个参数。
在IE中event是一个全局变量,即window.event,而在Firefox等浏览器,事件会作为第一个参数传入foo函数,所以getEvent可以改为:


function getEvent(event){
    return arguments[0] || window.event;
}

这时在一些版本的浏览器,例如Firefox 中会出现获取不到event对象的问题,其实我们可以看成事件的触发是下面的方式:


function onclick(event) {
    foo();
}

这样,第一个函数是onclick,即event会默认作为第一个参数传入,而foo函数没有将event作为参数传入,这样严重限制了getEvent的灵活性,所以我们需要修改下getEvent函数。

javascript继承的写法

严格来说javascript是基于对象而不是面向对象的语言,因为javascript没有像java语言那么丰富的类、继承、封装,但是javascript是基于原型(prototype)的面向对象开发,是一种动态、弱类型、基于原型的语言。前几天看了阿里UED的《重温javascript继承机制》,今天重新看了,很有感触,特地转载了重要的部分,记录一下,下次有需要的时候还要重新看一下!的确是不错的一篇文章。

继承的演变

1、采用new关键字生成实例

处理表单验证这样简单功能脚本语言显然是不需要”继承”机制的,然而如果Javascript里面都是对象,就需要有一种办法来把所有对象联系起来。最后,Brendan Eich还是设计了”继承”。只是,他并没有引入”类”(class)的概念,因为一旦有了”类”,Javascript就是一种完整的面向对象编程语言了,
这好像有点太正式了,与设计初衷也远了,同时增加了初学者的入门难度。
参照到C++和Java语言都使用new命令来生成实例:

C++这样写:


> ClassName *object = new ClassName(param);

Java这样写:


> Foo foo = new Foo();

那么,也可以把new命令引入了Javascript,用来从原型对象生成一个实例对象。但是,Javascript中没有”类”的话,怎样表示原型对象呢?
依然是参照C++和Java使用new命令时,都会调用”类”的构造函数(constructor)。Brendan Eich简化了设计,在Javascript语言中,new命令后面跟的是构造函数,不再是类。
我们举个例子来说,现在有一个叫做WD构造函数,表示前端开发(web-developper)对象的原型。


> function WD(skill){
>     this.skill = skill;
> }

对这个构造函数使用new关键字,就会生成一个前端开发对象的实例。


> var WD1 = new WD('html');
> console.log(WD1.skill); // html

在构造函数中的this关键字,它其实代表的是新创建的实例对象。

2、new 出来对象的缺陷

采用new关键字,用构造函数生成实例对象无法共享属性和方法。
比如,在WD对象的构造函数中,设置一个实例对象的共有属性skill。


> function WD(skill){
>     this.skill = skill;
>     this.sex = '男';
> }

然后,生成两个实例对象:


> var WD1 = new WD('html');
> var WD2 = new WD('css');

这两个对象的skill属性是独立的,修改其中一个,不会影响到另一个。


> WD1.skill= 'Javascript';
> console.log(WD2.skill);//“css”,不受WD1的影响

每一个实例对象,都有自己的属性和方法的副本。这不仅无法做到数据共享,也是极大的资源浪费。

3、引入prototype属性

为了实现属性和方法的共享,Brendan Eich决定为构造函数设置一个prototype属性。
这个属性包含一个对象(以下简称”prototype对象”),所有实例对象需要共享的属性和方法,都放在这个对象里面;那些不需要共享的属性和方法,就放在构造函数里面。
实例对象一旦创建,将自动引用prototype对象的属性和方法。也就是说,实例对象的属性和方法,分成两种,一种是本地的,另一种是引用的。
还是以WD构造函数为例,现在用prototype属性进行改写:


> function WD(skill){
>     this.skill = skill;
> }
> 
> WD.prototype = { sex : '男' };
> 
> var WD1 = new WD('html');
> var WD2 = new WD('css');
> 
> console.log(WD1.sex); // 男
> console.log(WD2.sex); // 男

现在,sex属性放在prototype对象里,是两个实例对象共享的。只要修改了prototype对象,就会同时影响到两个实例对象。


> WD.prototype.sex = '女';
> console.log(WD1.sex); //女
> console.log(WD2.sex); // 女

由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像”继承”了prototype对象一样。这就是Javascript继承机制的设计思想。

三、构造函数如何实现继承

现在有一个”MED”对象的构造函数(MED:Marketing Experience Design,营销体验设计)


> function MED(){
>     this.aim = "营销体验设计";
> }

依然是”WD”对象的构造函数,


> function WD(skill,sex){
>     this.skill = skill;
>     this.sex = sex;
> }

怎样才能使”WD”继承”MED”呢?

NodeList集合跟Array数组的区别

首先来看看什么是NodeList,NodeList跟arguments都不是普通的数组,他们有数组的一些基本属性但是又不完全是数组。下面是在Mozilla上面找到的定义:

This is a commonly used type which is a collection of nodes returned by getElementsByTagName, getElementsByTagNameNS, and Node.childNodes. The list is live, so changes to it internally or externally will cause the items they reference to be updated as well. Unlike NamedNodeMap, NodeList maintains a particular order (document order). The nodes in a NodeList are indexed starting with zero, similarly to JavaScript arrays, but a NodeList is not an array.
由字面意思来看NodeList是DOM操作(getElementsByTagName等)取出来的集合,是集合而不是普通的数组,但是他们有数组的一些属性,例如length、下标索引,但是他们也有自己的属性,例如item,另外NodeList最大的特点就是时效性(live)。

NodeList的时效性

我们来看下面的代码:



*   index0
*   index1
*   index2
*   index3
*   index4

javascript代码如下:


var myUl = document.getElementById('nodelist');
var lis = myUl.getElementsByTagName('li');

lis是一个NodeList集合,具有时效性,所谓的时效性就是我们在修改li的同时,会反映到lis上来,这与array是不同的,例如我们把第一个li插入到ul的底部,那么lis也会发生相应的变化:


//把第一个li插入的ul的底部
myUl.appendChild(myUl.getElementsByTagName('li').item(0));
console.log(lis[0]);//输出的是原来ul的第二个li

所以我们应该在写代码的时候注意NodeList的时效性,不然就会犯一些错误,

IE6下javascript不能隐藏select标签的bug

昨天做了一个简单的项目,要求有三级联动的select菜单,可是伤不起的IE6下就出现了不能隐藏select的bug,之前我也介绍过IE6下select层高的问题,可以通过隐藏select或者使用iframe遮挡的方式来解决,今天的bug不同以前,大家如果在用js控制select显示隐藏的时候可能会经常遇到,调试一下午终于找到了解决的方案,特此记录一下。

IE6不能隐藏select重现代码

建立两个关联的select,通过javascript控制第一个select 发生变化后,第二个select根据第一个value重新添加options,如果为空则隐藏第二个select(示例中判断除第一个之外都隐藏),则由第一个select的第三个value切换到第二个value则第二个select就不会隐藏。
具体效果见下面的实例:

IE6 select隐藏bug

IE6下不能隐藏select标签解决方案

  1. 可以通过先设置select为显示,后设置为none的方式
  2. 通过给select添加class来控制显示
    具体方法,见示例代码源码注释的地方。

使用javascript将XML解析为JSON

今天看了David Walsh一篇把XML格式转换为JSON格式的文章,感觉不错,简单的转载了过来。
下面是神奇的XML转JSON的javascript代码:


    // Changes XML to JSON
function xmlToJson(xml) {

    // Create the return object
    var obj = {};

    if (xml.nodeType == 1) { // element
        // do attributes
        if (xml.attributes.length > 0) {
        obj["@attributes"] = {};
            for (var j = 0; j < xml.attributes.length; j++) {
                var attribute = xml.attributes.item(j);
                obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
            }
        }
    } else if (xml.nodeType == 3) { // text
        obj = xml.nodeValue;
    }

    // do children
    if (xml.hasChildNodes()) {
        for(var i = 0; i < xml.childNodes.length; i++) {
            var item = xml.childNodes.item(i);
            var nodeName = item.nodeName;
            if (typeof(obj[nodeName]) == "undefined") {
                obj[nodeName] = xmlToJson(item);
            } else {
                if (typeof(obj[nodeName].length) == "undefined") {
                    var old = obj[nodeName];
                    obj[nodeName] = [];
                    obj[nodeName].push(old);
                }
                obj[nodeName].push(xmlToJson(item));
            }
        }
    }
    return obj;
};

最短的DOMReady代码

自己的js框架YQ还没有添加DOMReady代码,今天看到国外js牛人Dustin Diaz的文章,得到了一份最短的DOMReady代码,分享出来:


function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

Dustin Diaz放弃了使用IE的document.documentElement.doScroll('left')(这也是多数框架的方法,详细介绍)。使用了setTimeout来定时检测document.readyStatedocument.readyState有以下五种状态:

WinHttp.WinHttpRequest.5.1—可以用作抓取的msxml 4.0底层对象

前些日子在博客园上看到的一篇文章(现在搜索不到了,尽转载的),介绍了下WinHttp.WinHttpRequest.5.1。自己也查了一些资料,写了个vbscript脚本,来添加新浪微博好友。WinHttp.WinHttpRequest的介绍可以去微软官方查看,也有个介绍的网站:http://www.neilstuff.com/winhttp/。感兴趣的可以移步去围观一下。

简单看一下我改的博客园文章的代码,用于新浪微博自动添加好友,因为是前些日子写的。申请离职之后,害怕自己的以前的一些代码丢失,特发到网上来备案一下。简单解释在代码中,加上之前的php的curl函数,WinHttp.WinHttpRequest.5.1应该对以后一些研究会有帮助。而且WinHttp.WinHttpRequest也可以设置refer,cookie,user-agent,proxy……,关键是他可以在cmd里面跑,感觉比较酷(当然php也可以做到,但是不熟悉php的可以用js写出来代替curl)。不废话了,直接上代码。


function RemoteCall(method, url, param, header){  
    var obj = new ActiveXObject("WinHttp.WinHttpRequest.5.1");  
    obj.Open(method||"GET", url, false);  
    obj.Option(4) = 13056;  
    obj.Option(6) = false;  
    obj.setRequestHeader("Cookie", "string");//先设置一个cookie,防止出错,见官方文档
    obj.setRequestHeader("Cookie","你的新浪微博cookie");
    obj.setRequestHeader("Host","t.sina.com.cn");
    obj.setRequestHeader("Accept","text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8");
    obj.setRequestHeader("User-Agent","Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 QQDownload/1.7 FirePHP/0.5");
    obj.Send(param);  
    return obj;  
}
function post(url,param){
    var obj = new ActiveXObject("WinHttp.WinHttpRequest.5.1");  
    obj.Open("POST", url, false);  
    obj.Option(4) = 13056;  
    obj.Option(6) = false;  
    obj.setRequestHeader("Cookie", "string");
    obj.setRequestHeader("Cookie","你的新浪微博cookie");
    obj.setRequestHeader("Host","t.sina.com.cn");
    obj.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
    obj.setRequestHeader("Accept","text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8");
    obj.setRequestHeader("User-Agent","Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 QQDownload/1.7 FirePHP/0.5");
    obj.Send(param);  
    return obj; 
}

自己写的一个轻量级javascript框架的设计模式

公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可以轻松的实现类继承,不过javascript的类继承方法还是有的,常见的有构建函数、原型扩展、综合……,也有一些专门写类的函数,例如jQuery的作者有个类继承函数。关于类继承写法可以简单看看这篇文章

我自己写的框架也不知道叫什么名字,刚开始写的时候随手写了个W(姓拼音,之前写过jQuery弹出框插件wBox),现在写这篇文章重新整理了一下思想,换了YQ(名字拼音,你懂的~)。

核心代码

框架设计的时候尽量做到了支持链式写法,也就是返回this,可以$(selector).handler1().handler2()……无限写下去,只要不是有返回值的就可以继续。包括了event,dom,css,还有fadeIn,fadeOut动画(因为再重构爱墙[html5+css3]版,所有顺手加上了这个功能)。如果配合sizzle选择器就更牛了!

下面说说框架的核心代码,等完善了之后跟新版html5爱墙一起放出,主要的代码如下:

如何写出高质量的Javascript代码

优秀的Stoyan Stefanov在他的新书中(《Javascript Patterns》)介绍了很多编写高质量代码的技巧,比如避免使用全局变量,使用单一的var关键字,循环式预存长度等等。

这篇文章不仅仅从代码本身来考虑如何优化编码,也从代码的设计阶段来考虑,包括书写API文档,同事的review,使用JSLint。这些习惯都能帮助你编写更加高质量的、更易于理解的、可维护的代码(让你的代码在多年之后仍使你引以为傲)。

编写可维护的代码

软件的BUG修复需要花费大量的精力。尤其当代码已经发布之后,随着时间的增长,维护的成本愈发的高。当你一发现BUG的时候,就立即去修复,这时候你的代码还是热乎的,你也不需要回忆,因为就是刚刚写好的。但是当你做了其他任务,几乎完全忘记了这份代码,这时候就需要:

  1. 重新学习和理解问题
  2. 理解代码是如何解决问题的
    另外一个问题是,在大项目或者大公司里面,经常是解决BUG的人不是产生BUG的人,而且也不是发现BUG的人。所以减少理解代码的时间就是最重要的问题,无论这个代码是你自己以前写的还是团队中的其他成员写的,因为我们都想去搞搞新的有意思的东西,而不是去维护那些个陈旧的代码。

还有一个开发中的普遍问题就是,往往读代码的时间比写代码的时间还要多。有时候你钻研一个问题,可以花整整一个下午的时间来考虑代码的编写。这个代码当时是可以工作的,但是随着开发的进行,其他东西发生了很大的变化,这时候也就需要你自己来重新审查修改编写代码。比如:

  1. 还有BUG没有解决
  2. 添加了新的功能
  3. 程序需要在新的环境中运行(比如一个新上市的浏览器)
  4. 代码有问题
  5. 代码需要重写因为修改了架构甚至要使用另一个语言
    因为这些原因,也许你当时一个下午写好的代码,后面需要花费几周的时间来阅读。所以编写可维护的代码对于软件的成功至关重要。

可维护的代码包括:

  1. 可读性
  2. 连续性
  3. 预见性
  4. 看起来是一个人写的
  5. 有文档
  6. 最少化全局变量
    Javascript使用函数来约定作用域。一个在函数内部声明的变量在外部是不可见的。所以,全局变量也就是声明在任何函数之外的或者没有被声明的变量。

Javascript中,在任何函数之外有个可访问的全局对象,每一个你创建的全局变量都是这个对象的一个属性。在浏览器中,为了方便,通常用window来指代这个全局变量。下面的代码就是说明如何创建一个全局变量:

myglobal = "hello"; // antipattern
> console.log(myglobal); // "hello"
> console.log(window.myglobal); // "hello"
> console.log(window["myglobal"]); // "hello"
> console.log(this.myglobal); // "hello

全局变量的问题

全局变量的问题在于,他在你的所有代码或者一个页面中都共享。他们在同一个命名空间下面,这通常会造成变量名冲突–两个同名的变量,但是确实不同的用处。

通常在一些页面中需要引入一些其他人的代码,比如:

  1. 第三方的JS库
  2. 广告伙伴的脚本
  3. 第三方的用户行为分析或者统计脚本
  4. 不同的组件、按钮等等
    加入其中一个第三方组件定义了一个全局变量:result。然后在你的程序中,也定义了一个全局变量result。最后的这个result会覆盖点之前的result,这样第三方的脚本就会停止工作。

所以,为了对其他的脚本友好,在一个页面中使用越少的全局变量越好。在后面会有一些方法来告诉你如何减少全局变量,比如使用命名空间,或者自执行的匿名函数,但是最好的避免全局变量的方法就是使用var关键字来声明变量。

使用navigator.geolocation来获取用户的地理位置信息

W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来简单的获取用户的地理位置信息。本文中将简单介绍下W3C的Geolocation。

Geolocation在javascript的navigator 对象中,我们可以通过 navigator.geolocation 来使用它。不支持 geolocation 的浏览器并不包含这一对象,那么可以通过下面的代码来做能力检测,对不同的浏览器做不同的处理。

if (navigator.geolocation) {
        alert( ' 浏览器支持 geolocation ' );
}else{
        alert( ' 浏览器不支持 geolocation ' );
}

在访问 geolocation 对象时,即调用 geolocation 下面的方法时,浏览器会弹出提示,询问用户是否许可网站提供的位置服务,只有在得到用户许可过后,服务才会继续,否则将被停止,在稍后你将会了解到,我们能够捕获到用户拒绝服务的动作。下面这张图分别是 Chrome , Firefox 和 Opera 在初次访问 geolocation 时,给用户的提示:

初次使用geolocation时的警告框

常用的navigator.geolocation对象有以下三种方法:

  1. 获取当前地理位置:navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
  2. 持续获取地理位置:navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
  3. 清除持续获取地理位置事件:navigator.geolocation.clearWatch(watch_position_id)
    其中success_callback_function为成功之后处理的函数,error_callback_function为失败之后返回的处理函数,参数position_options是配置项,由JSON格式传入:

  4. enableHighAccuracy:true/false,它将告诉浏览器是否启用高精度设备,所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI,值为 true 的时候,浏览器会尝试启用这些设备,默认指为 true,在这种情况下,浏览器会尽可能地进行更为精确的查询,简单地说,如果用户有可用的 GPS 设备,会返回 GPS 设备的查询结果,IP 是最后的选择,对于移动设备来说,网络接入点(基站)或许成为另一个选择,对此我还没有完全了解,但根据测试,即时没有任何额外功能的手机,也能够得到更为精确的查询结果。

  5. maximumAge:单位毫秒,告诉设备缓存时间,主要用于设备的省电或者节省带宽方面。
  6. timeout:单位毫秒,超时事件,获取位置信息时超出设定的这个时长,将会触发错误,捕获错误的函数将被调用,并且错误码指向TIMEOUT。

例如下面的代码:


var geo=navigator.geolocation.getCurrentPosition(geo_success, geo_error, {enableHighAccuracy:true, 
    maximumAge:30000, 
    timeout:27000});