使用JS闭包特性的简单应用
2009-08-20 11:36
651 查看
最近在做一个项目，由于对JS的一些特性不是很熟悉，走了些弯路，不过到最后总算解决了问题。现在把项目中一些经验心得发出来，希望能对以后解决问题的人有些帮助。
简单描述下项目需求：网络中有一台主机（Web站点），需要对分布到各地的节点发送命令，检测命令执行结果，同时进行状态检测。由于各地节点是同构的，所以希望在进行命令执行和状态检测时，能够起多个线程，每个线程对应一个节点，将结果即时反应到页面。
最开始的设想是这样的：把所有的节点放到数组，页面开始执行时遍历数组，将节点作为参数传递到实际中的函数，函数使用setInterval来启动，以此来模拟多线程。
代码如下：见index1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 实例1 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Node(id,name,cn){
this.id = id;
this.name = name;
this.cn = cn;
}
var nodes = new Array();
nodes[0] = new Node(1,"node1","节点1");
nodes[1] = new Node(2,"node2","节点2");
var nodeConfig = {};
nodeConfig.ticks = 4 * 1000; //刷新频率
nodeConfig.msg = "运行中";
function showStatus(node){
alert(node.name + ":" + nodeConfig.msg);
}
function start(){
var len = nodes.length;
for (var i =0; i < len ; i++){
setInterval(function(){showStatus(nodes[i])} ,nodeConfig.ticks);
}
}
start();
//-->
</SCRIPT>
</BODY>
</HTML>
正当我信心满满的想查看结果时，发现出错。查找了一些资料，大概明白是由于setInterval执行时，传进来的形参已经脱离了其定义的函数环境，已经被垃圾回收器回收了。由于时间紧迫，来不及细查资料，暂时采取了一种其他的方法来实现：每个节点对应一个函数。
代码如下：见index2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 实例2 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Node(id,name,cn){
this.id = id;
this.name = name;
this.cn = cn;
}
var nodes = new Array();
nodes[0] = new Node(1,"node1","节点1");
nodes[1] = new Node(2,"node2","节点2");
var nodeConfig = {};
nodeConfig.ticks = 4 * 1000; //刷新频率
nodeConfig.msg = "运行中";
function showStatus1(node){
alert(node.name + ":" + nodeConfig.msg);
}
function showStatus2(node){
alert(node.name + ":" + nodeConfig.msg);
}
function start(){
setInterval(function(){showStatus1(nodes[0])} ,nodeConfig.ticks);
setInterval(function(){showStatus2(nodes[1])} ,nodeConfig.ticks);
}
start();
//-->
</SCRIPT>
</BODY>
</HTML>
此段代码能够执行，但是其缺陷显而易见：每当增加一个节点时，就要手动的去改代码，增加函数。而这些代码大部分都是相同的，虽然可以直接Copy，维护难度却会一直增加，一不小心就不知道是哪个节点更改错了。
稍微闲下来时，继续查找资料，终于找了闭包的概念。关于闭包的介绍，此处只是简单概述，具体的可以看下面的参考资料，那里面介绍的很详细。
所谓“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。（引自参考文章）
我自己的理解就是：外部变量保存了某个内部函数的指针，由于JS垃圾回收机制，也间接的保存了内部函数定义环境的一些变量。
呵呵，知道这个方法后，就对原来的代码改写一遍。为了更OO一点，又对程序重构了一番。
代码如下：见index3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 实例4 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var nodeConfig = {};
nodeConfig.ticks = 4 * 1000; //刷新频率
nodeConfig.msg = "运行中";
function Node(id,name,cn){
this.id = id;
this.name = name;
this.cn = cn;
}
//节点数组可从服务器端生成
var nodes = new Array();
nodes[0] = new Node(1,"node1","节点1");
nodes[1] = new Node(2,"node2","节点2");
var NodeManager = function(newObj){
var pro=this;
for(var i in newObj){ //将配置转变为自身属性
pro[i] = newObj[i];
}
};
NodeManager.prototype = {
showStaus:function(node){
alert(node.name + ":" + this.msg);
},
start:function(){
var len = nodes.length, ins = this; //将实例赋值给变量,以便在此方法中能够使用
for(var i = 0; i < len; i++){
var f = function(idx){
setInterval(function(){ ins.showStaus(nodes[idx])},ins.ticks);
}
f(i);
}
}
}
var m = new NodeManager({
ticks:nodeConfig.ticks,
msg:nodeConfig.msg
});
m.start();
//-->
</SCRIPT>
</BODY>
</HTML>
至此，才终于将程序划上稍显完美的句号。
参考文章：
深入理解JavaScript闭包(closure)
http://www.felixwoo.com/archives/247
一个js闭包的小例子
http://blog.pchome.net/article/182960.html
js对象属性类型
http://orn827.blog.163.com/blog/static/1113902032009681365891/
源码下载：/Files/hellofox2000/js_thread.rar
简单描述下项目需求：网络中有一台主机（Web站点），需要对分布到各地的节点发送命令，检测命令执行结果，同时进行状态检测。由于各地节点是同构的，所以希望在进行命令执行和状态检测时，能够起多个线程，每个线程对应一个节点，将结果即时反应到页面。
最开始的设想是这样的：把所有的节点放到数组，页面开始执行时遍历数组，将节点作为参数传递到实际中的函数，函数使用setInterval来启动，以此来模拟多线程。
代码如下：见index1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 实例1 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Node(id,name,cn){
this.id = id;
this.name = name;
this.cn = cn;
}
var nodes = new Array();
nodes[0] = new Node(1,"node1","节点1");
nodes[1] = new Node(2,"node2","节点2");
var nodeConfig = {};
nodeConfig.ticks = 4 * 1000; //刷新频率
nodeConfig.msg = "运行中";
function showStatus(node){
alert(node.name + ":" + nodeConfig.msg);
}
function start(){
var len = nodes.length;
for (var i =0; i < len ; i++){
setInterval(function(){showStatus(nodes[i])} ,nodeConfig.ticks);
}
}
start();
//-->
</SCRIPT>
</BODY>
</HTML>
正当我信心满满的想查看结果时，发现出错。查找了一些资料，大概明白是由于setInterval执行时，传进来的形参已经脱离了其定义的函数环境，已经被垃圾回收器回收了。由于时间紧迫，来不及细查资料，暂时采取了一种其他的方法来实现：每个节点对应一个函数。
代码如下：见index2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 实例2 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Node(id,name,cn){
this.id = id;
this.name = name;
this.cn = cn;
}
var nodes = new Array();
nodes[0] = new Node(1,"node1","节点1");
nodes[1] = new Node(2,"node2","节点2");
var nodeConfig = {};
nodeConfig.ticks = 4 * 1000; //刷新频率
nodeConfig.msg = "运行中";
function showStatus1(node){
alert(node.name + ":" + nodeConfig.msg);
}
function showStatus2(node){
alert(node.name + ":" + nodeConfig.msg);
}
function start(){
setInterval(function(){showStatus1(nodes[0])} ,nodeConfig.ticks);
setInterval(function(){showStatus2(nodes[1])} ,nodeConfig.ticks);
}
start();
//-->
</SCRIPT>
</BODY>
</HTML>
此段代码能够执行，但是其缺陷显而易见：每当增加一个节点时，就要手动的去改代码，增加函数。而这些代码大部分都是相同的，虽然可以直接Copy，维护难度却会一直增加，一不小心就不知道是哪个节点更改错了。
稍微闲下来时，继续查找资料，终于找了闭包的概念。关于闭包的介绍，此处只是简单概述，具体的可以看下面的参考资料，那里面介绍的很详细。
所谓“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。（引自参考文章）
我自己的理解就是：外部变量保存了某个内部函数的指针，由于JS垃圾回收机制，也间接的保存了内部函数定义环境的一些变量。
呵呵，知道这个方法后，就对原来的代码改写一遍。为了更OO一点，又对程序重构了一番。
代码如下：见index3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 实例4 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var nodeConfig = {};
nodeConfig.ticks = 4 * 1000; //刷新频率
nodeConfig.msg = "运行中";
function Node(id,name,cn){
this.id = id;
this.name = name;
this.cn = cn;
}
//节点数组可从服务器端生成
var nodes = new Array();
nodes[0] = new Node(1,"node1","节点1");
nodes[1] = new Node(2,"node2","节点2");
var NodeManager = function(newObj){
var pro=this;
for(var i in newObj){ //将配置转变为自身属性
pro[i] = newObj[i];
}
};
NodeManager.prototype = {
showStaus:function(node){
alert(node.name + ":" + this.msg);
},
start:function(){
var len = nodes.length, ins = this; //将实例赋值给变量,以便在此方法中能够使用
for(var i = 0; i < len; i++){
var f = function(idx){
setInterval(function(){ ins.showStaus(nodes[idx])},ins.ticks);
}
f(i);
}
}
}
var m = new NodeManager({
ticks:nodeConfig.ticks,
msg:nodeConfig.msg
});
m.start();
//-->
</SCRIPT>
</BODY>
</HTML>
至此，才终于将程序划上稍显完美的句号。
参考文章：
深入理解JavaScript闭包(closure)
http://www.felixwoo.com/archives/247
一个js闭包的小例子
http://blog.pchome.net/article/182960.html
js对象属性类型
http://orn827.blog.163.com/blog/static/1113902032009681365891/
源码下载：/Files/hellofox2000/js_thread.rar
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- webpack的最简单应用，只使用js与css的打包
- Asp.net+Vue2构建简单记账WebApp之三（使用Vue-cli构建vue.js应用）
- Ext.js 组件的简单应用——【Window】和【HtmlEditor】结合使用
- 一个简单效果用到的js特性（异步编程,匿名函数,闭包）
- Asp.net+Vue2构建简单记账WebApp之三（使用Vue-cli构建vue.js应用）
- webpack的最简单应用，只使用js与css的打包
- 使用require.js和backbone实现简单单页应用实践
- js数据层中间件单页运用简单构思和应用案例
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport（2）
- js中闭包的使用
- openresty 应用打包并使用luajit编译lua代码实现简单加密
- JS中数组的应用与简单算法（冒泡排序）
- java中随机函数的使用及简单应用
- [NodeJS]使用Node.js写一个简单的在线聊天室
- 01_Java基础_数组的定义、基本使用和简单应用
- 在Mac OS下使用Node.js的简单教程
- cocos2d js-3.2 PageView的简单使用
- 使用HTML+CSS+JS制作简单的网页菜单界面
- swfobject.js 2.2简单使用方法
- C#MVC框架一些简单JS的使用