三水清javascript

nodePPT — nodejs做的手机端控制PC端的PPT演示文档javascript框架

三水清 — Sat, 21 Apr 2012 02:47:01 +0000

nodePPT使用nodejs写的，可以手机端控制pc端的演示文档框架。nodePPT是在webSlide基础上二次开发的，使用nodejs做服务器，通过websocket来实现手机端和PC的通信，主要功能是手机端可以控制pc端PPT播放进度，并且手机端可以给每张PPT做备注。

第一次做个程序的nodejs作品，并且测试时间比较短，肯定会有很多问题和bug，希望大家一起斧正。另外页面样式css高手可以自己写，包括动画自定义都可以在css文件中直接修改添加。

说明

因为是PPT演示文档，所以需要投影仪分辨率，所以演示页面的最佳分辨率为全屏模式下的 1024*768 ，如果在自己电脑上查看，可以通过 ctrl + - 和 ctrl + + 缩放到合适的比例查看效果。

建议浏览器chrome 16+，全屏模式（F11），以达到最佳动画效果。在Firefox下会出现拖尾现象，个人认为是Firefox 8下对CSS3动画效果渲染太慢导致，其他浏览器未测试。

nodePPT iphone手机端截图

使用说明

配置route.json
配置ppt的文件
启动node：node server.js
PC访问：如127.0.0.1:3000/demo.ppt
手机端访问：127.0.0.1:3000/ctrl
手机端setup，选择控制用户后，开始控制

具体使用方法启动node server.js之后访问127.0.0.1:3000/index.ppt，里面有详细的介绍

快捷键

空格/→/↓/Tab/pageDown：下一页
←/↑/pageUp：上一页
P：开画板
C：清除画板

版本库地址

支持三种访问协议：

HTTP协议： https://ksky521@github.com/ksky521/nodePPT.git 。
Git协议： git://github.com/ksky521/nodePPT.git 。
SSH协议： ssh://git@github.com:ksky521/nodePPT.git 。

克隆版本库

操作示例：

$ git clone git://github.com/ksky521/nodePPT.git

联系方式

作者博客：js8.in

作者新浪微博：@三水清

声明：文章未声明为原创文章，本文链接 http://js8.in/989.html. 转载请注明转自 JS8.IN ™

随机文章

addEventListener第二个参数的handleEvent

三水清 — Thu, 08 Mar 2012 02:48:17 +0000

昨天无意中看到一篇老外的文章，文章提到了addEventListener第二个参数可以传入object，并且对象中handleEvent为事件处理函数。例如下面的javascript代码：

var obj = {
	handleEvent: function() {
		alert('body clicked');
	}
};
document.body.addEventListener('click',obj,false);

测试发现这段代码在IE9+，chrome，FF，opera等浏览器是正确的（测试范围可能不够宽），而且可以成功的绑定click事件。在Qwrap群里一问才知道是DOM2中接口，很有意思的一个发现，@貘大大也发微博说自己先入为主了，我相信很多人跟@貘大大一样都先入为主了。

addEventListener的handleEvent应用

发现了这个“新大陆”有什么用法呢？哈哈~首先想到的是对象引用。看下面的javascript代码：

因为对象的引用关系，点击下button就可以切换绑定事件的处理函数，而不需要remove之前的事件，然后重新绑定一个新的处理函数。

如果你觉得这个不够炫，那么下面的javascript代码可能就更有吸引力了哦~

var obj2 = {
	addEvent:function(el){
		el.addEventListener('click',this,false);
	},
	handleEvent:function(e){
		alert(e.target);
	}
};
obj2.addEvent(document.body);

addEventListener handleEvent缺点

显而易见，IE6~IE8不能使用……可是如果是高级浏览器还是不错的功能哦~

扩展阅读

http://peter.michaux.ca/articles/our-backwards-dom-event-libraries
http://ajaxian.com/archives/an-alternative-way-to-addeventlistener

声明：文章未声明为原创文章，本文链接 http://js8.in/983.html. 转载请注明转自 JS8.IN ™

随机文章

webSlide — PPT演示文档javascript框架

三水清 — Mon, 27 Feb 2012 03:15:58 +0000

互联网公司内部难免会有些技术分享之类的活动，需要用到PPT，前端开发工程师都喜欢自己的PPT帅一点，当然我也一样。于是开始用impress.js做PPT，所以有了上一篇PPT《XSS注入和防范》。不过在用的过程中发现impress.js性能有问题，假如页面太多，或者图片太多，就会出现卡的现象。于是开始琢磨自己写个javascript演示文档框架。嗯，于是webSlide就诞生了！

webSlide是用于在线PPT演示文档的javascript框架

鸣谢

webSlide的想法来自于impress.js，但是本人在使用过程中发现impress.js经常卡，尤其是当演示文档页面和图片比较多之时，经常出现动画效果不流畅。

写webSlide代码过程中，研究过impress.js和reveal.js，向两位作者表示感谢。

演示页面

演示页面地址 http://ksky521.github.com/webSlide/，由于页面比较多，所以需要一定的加载时间。

国内可以访问SAE上的演示页面：http://qdemo.sinaapp.com/ppt/udc.htm。

演示页面内容为给公司UDC部门同事进行javascript入门培训的内容~

说明

使用示例

wSlide({
    slideId:'slide',//演示文档id
    canvasId:'myCanvas',//画板id
    ctrlId:'slideCtrl'//控制部分id
});

参数说明

slideId: 演示文档内容部分ID，class为step为每页，slide为带边框的页面，必填

canvasId: canvas元素画板部分ID，选填

ctrlId: 控制部分ID，class为home代表返回首页，class为paint开启画板，class为clearIt清除画板，选填

presentClass: 当前幻灯片class，选填，默认为present

pastClass: 上一页幻灯片class，选填，默认为past

futureClass: 下一页幻灯片class，选填，默认为future

快捷键

空格/→/↓/Tab/pageDown：下一页
←/↑/pageUp：上一页
P：开画板
C：清除画板

版本库地址

支持三种访问协议：

HTTP协议： https://ksky521@github.com/ksky521/webSlide.git 。
Git协议： git://github.com/ksky521/webSlide.git 。
SSH协议： ssh://git@github.com:ksky521/webSlide.git 。

克隆版本库

操作示例：

$ git clone git://github.com/ksky521/webSlide.git

联系方式

作者博客：js8.in

作者新浪微博：@三水清

声明：文章未声明为原创文章，本文链接 http://js8.in/974.html. 转载请注明转自 JS8.IN ™

随机文章

javascript contains方法来判断元素包含关系

三水清 — Thu, 05 Jan 2012 01:49:20 +0000

IE中的contains方法可以判断A元素是否包含B元素，如果包含则返回true，否则返回false，在开发中会在事件代理处理上面用到。W3C的方法是compareDocumentPosition，所以综上来说：JS通过contains和compareDocumentPosition方法来确定DOM节点间的关系,判断一个元素(对象)是否为另一个元素的子元素。
IE的contains方法很简单，但是W3C的DOMElement.contains(DOMNode)方法会返回却是一个数值。

DOMElement.contains(DOMNode)

link：https://developer.mozilla.org/En/DOM/Node.compareDocumentPosition。

DOMElement.contains(DOMNode)返回的不是一个布尔值，而是一个很奇怪的数值，它是通过如下方式累加计算出来的：

Bits	Number	Meaning
000000	0	元素一致
000001	1	节点在不同的文档（或者一个在文档之外）
000010	2	节点 B 在节点 A 之前
000100	4	节点 A 在节点 B 之前
001000	8	节点 B 包含节点 A
010000	16	节点 A 包含节点 B
100000	32	浏览器的私有使用

综上，来个@司徒正美大大的方案：

var contains  = function(root, el) {
	 if (root.compareDocumentPosition)
		 return root === el || !!(root.compareDocumentPosition(el) & 16);
	 if (root.contains && el.nodeType === 1){
		 return root.contains(el) && root !== el;
	 }
	 while ((el = el.parentNode))
		 if (el === root) return true;
	 return false;
 }

声明：文章未声明为原创文章，本文链接 http://js8.in/934.html. 转载请注明转自 JS8.IN ™

随机文章

非字母javascript

三水清 — Wed, 30 Nov 2011 02:17:03 +0000

你尝试过写javascript不用字母和数字吗？最近准备个xss的分享，记起了之前看到过老外一篇文章，内容是关于non-alpha javascript的，拿到代码分析下。
先看这段猥琐的javascript代码：

_=+[];$=_++;__=(_<<_);___=(_<<_)+_;____=__+__;_____=__+___;$$=({}+"")[_____]+({}+"")[_]+({}[$]+"")[_]+(($!=$)+"")[___]+(($==$)+"")[$]+(($==$)+"")[_]+(($==$)+"")[__]+({}+"")[_____]+(($==$)+"")[$]+({}+"")[_]+(($==$)+"")[_];$$$=(($!=$)+"")[_]+(($!=$)+"")[__]+(($==$)+"")[___]+(($==$)+"")[_]+(($==$)+"")[$];$_$=({}+"")[_____]+({}+"")[_]+({}+"")[_]+(($!=$)+"")[__]+({}+"")[__+_____]+({}+"")[_____]+ ({}+"")[_]+({}[$]+"")[__]+(($==$)+"")[___]; ($)[$$][$$]($$$+"('"+$_$+"')")();

看到这里你肯定抓狂了，但是这段代码是可以运行的，运行的结果是 alert('cool code'); 。

javascript分析

这段代码能够运行，原因是javascript是弱类型的脚本语言，而且语法相对松散。例如下面的javascript是正确的，而且是有出乎意料结果的：

true+true;//2
undefined+''//'undefined'
(true+"")[0];//'t'
[]=='';//true
''==0;//true
typeof (+'');//number,0
({}+'');//"[object Object]"
({}[0]);//undefined

所以我们想得到一个0就可以使用:

_= +[];
_= +'';

下一步通过位运算，++等运算可以得到0~9所有数字。

因为0就是false，则!0就是true，({}[0]);可以得到undefined，({}+'')可以得到字符串：[object Object]，字符串中的字符，可以组成新的字符串，于是通过组合，我们就得到了："constructor"。

javascript中的点(.)运算符和[]的作用都是一样的，只不过[]可以接收传入变量、字符串，所以我们可以得到一个Function对象，即：

(0)['constructor']['constructor'];

另外我们也知道，下面的代码是运行的：

Function('alert(1);')();

所以，我想剩下的你就懂了……

声明：文章未声明为原创文章，本文链接 http://js8.in/918.html. 转载请注明转自 JS8.IN ™

随机文章

javascript 位运算符

三水清 — Tue, 29 Nov 2011 02:46:09 +0000

前几天看到国外人在github总结的javascript的奇巧淫技（http://t.cn/herRcq），里面对位运算提到的很多，所以来科普一下javascript的位运算。于是找到了w3cschool的这篇教程，很好很强大啊，于是就忍不住转载了……

ECMAScript 整数有两种类型，即有符号整数（允许用正数和负数）和无符号整数（只允许用正数）。在 ECMAScript 中，所有整数字面量默认都是有符号整数，这意味着什么呢？

有符号整数使用 31 位表示整数的数值，用第 32 位表示整数的符号，0 表示正数，1 表示负数。数值范围从 -2147483648 到 2147483647。

可以以两种不同的方式存储二进制形式的有符号整数，一种用于存储正数，一种用于存储负数。正数是以真二进制形式存储的，前 31 位中的每一位都表示 2 的幂，从第 1 位（位 0）开始，表示 2⁰，第 2 位（位 1）表示 2¹。没用到的位用 0 填充，即忽略不计。例如，下图展示的是数 18 的表示法。

18 的二进制版本只用了前 5 位，它们是这个数字的有效位。把数字转换成二进制字符串，就能看到有效位：

var iNum = 18;
alert(iNum.toString(2));	//输出 "10010"

这段代码只输出 “10010″，而不是 18 的 32 位表示。其他的数位并不重要，因为仅使用前 5 位即可确定这个十进制数值。如下图所示：

负数也存储为二进制代码，不过采用的形式是二进制补码。计算数字二进制补码的步骤有三步：

确定该数字的非负版本的二进制表示（例如，要计算 -18的二进制补码，首先要确定 18 的二进制表示）
求得二进制反码，即要把 0 替换为 1，把 1 替换为 0
在二进制反码上加 1

要确定 -18 的二进制表示，首先必须得到 18 的二进制表示，如下所示：

0000 0000 0000 0000 0000 0000 0001 0010

接下来，计算二进制反码，如下所示：

1111 1111 1111 1111 1111 1111 1110 1101

最后，在二进制反码上加 1，如下所示：

1111 1111 1111 1111 1111 1111 1110 1101
                                      1
---------------------------------------
1111 1111 1111 1111 1111 1111 1110 1110

因此，-18 的二进制表示即 1111 1111 1111 1111 1111 1111 1110 1110。记住，在处理有符号整数时，开发者不能访问 31 位。

有趣的是，把负整数转换成二进制字符串后，ECMAScript 并不以二进制补码的形式显示，而是用数字绝对值的标准二进制代码前面加负号的形式输出。例如：

var iNum = -18;
alert(iNum.toString(2));	//输出 "-10010"

这段代码输出的是 “-10010″，而非二进制补码，这是为避免访问位 31。为了简便，ECMAScript 用一种简单的方式处理整数，使得开发者不必关心它们的用法。

另一方面，无符号整数把最后一位作为另一个数位处理。在这种模式中，第 32 位不表示数字的符号，而是值 2³¹。由于这个额外的位，无符号整数的数值范围为 0 到 4294967295。对于小于 2147483647 的整数来说，无符号整数看来与有符号整数一样，而大于 2147483647 的整数则要使用位 31（在有符号整数中，这一位总是 0）。

把无符号整数转换成字符串后，只返回它们的有效位。

注意：所有整数字面量都默认存储为有符号整数。只有 ECMAScript 的位运算符才能创建无符号整数。

位运算 NOT

位运算 NOT 由否定号（~）表示，它是 ECMAScript 中为数不多的与二进制算术有关的运算符之一。

位运算 NOT 是三步的处理过程：

把运算数转换成 32 位数字
把二进制数转换成它的二进制反码
把二进制数转换成浮点数

例如：

var iNum1 = 25;		//25 等于 00000000000000000000000000011001
var iNum2 = ~iNum1;	//转换为 11111111111111111111111111100110
alert(iNum2);		//输出 "-26"

位运算 NOT 实质上是对数字求负，然后减 1，因此 25 变 -26。用下面的方法也可以得到同样的方法：

var iNum1 = 25;
var iNum2 = -iNum1 -1;
alert(iNum2);	//输出 -26

位运算 AND

位运算 AND 由和号（&）表示，直接对数字的二进制形式进行运算。它把每个数字中的数位对齐，然后用下面的规则对同一位置上的两个数位进行 AND 运算：

第一个数字中的数位	第二个数字中的数位	结果
1	1	1
1	0	0
0	1	0
0	0	0

例如，要对数字 25 和 3 进行 AND 运算，代码如下所示：

var iResult = 25 & 3;
alert(iResult);	//输出 "1"

25 和 3 进行 AND 运算的结果是 1。为什么？分析如下：

 25 = 0000 0000 0000 0000 0000 0000 0001 1001
  3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
AND = 0000 0000 0000 0000 0000 0000 0000 0001

可以看出，在 25 和 3 中，只有一个数位（位 0）存放的都是 1，因此，其他数位生成的都是 0，所以结果为 1。

位运算 OR

位运算 OR 由符号（|）表示，也是直接对数字的二进制形式进行运算。在计算每位时，OR 运算符采用下列规则：

第一个数字中的数位	第二个数字中的数位	结果
1	1	1
1	0	1
0	1	1
0	0	0

仍然使用 AND 运算符所用的例子，对 25 和 3 进行 OR 运算，代码如下：

var iResult = 25 | 3;
alert(iResult);	//输出 "27"

25 和 3 进行 OR 运算的结果是 27：

25 = 0000 0000 0000 0000 0000 0000 0001 1001
 3 = 0000 0000 0000 0000 0000 0000 0000 0011
--------------------------------------------
OR = 0000 0000 0000 0000 0000 0000 0001 1011

可以看出，在两个数字中，共有 4 个数位存放的是 1，这些数位被传递给结果。二进制代码 11011 等于 27。

位运算 XOR

位运算 XOR 由符号（^）表示，当然，也是直接对二进制形式进行运算。XOR 不同于 OR，当只有一个数位存放的是 1 时，它才返回 1。真值表如下：

第一个数字中的数位	第二个数字中的数位	结果
1	1	0
1	0	1
0	1	1
0	0	0

对 25 和 3 进行 XOR 运算，代码如下：

var iResult = 25 ^ 3;
alert(iResult);	//输出 "26"

25 和 3 进行 XOR 运算的结果是 26：

 25 = 0000 0000 0000 0000 0000 0000 0001 1001
  3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
XOR = 0000 0000 0000 0000 0000 0000 0001 1010

可以看出，在两个数字中，共有 4 个数位存放的是 1，这些数位被传递给结果。二进制代码 11010 等于 26。

左移运算

左移运算由两个小于号表示（<<）。它把数字中的所有数位向左移动指定的数量。例如，把数字 2（等于二进制中的 10）左移 5 位，结果为 64（等于二进制中的 1000000）：

var iOld = 2;		//等于二进制 10
var iNew = iOld << 5;	//等于二进制 1000000 十进制 64

注意：在左移数位时，数字右边多出 5 个空位。左移运算用 0 填充这些空位，使结果成为完整的 32 位数字。

注意：左移运算保留数字的符号位。例如，如果把 -2 左移 5 位，得到的是 -64，而不是 64。“符号仍然存储在第 32 位中吗？”是的，不过这在 ECMAScript 后台进行，开发者不能直接访问第 32 个数位。即使输出二进制字符串形式的负数，显示的也是负号形式（例如，-2 将显示 -10。）

有符号右移运算

有符号右移运算符由两个大于号表示（<$lt;）。它把 32 位数字中的所有数位整体右移，同时保留该数的符号（正号或负号）。有符号右移运算符恰好与左移运算相反。例如，把 64 右移 5 位，将变为 2：

var iOld = 64;		//等于二进制 1000000
var iNew = iOld >> 5;	//等于二进制 10 十进制 2

同样，移动数位后会造成空位。这次，空位位于数字的左侧，但位于符号位之后。ECMAScript 用符号位的值填充这些空位，创建完整的数字，如下图所示：

无符号右移运算

无符号右移运算符由三个大于号（>>>）表示，它将无符号 32 位数的所有数位整体右移。对于正数，无符号右移运算的结果与有符号右移运算一样。

用有符号右移运算中的例子，把 64 右移 5 位，将变为 2：

var iOld = 64;		//等于二进制 1000000
var iNew = iOld >>>5;	//等于二进制 10 十进制 2

对于负数，情况就不同了。

无符号右移运算用 0 填充所有空位。对于正数，这与有符号右移运算的操作一样，而负数则被作为正数来处理。

由于无符号右移运算的结果是一个 32 位的正数，所以负数的无符号右移运算得到的总是一个非常大的数字。例如，如果把 -64 右移 5 位，将得到 134217726。如果得到这种结果的呢？

要实现这一点，需要把这个数字转换成无符号的等价形式（尽管该数字本身还是有符号的），可以通过以下代码获得这种形式：

var iUnsigned64 = -64 >>> 0;

然后，用 Number 类型的 toString() 获取它的真正的位表示，采用的基为 2：

alert(iUnsigned64.toString(2));

这将生成 11111111111111111111111111000000，即有符号整数 -64 的二进制补码表示，不过它等于无符号整数 4294967232。

出于这种原因，使用无符号右移运算符要小心。

原文地址：http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp

声明：文章未声明为原创文章，本文链接 http://js8.in/906.html. 转载请注明转自 JS8.IN ™

随机文章

IE6中javascript文件开启Gzip出现代码不执行情况

三水清 — Tue, 15 Nov 2011 12:25:23 +0000

今天处理IE6下的一个bug，经过调试才发现是javascript文件文件总是执行不了，后来中午吃完饭回来才想起以前同事遇见的html中的javascript不可以执行的问题，怀疑是gzip的原因，此次的问题就是因为动态加载javascript文件导致代码不执行，经过研究发现gzip压缩过的javascript文件，如果header里Cache-Control 数据有no-cache, no-store，就会出现IE6中js代码不执行的问题。下面是转发的文章内容：

IE6下面调用开启了gzip压缩Javascript的时候，时常会碰到无法执行的情况，有可能是src调用，有可能是ajax调用，其它的浏览器工作正常，唯独IE6不能正常工作。
出现这个BUG的状况如下：

用户使用IE6浏览器
服务器没有设置被请求文件(javascript) expires, cache-control.
服务器端开启了chunked encoding模式
通过javascrip的src调用方式或者ajax请求javascript文件
有可能是通过php生成的javascript文件
服务器端开启了gzip压缩

解决这个问题，我们要在服务器的cache-control和expires 头信息上做点工作。
经过测试，header头信息如下的gzip压缩过的javascript调用可以正常工作。

Cache-Control:maxage=1
Connection:keep-alive
Content-Encoding:gzip
Content-Type:application/x-javascript;charset=GBK
Date:Wed, 01 Dec 2010 01:24:07 GMT
Expires:Wed, 01 Dec 2010 01:24:08 GMT
Pragma:public
Server:nginx
Transfer-Encoding:chunked

分析上面的头信息，我们可以注意到：

cache-control必须要设置成maxage=time的格式，maxage是指定缓存生效时间，1为1秒
Expires必须要设置，它的时间稍大于Date即可，Date是页面请求时间，Expires是过期时间
Pragma设置为public

设置好了这两个参数，一般就可以了。

在nginx服务器端，我们需要对服务器配置：

location ~* \.(ico|css|js|png|jpeg|jpg|gif|rar|zip|7z|gz|pdf) {
expires 1d;
}

如果javascript文件是由PHP生成的，我们就需要利用php来输出header控制了。


$expires = 1;
header("Pragma: public");
header("Cache-Control: maxage=".$expires);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . ' GMT');
header("Content-Type: application/x-javascript;charset=GBK\n");

实际应用中，需要灵活配置，Javascript文件，请尽可能通过服务器发送header头，PHP生成javascript文件，效率本来就不高，再加上额外需要输入header头，更是得不偿失。

声明：文章未声明为原创文章，本文链接 http://js8.in/902.html. 转载请注明转自 JS8.IN ™

随机文章

javascript的String.replace的妙用

三水清 — Tue, 08 Nov 2011 11:33:54 +0000

作为前端开发人员，总会有点自己的奇技淫巧，毕竟前端开发不同于后端，代码全部暴漏给用户不说，代码冗余了少则影响带宽，多则效率降低。所以今天我也来爆个自己的奇技淫巧。

javascript的String.replace方法应该javascript前端开发工程师都了解，可是你掌握了吗？replace有接受两个参数，第一个参数可以是字符串，也可以是正则表达式，第二个参数除支持字符串之外，还支持$1形式正则匹配的文本，除此之外还支持传入一个处理函数，这个函数的return值就是要替换成的内容。
了解更多javascript的String.replace用法，访问：http://www.w3school.com.cn/js/jsref_replace.asp

String.replace的妙用

在《javascript获取隐藏dom的宽高》中，我就使用了replace，使用replace做一些重复性的操作，减少不必要的代码。

其实这里说的重复性的工作就是循环！例如，我们要获取假如我要求id为div1和div2的两个元素的宽高，一部分人会一点一点的做，先算完div1的，然后做div2的，这样你是否觉得有部分是充分的操作呢，于是可以将取宽高的函数独立出来，这样多了一个函数，而且函数只用这两次，似乎有点浪费。

于是一部分人想到了使用split切分字符串，然后用Array.forEach做循环。例如下面的代码：

"div1 div2".split(' ').forEach(function(a,i){
    console.log(a);
	//do something
})

这样对于支持forEach的高级浏览器还是可以的，否则需要扩展数组原型了，不提倡扩展原型，即使不扩展原型提供个额外的函数来操作，就又是浪费，

所以我的做法是使用replace，代码如下：

var wh = {};
"div1 div2".replace(/[^ ]+/g,function(a){
	var elem = document.getElementById(a);
        wh[a] = {};
	'Width Height'.replace(/[^ ]+/g, function(i){
			wh[a][i] = elem['offset' + i] || elem['client' + i];
		});
});
console.log(wh);

有人说不好懂，而且有点太……，对就是有点装B，呵呵~但是简洁，前端开发的代码还是简洁点好。另外还有通过位操作来判断String.indexOf返回的是否为-1，也是个不错的方法~呵呵，不多说了

声明：文章未声明为原创文章，本文链接 http://js8.in/894.html. 转载请注明转自 JS8.IN ™

随机文章

javascript作用域和作用域链

三水清 — Wed, 26 Oct 2011 03:26:22 +0000

javascript的作用域是一个重要的知识点，javascript作用域（scope）是通过javascript的作用域链（scope chain）来实现的。

javascript作用域

javascript作用域(scope)：简单的说，就是创建一个函数时在什么环境下创建的，它控制了javascript代码运行时变量和函数的访问范围。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

全局作用域（Global Scope）

在代码中任何地方都能访问到的对象拥有全局作用域，注意：全局变量是魔鬼！因为它效率低（后面讲到），污染全局环境！一般有一下三种方式获取全局作用域。

代码最外层定义的函数和变量拥有全局作用域

在代码的最外层，定义的函数、变量，都是拥有全局作用域的。

var a = 1;
function b(){
    var a = 2;
}
b();
alert(a);//1

函数内部不使用var定义的拥有全局作用域

在函数内部，不使用var定义的变量拥有全局作用域，这是个坑！要注意，很多前端开发工程师不习惯写var，其实这时候你已经污染了全局作用域！

var a = 1;
function b(){
    a = 2;
    c = 3;
}
b();
alert(a);//2
alert(c);//3

所有window对象的属性拥有全局作用域

在《正确理解javascript的this关键字》中我提到了脚本语言的运行需要宿主，在浏览器的全局对象是window，所以全局的变量和函数是window的属性，并且拥有全局作用域。

function a(){
	window.b = 1;
}
a();
alert(b);//1

局部作用域（Local Scope）

和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域称为函数作用域。如下面的代码中b就是一个局部变量，在函数外部是访问不到的。

var a = function(){
	var b = 1;
	alert(b);
}
a();
alert(b);//出错 b undefined

javascript作用域链

javascript作用域（scope）是通过javascript的作用域链（scope chain）来实现的。javascript函数对象中拥有一个仅供javascript引擎访问的内部属性——[[Scope]]，[[Scope]]指向一个集合，即为“作用域链（Scope chain）”，它决定了哪些数据能被函数访问。

var a = 1;
function fn1(){
    var a = 9;
    function fn2(){
        alert(this.a);//1
        alert(a);//9
    }
    fn2();
}
fn1();

上面代码的作用域链，可以用下面的图来表示：

javascript的作用域链图示

作用域链与javascript代码优化

代码在运行时，变量的查找总是从作用域链的底部开始往上查找，如果第一层没找到，就要从更高一级作用域查找，这样一直找下去，一直找到全局作用域，如果没有找到则返回undefined。

从作用域链的结构可以看出，在运行期上下文的作用域链中，标识符所在的位置越深，读写速度就会越慢。因为全局变量总是存在于运行期上下文作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。

一个好的经验法则是：如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。如下面的代码：

function changeColor(){
    document.getElementById("btnChange").onclick=function(){
        document.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

这个函数引用了两次全局变量document，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到。这段代码可以重写如下：

function changeColor(){
    var doc=document;
    doc.getElementById("btnChange").onclick=function(){
        doc.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

这段代码比较简单，重写后不会显示出巨大的性能提升，但是如果程序中有大量的全局变量被从反复访问，那么重写后的代码性能会有显著改善。

作用域链的延长

当执行流进入下列任何一个语句时，作用域链将得到延长：

try-catch语句的catch块

with语句

此两个语句会在作用域链的前端添加一个变量对象。对with来说，其变量对象中包含着指定对象的所有属性和方法所作的变量申明；对catch来说，其变量对象中包含的是被抛出的错误对象的申明。这些标量对象都是只读的，因此在with和catch语句中申明的变量都会被添加到所在执行环境的变量对象中。

当with和catch语句结束之后，作用域链会恢复到原先的状态。

值得一提的是改变了javascript的作用域链之后，代码效率会降低。拿with语句来说，当代码运行到with语句时，运行期上下文的作用域链临时被改变了。一个新的可变对象被创建，它包含了参数指定的对象的所有属性。这个对象将被推入作用域链的头部，这意味着函数的所有局部变量现在处于第二个作用域链对象中，因此访问代价更高了。

继续阅读关于javascript的作用域的文章：

javascript的词法作用域

正确理解javascript的this关键字

声明：文章未声明为原创文章，本文链接 http://js8.in/875.html. 转载请注明转自 JS8.IN ™

随机文章

正确理解javascript的this关键字

三水清 — Tue, 25 Oct 2011 00:55:30 +0000

javascript有this关键字，this跟javascript的执行上下文密切相关，很多前端开发工程师至今对this关键字还是模棱两可，本文将结合代码讲解下javascript的this关键字。

this和对象的关系

首先来看下面的代码：

var person = {
	name:'Theo Wong',
	gender:'male',
	getName:function(){
		console.log(person.name);
	}
};
person.getName();

定义了一个person对象，对象中包含了name、gender属性，还包括了一个getName的方法，其作用是输出person对象的name。在这种情况下，我们可以使用this来在person对象中代替person对象本身，所以上面的代码跟下面的直接结果是一样的：

var person = {
	name:'Theo Wong',
	gender:'male',
	getName:function(){
		console.log(this.name);
	}
};
person.getName();

请记住一点：this永远指向的是函数对象的所有者！上面的例子中getName的所有者是person对象，所以this指代的是person。

this和全局对象

我们再来看看再全局对象中，this指代的是什么，我们知道javascript是脚本语言，所以javascript的执行需要有一个宿主环境，在浏览器中这个宿主环境就是window对象，所以在全局函数中，this指代的是window对象（除非使用new，call，apply方法来改变this的指代关系）。懂得了这个关键点，下面的代码就好理解了：

var a = 1;
console.log(a);//1
console.log(this.a);//1
console.log(window.a);//1

很多前端开发工程师经常使用在函数名字之前添加个window来调用函数，这是因为在浏览器中全局对象就是window，所有的函数变量都是在window对象之中，所以下面的代码中的this指代window对象就好理解了：

var a = 1;
function foo(){
	var b = 2;
	console.log(this.a+b);//3
}
foo();

所以说，只要记住：this永远指向的是函数对象的所有者，即this的值是由激活执行上下文代码的调用者决定的，就好理解this的指代关系了。

函数构造器中的this

当函数作为构造器使用new关键字实例化时，this的指代关系又是怎样的呢？看下面的代码：

var Person = function(){
	this.name = 'Theo Wong';
}
var person = new Person();
console.log(person.name);

new执行过程会首先执行Person的构造器[[construct]]，然后在调用[[call]]方法给this赋值，这个执行过程可以简单理解为三步

首先建立一个空的对象object，类似var obj={}
然后将空对象使用Person的call操作，类似Person.call(obj)
执行完Person之后再return this，完成new过程，赋值给person变量

所以经过new加工过的函数，this的函数调用者是Person本身，而不是window了。

嵌套函数中的this

在嵌套函数中，this的指代关系有会是怎样的呢？看下面的代码：

var myObject = {
  func1:function() {
     console.log(this); //myObject
     var func2=function() {
        console.log(this); //window
        var func3=function() {
           console.log(this); //window
        }();
     }();
  }
}; 
myObject.func1();

在嵌套函数中，由于嵌套函数的执行上下文是window，所以this指代的是window对象，其实这是ECMA-262-3的一个bug，在最新的ECMA-262-5中已经修复。

事件处理中的this

在javascript中处理事件函数中，this的指代关系就更加扑朔离迷了。我们建立一个showValue函数，函数内容如下：

var showValue = function(){
	console.log(this.value);
};

现在有个input，我们给input元素添加click事件，当点击input时触发showValue函数，看看现在的this指代的是什么对象。

通过dom.onclick绑定事件

document.getElementById('test').onclick = showValue;

运行代码会得到预期的结果，showValue虽然定义在全局对象中，但是当采用了onclick的绑定方式时，showValue是作为dom的onclick方法被调用的，所以它的this应该指代的是dom对象，而不再是window对象。

写在html标签内

当点击dom时，我们获取不到正确的this，这是为什么呢？

此时的this指代的是window对象，因为window对象中没有定义value的值，所以获取不到this.value。其实此时的不是将showValue函数赋值给dom对象的onclick，而是引用！所以上面的代码跟下面的代码关系是一样的：

document.getElementById('test').onclick = function(){
    showValue();
};

根据上面说的javascript嵌套函数的this值，我们可以得出现在showValue的this其实是window。

通过addEventListener/attachEvent绑定事件监听

这种绑定事件监听的方式，attachEvent this是window对象，而addEventListener则是dom对象的。@魔堕轮回提出来的bug~嘎嘎

使用call和apply方法改变this

在Function对象原型（Function.prototype）中有两个方法：call和apply，通过call和apply可以改变this的值，它们都接受第一个参数作为调用执行上下文中this的值。它们的不同点就是apply第二个参数为数组，call接收的参数是依次传入的。

var obj = {
	name:'Theo Wong',
	desc:'一个前端开发者'
};
var getInfo = function(){
	console.log(this.name+this.desc);
};
getInfo.call(obj);
//Theo Wong一个前端开发者

总结

this是javascript的重要关键字，理解掌握this关键字在不同的执行上下文指代关系，才能避免代码犯一些不必要的错误。深入了解javascript的代码执行过程，及其执行上下文，推荐阅读《javascript的词法作用域》

声明：文章未声明为原创文章，本文链接 http://js8.in/851.html. 转载请注明转自 JS8.IN ™

随机文章

猜你喜欢：
nodejs教程：配置nodejs.exe的windows目录结构	nodejs教程：安装express及配置app.js文件	使用cygwin在windows下安装nodeJS	javascript入门到高级PPT
无觅

猜你喜欢：
Javascript事件触发列表与详解	Javascript正则表达式详解	通过javascript实现整站黑白效果	JavaScript跨浏览器的添加删除事件绑定函数
无觅

猜你喜欢：
javascript入门到高级PPT	nodePPT — nodejs做的手机端控制PC端的PPT演示文档javascript框架	Javascript设置光标位置到结尾并显示出来	javascript获取光标位置以及设置光标位置
无觅

猜你喜欢：
Javascript事件触发列表与详解	javascript获取光标位置以及设置光标位置	非字母javascript	JavaScript跨浏览器的添加删除事件绑定函数
无觅

猜你喜欢：
Javascript设置光标位置到结尾并显示出来	Javascript事件触发列表与详解	Javascript正则表达式详解	JavaScript跨浏览器的添加删除事件绑定函数
无觅

猜你喜欢：
IE6下javascript不能隐藏select标签的bug	IE6 PNG图片不透明问题的解决方法	png在IE6下透明的几种方法	解决IE6不支持max-height的bug
无觅

猜你喜欢：
javascript高效简洁代码的编写及优化技巧	javascript嵌套函数的效率问题	非字母javascript	Javascript设置光标位置到结尾并显示出来
无觅

猜你喜欢：
javascript的词法作用域	正确理解javascript的this关键字	JavaScript跨浏览器的添加删除事件绑定函数	[转]利用跨域资源共享（CORS）实现ajax跨域调用
无觅

猜你喜欢：
javascript作用域和作用域链	javascript继承的写法	javascript的词法作用域	javascript事件：获取事件对象getEvent函数
无觅