透过Extjs学习JavaScript---闭包篇
目录
一、前言
JavaScript设计得最出色的就是它的函数的实现,它几乎接近于完美。我们现在现就来介绍它其中一个功能“闭包”。我们可以利用闭包“保存变量生命周期”和“屏蔽变量”的特性优雅地完成一些强大的功能。后面我还会介绍在ExtJS中是如何使用这种特性的。
二、基础讲解
我们可以利用“闭包”功能来实现隐藏或公开对象的变量和方法。
测试代码如下
var bufferObj = (function createFun(fn, interval, scope) {
var isExec = 1;//被闭包的变量,外界不能直接访问
return {//公开set,和exec方法
set : function(data) {
isExec = data;
},
exec : function(fn) {
if (isExec) {//读取闭包的变量
console.log("函数可以执行");
fn();
} else {
console.log("函数不能执行");
}
}
};
})();
注意我们把整个函数用括号包住,并在最后一行加了"()",这样写法的意思是马上执行函数,并返回了结果值。这样我们的变量“bufferObj”对象就是带有公开的set和exec方法和私有变量“isExec”。我不能直接访问到“isExec”这个变量,这就是我们使用闭包的结果,将一些变量或方法优雅的变成私有,很好的控制了变量的作用域。
三、知识应用
上节初步的说明了闭包的写法和功能,看似功能不过如此,其实不然。下面我们来看看ExtJs是如何使用闭包功能的,希望可以给大家在使用闭包有更多的启发。这也是学习JS这门语言有兴趣的地方,是把一个简简单单的知识点写出多种花样。
下面的代码是extjs中“Ext.Function”类中的“createBuffered”方法,主要功能就是生成“带有延迟功能的函数”。我为了简化“Ext.Function”类的上下文,并把代码标上的汉语解释方便讲解。
Ext.Function 代码如下:
var Ext = {};
Ext.Function = {
/**
* 返回带有延迟功能的函数,如果在延迟的时间内再次调用该函数,重置缓冲时间
* @param {Function} fn 需要被延迟的方法
* @param {Number} buffer 延迟时间(毫秒)
* @param {Object} [scope=this] 传入方法的作用域
* @param {Array} [args] 方法参数
* @return {Function} 返回带有缓冲功能的函数
*/
createBuffered: function(fn, buffer, scope, args) {
var timerId;//计时器ID return function() {
var callArgs = args || Array.prototype.slice.call(arguments, 0),//将“arguments”类型转成数组类型
me = scope || this;//如果没有传入“scope”参数就全用当前上下文的"this"为作用域 if (timerId) {//如果有计时器,就取消之前的计时器
clearTimeout(timerId);
} timerId = setTimeout(function(){//重置缓冲时间
fn.apply(me, callArgs);//在相应的作用域上执行方法
}, buffer);
};
}
};
在上述代码中把变量“timerId”闭包在对象内,只返回了一个带有缓冲功能的方法,该返回方法主要是判断函数在缓冲期内是否被重复调用,如果在缓冲期内被调用就重置计时器。
在代码中有三个知识点:
1. 15行中“Array.prototype.slice.call(arguments, 0)”这句意思是把arguments参数类型转成数组类型,方便第23行的“apply”调用。(如果不知道arguments是什么意思的同学就自行面壁思过吧,哈哈哈。)
2. 16行中"me = scope || this" ,是一个if判断取巧的写法。整句的意思是,当“scope”为“空”或“假”时就把“this”返回给“me”变量。
3. 18行中的“timerId”变量由于是被闭包,他的“生命期”被延长了,不会随着返回函数的运行结束而结束,所以每次调用返回函数时,都可以保留之前的“timerId”值。
使用代码如下:
var run = function(data) {
alert("函数运行成功");
alert("入参为:" + data);
};
var bufferFn = Ext.Function.createBuffered(run, 3000);
bufferFn("JavaScript1");//不会被执行,因为后一个函数在缓冲期3秒内调用,把这当前的函数取消了
bufferFn("JavaScript2");//不会被执行,因为后一个函数在缓冲期3秒内调用,把这当前的函数取消了
bufferFn("JavaScript3");//会被执行,因为后一个函数没有在缓冲期3秒内调用,所以该函数会执行 setTimeout(function() {//间隔4秒
bufferFn("JavaScript4");//会被执行,因为后面没有重复调用了
}, 4000);
在上述代码第5行,就是通过“Ext.Function.createBuffered”生成了一个带有缓冲功能的函数“bufferFn”,如果我们在3秒的缓冲期内重复调用就不会重复执行函数。
四、总结
- 笔者的案例代码是取自于ExtJs,可能有些不好理解,但是当你看懂了,就能感觉到JS这门语言的巧妙。
- 文本只是通过介绍闭包的方法,进而介绍下ExtJs的源码,使我们撸代码的水平有所提升。
五、常见问题
- 问:有的人会问这创建延迟函数有什么用?感觉在实际情况下用不到?
答:笔者可不这么认为,我在做项目中就常常用到这种方法。当我们要对一个输入框发生内容改变时,进行AJAX查询。但又不想每输入一个字就进行一次查询,因为这样非常的消耗服务器资源。较好的解决方案是设置一个输入缓冲期,在这个输入缓冲期内输入字母不进行查询,等过了缓冲期在对之前输入过的所有字母进行查询,所以我们需要一个“带有延迟缓冲功能”的函数。 - 问:arguments这到底是什么?
答:好吧,详细请访问http://www.w3school.com.cn/js/pro_js_functions_arguments_object.asp,arguments是一个特殊的对象,类似于数组,但不完全是数组,所以要用“Array.prototype.slice.call(arguments, 0)”方法转成常规的数组。
透过Extjs学习JavaScript---闭包篇的更多相关文章
- 一步步学习javascript基础篇(0):开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 一步步学习javascript基础篇(3):Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- [转载]学习Javascript闭包(Closure)
学习Javascript闭包(Closure) 源地址: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures ...
- 一步步学习javascript基础篇(6):函数表达式之【闭包】
回顾前面介绍过的三种定义函数方式 1. function sum (num1, num2) { return num1 + num2; } //函数声明语法定义 2. var sum = funct ...
- 通过示例学习JavaScript闭包
译者按: 在上一篇博客,我们通过实现一个计数器,了解了如何使用闭包(Closure),这篇博客将提供一些代码示例,帮助大家理解闭包. 原文: JavaScript Closures for Dummi ...
- 一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)
上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 ...
- 一步步学习javascript基础篇(4):面向对象设计之创建对象(工厂、原型和构造函数等模式)
前面我们介绍了可以通过Object构造函数或对象字面量都可以用来创建单个对象,但是如果需要创建多个对象的话,显然很多冗余代码. 接下来介绍几种模式来创建对象.不过在此之前,我们还是先来了解下 type ...
- 一步步学习javascript基础篇(1):基本概念
一.数据类型 数据类型 基本数据类型(五种) Undefined Null Boolean Number String 复杂数据类型(一种) Object Undefined:只有一个值undefin ...
- 一步步学习javascript基础篇(8):细说事件
终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...
随机推荐
- Codeforces Round #258 (Div. 2)[ABCD]
Codeforces Round #258 (Div. 2)[ABCD] ACM 题目地址:Codeforces Round #258 (Div. 2) A - Game With Sticks 题意 ...
- Oracle V$SQLAREA
V$SQLAREA 记录shared SQL area中语句统计信息: V$SQLAREA持续跟踪所有shared pool中的共享cursor,在shared pool中的每一条SQL语句都对应一列 ...
- Undefined symbols for architecture i386
这个错误的发生原因一般是“XXX”这个文件(类库)虽然引入了工程中,但是由于种种原因(常见于多人开发,svn同步不规范)导致“XXX”并未被添加到project.pbxproj这个文件中. 解决方法是 ...
- [转] JAVA的Random类
Random类 (java.util) Random类中实现的随机算法是伪随机,也就是有规则的随机.在进行随机时,随机算法的起源数字称为种子数(seed),在种子数的基础上进行一定的变换,从而产生需要 ...
- Gradle学习目录总结
如果是你想干的事情,在别人看起来可能是很难的一件事,不过你自己很喜欢,你不会觉得很苦.我开始创业那会是28岁.对我来讲,我创业的目的不是为了自己当老板,我希望有一个平台有一个环境,我可以控制一些资源, ...
- 自定义控件(视图)2期笔记08:自定义控件之 9patch图说明
1. 何为 9patch图 ? 它是一个对png图片做处理的一个工具,能够为我们生成一个"*.9.png"的图片:所谓"*.9.png"这是Androi ...
- Linux常用操作练习
Linux常用操作练习 练习一:安装CentOS 1.设置为1G内存(才有图形界面).10G硬盘 2.分给交换分区2G(4G一下2G,8G-32G分4G-8G) 练习二:安装CentOS迷你版 1.安 ...
- JAVA集合差异
接口 简述 实现 操作特性 成员要求 Set 成员不能重复 HashSet 外部无序地遍历成员 成员可为任意Object子类的对象,但如果覆盖了equals方法,同时注意修改hashCode方法. T ...
- urlwrite伪静态(SAE、PHP、JSP)
在SAE里,直接配置config.yaml文件,文件可以配置的内容包含: 目录默认页面 自定义错误页面 压缩 页面重定向 页面过期 设置响应Header的Content-Type appname: x ...
- My.Ioc 代码示例——实现自动注册/解析
在很多 Ioc 容器中,当使用者向容器请求实现了某个契约类型 (Contract Type) 的服务时 (调用类似如下方法 container.Resolve(Type contractType)), ...