2011年8月 文章归类

前些日子参加了公司RIA的实习生和新员工的javascript培训课程，做了个PPT，今天拿来跟大家分享下，高手飘过，欢迎拍砖。
本课程分了两段，第一部分是javascript入门基础和中级教程，后面是高级，讲到了javascript的作用域链和原型链，以及javascript面向对象的继承写法，最后简单提了一下前端安全，最后简单介绍了下前端的发展和展望，要新员工开阔下眼界，同时提供了一些学习的资源和RSS源。
继续阅读全文……

大家应该写过下面类似的代码吧，其实这里我想要表达的是有时候一个方法定义的地方和使用的地方会相隔十万八千里，那方法执行时，它能访问哪些变量，不能访问哪些变量，这个怎么判断呢？这个就是我们这次需要分析的问题——词法作用域

var classA = function(){
    this.prop1 = 1;
}
classA.prototype.func1 = function(){
    var that = this,
        var1 = 2;
 
    function a(){
        return function(){
            alert(var1);
            alert(this.prop1);
        }.apply(that);
    };
    a();
}
var objA = new ClassA();
objA.func1();

词法作用域：变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域。 with和eval除外，所以只能说JS的作用域机制非常接近词法作用域（Lexical scope）。

下面通过几个小小的案例，开始深入的了解对理解词法作用域和闭包必不可少的，JS执行时底层的一些概念和理论知识。

经典案列重现

1、经典案例一

/*全局（window）域下的一段代码*/
function a(i) {
    var i;
    alert(i);
};
a(10);

疑问：上面的代码会输出什么呢？
答案：没错，就是弹出10。具体执行过程应该是这样的

a 函数有一个形参 i，调用 a 函数时传入实参 10，形参 i=10
接着定义一个同名的局部变量 i，未赋值
alert 输出 10

思考：局部变量 i 和形参 i 是同一个存储空间吗？

2、经典案例二

/*全局（window）域下的一段代码*/
function a(i) {
    alert(i);
    alert(arguments[0]); //arguments[0]应该就是形参 i
    var i = 2;
    alert(i);
    alert(arguments[0]);
};
a(10);

疑问：上面的代码又会输出什么呢？（（ 10,10,2,10 || 10,10,2,2 ））
答案：在FireBug中的运行结果是第二个10,10,2,2，猜对了… ，下面简单说一下具体执行过程
继续阅读全文……

javascript的变量类型真的很要人纠结，即使你是很有经验的js工程师，你也很难说清楚js的类型和分类。
最近在讲javascript入门指南的时候，有人提出数组为什么不是基本类型，我通过演示typeof []的结果来说明，数组是对象类型派生出来的，而不是六种基本类型。
其实要理解javascript的变量类型很简单，就是我们要找到一个划分的标准。

javascript变量类型分类

在很多书中都提到了javascript的变量类型，每本书都有不同的划分标准，如果按照typeof和instanceof的返回值来区分，可以把javascript的变量类型分为两套类型系统：基本类型和对象类型衍生出来的对象类型系统。
基本类型包括：undefined，number，boolean，string，object，function，他们之前通过typeof的返回值来区分。
第二套对象类型系统是由第一套系统衍生发展而来的，例如前面提到的Array，还有Null，Number，Boolean等等，对象类型可以通过instanceof来判断。
那么对象类型中的Number和基本类型中的number又是什么关系呢？他们又是什么区别呢？
答案就是，他们是映射关系，即下例：

var a = new Number(123);
console.log(a.valueOf()===123);//true
var b = new String(123);
console.log(b.valueOf()===123);//false
console.log(b.valueOf()==='123');//true

obj.valueOf()返回的是该对象的原始值。

值类型和引用类型

继续阅读全文……

在IE中提供了一个fireEvent方法，顾名思义就是触发某个事件发生的意思。刚开始我以为是会跟平时使用onclick()一样，没想到最近在写javascript入门ppt的时候发现了，原来自己太自以为是了！看来还有很多javascript的细节没有掌握好啊！

现在根据自己的总结详细的记录下fireEvent方法的使用。fireEvent是IE提供的一种方法，msdn文档地址：http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx

onclick()

我们先看第一段实例代码：

<ul onclick='alert(event.srcElement.innerHTML);'>
	<li id='id1'>i am one;</li>
	<li id='id2'>i am two;</li>
	<li id='id3'>i am three;</li>
</ul>
<button onclick='document.getElementById("id1").onclick();'>click me!</button>

这段代码中我们没有个id1的li添加onclick事件，点击button，会报错，提示“对象不支持此属性或方法”。由此可见，DOM.onclick()需要添加onclick事件之后才能使用。

假如我们把以上的代码修改为：

<ul onclick='alert(event.srcElement.innerHTML);'>
	<li id='id1' onclick='alert(1);'>i am one;</li>
	<li id='id2'>i am two;</li>
	<li id='id3'>i am three;</li>
</ul>
<button onclick='document.getElementById("id1").onclick();'>click me!</button>

继续阅读全文……

今天在整理javascript入门培训的PPT时，提到了匿名函数，所以拿来分享下心得。

匿名函数的写法

顾名思义，就是没有名字的函数（⊙﹏⊙b汗）。匿名函数通常用于javascript作用域的控制，可以有效的避免对全局变量的污染。常见的匿名函数有下面四种写法，欢迎补充：

匿名函数写法一

(function(){
	//do something
})();

匿名函数写法二

!function(){
	//do something
}();

上面!还可以写成+，!!等多种方式。
上面两种方法是我常用的，下面两种方法是google上找的，我没用过（好吧，我out啦）。

匿名函数写法三

(function(){
	//do something
}());

匿名函数写法四

void function(){
	//do something
}();

刚才微博上@朴灵 提出来：写法三比较安全，正如网友@Rain的留言，匿名函数上面的写法都存在前后文;问题，所以需要注意的是匿名函数在压缩工具打包压缩后会出现上下文错误合并()的问题，例如第一种写法，如果下面的代码，未压缩之前是正常的，压缩后就不正常了，所以要严格上下文的;问题，而第三种就不会出现类似问题：

var a = function(){}
(function(){
	alert(1);
})();

上例中就出现了错误，这就是因为a函数会把他后面的匿名函数作为参数传入a中，这也就解释了为什么有人习惯在匿名函数之前添加;了，就是为了防止上文没有严格遵循javascript语法，漏掉;的问题。
继续阅读全文……

NotePad++

notepad++是轻量级的编辑器。

安装

访问：http://notepad-plus-plus.org/ ，点击“Download”进入下载页面，下载安装版本即可。

双击安装程序，选择语言包：“简体字”

继续阅读全文……