Java教程
《javascript设计模式与开发实践》——第三章（闭包和高阶函数）学习记录
3.1闭包
闭包的形成与变量的作用域以及变量的生存周期密切相关。我们先来看下这两个前置技能
变量的作用域：就是指变量的有效范围，我们在声明一个变量的时候，如果该变量前面没有关键字var，这个变量就是全局变量，这是一种容易造成命名冲突的做法。
另一种情况是用var在函数中声明变量，这个时候的变量就是局部变量，只有在该函数内部才能访问这个变量，如下:
var func = function(){
var a = 1;
alert(a)//1
}
func();
alert(a)
在函数外alert(a),浏览器就会报错
在JavaScript中，函数可以用来创造函数作用域，此时的函数就像一层半透明的玻璃，在函数里面可以看到外面的变量，但是在函数外面就无法看到函数里面的变量。在函数里面搜索一个变量的时候，如果没有找到这个变量，就会随着代码执行环境创建的作用域链往外层逐层搜索，一只搜索到全局对象为止。注意这个搜索过程是由内而外的，并且不能反过来。
看一下下面这段包含了嵌套函数的代码：
var a = 1;
var func1 = function(){
var b = 2;
var func2 = function(){
var c = 3;
alert(b)//2
alert(a)//1
}
func2();
alert(c)//报错：prograDesign_3.html:26 Uncaught ReferenceError: c is not defined
}
func1()
变量的生存周期：对于全局变量来说，生存周期当然是永久的，除非我们主动销毁这个全局变量，而对于局部变量来说，退出函数的时候，局部变量就会被销毁，但是有些函数，退出函数后，变量并没有销毁：
var func = function(){
var a = 1;
return function(){
a++;
alert(a);
}
}
var f = func()
f()//2
f()//3
f()//4
f()//5
可以看出a的值一直在++，退出函数后，a并没有销毁。这是因为当var f = func()执行时，f返回了一个匿名函数的引用，它可以访问到func被调用时产生的环境，a也在这个环境里。因为这个环境一直能被外界访问，所以a也有了不被销毁的理由。这里就产生了
闭包结构，局部变量的生命看起来就被延续了。
利用闭包我们可以完成许多奇妙的工作，下面就有一个经典应用。假设页面上有五个div节点，我们通过循环给每个div绑定click事件，希望点击第一个div的时候弹出1，点击第二个弹出2，以此类推。代码如下：
<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div>
var nodes = document.getElementsByTagName('div');
for(var i = 0,len = nodes.length;i<len;i++){
nodes[i].onclick = function(){
alert(i)
}
}
运行代码我们发现，不管点哪一个div都会弹出5，这是因为div节点的onclick事件时被异步触发的，当事件触发的时候，for循环早已结束，所以i的值都变成了5。
该怎么解决呢？使用闭包，把每次循环的i值都封闭起来，当在事件函数中，顺着作用域链中从内到外查找变量i时,会先找到被封闭在闭包环境中的i,如果有5个div，这里的i的值分别是0，1，2，3，4，如下:
var nodes = document.getElementsByTagName('div');
for(var i = 0,len = nodes.length;i<len;i++){
(function(i){
nodes[i].onclick = function(){
alert(i)
}
})(i)
}
同样的道理，我们还可以写一段检测类型的代码：
var Type = {}
for(var i = 0,type;type = ['String','Array','Number'][i++];){
(function(type){
Type['is'+type] = function(obj){
return Object.prototype.toString.call(obj) === '[object '+ type +']'
}
})(type)
}
console.log(Type.isArray([])) //true
console.log(Type.isString("str"))//true
console.log(Type.isString([]))//false
这里的for循环只有两个条件，如果不太明白可以看下下面的链接
https://blog.csdn.net/weixin_39647035/article/details/103196019
3.1.1闭包的更多作用
1.封装变量
闭包可以帮助把一些不需要暴露在全局的变量封装成“私有变量”。假设有一个计算乘积的简单函数:
var mult = function(){
var a = 1;
for(var i = 0,len = arguments.length;i<len;i++){
a = a*arguments[i]
}
return a;
}
var multResult = mult(1,2,3,4,5)
console.log(multResult)//120
mult函数接受一些number类型的参数，并返回这些参数的乘积。如果传入了相同的参数，我们可以加入缓存机制来提高这个函数的性能：
var cache = {};
var mult = function(){
var args = Array.prototype.join.call(arguments,',');
if(cache[args]){
return "从缓存中获取"+cache[args]
}
var a = 1;
for(var i = 0,len = arguments.length;i<len;i++){
a = a*arguments[i]
}
return cache[args] = a;
}
console.log(mult(1,2,3))//6
console.log(mult(1,2,3))//从缓存中获取6
console.log(mult(1,2,3,6,4))//144
（上边缓存还有待优化。。。）
cache这个变量仅仅在mult函数中被使用，与其让cache变量跟mult函数一起平行地暴露在全局作用域下，不如把它封闭在mult函数内部，这样做可以减少页面中的全局变量，可以避免这个变量在其他地方被不小心修改而引发错误：
var mult = (function(){
var cache = {};
return function(){
var args = Array.prototype.join.call(arguments,',');
if(args in cache){
return "从缓存中获取"+cache[args]
}
var a = 1;
for(var i = 0,len = arguments.length;i<len;i++){
a = a*arguments[i]
}
return cache[args] = a;
}
})()
console.log(mult(1,2,3))//6
console.log(mult(1,2,3))//从缓存中获取6
提炼函数是代码重构中的一种常见技巧。如果在一个大函数中有一些代码块能够独立出来，我们常常把这些代码块封装在独立的小函数里面。独立出来的小函数有助于代码复用，如果这些小函数不需要在程序的其他地方使用，最好是把它们用闭包封闭起来：
var mult = (function(){
var cache = {};
var calculate = function(){
var a = 1;
for(var i = 0,len = arguments.length;i<len;i++){
a = a*arguments[i]
}
return a;
}
return function(){
var args = Array.prototype.join.call(arguments,',');
if(args in cache){
return "从缓存中获取"+cache[args]
}
return cache[args] = calculate.apply(null,arguments);
}
})()
console.log(mult(1,2,3))//6
console.log(mult(1,2,3))//从缓存中获取6
2.延续局部变量的寿命
在讲变量生存周期的时候，已经举过一个例子是可以延续局部变量的寿命的，接下来再看这个例子，img对象经常用于进行数据上报。
var report = function(src){
var img = new Image();
img.src = src
}
report('http://xxx.com/getUserInfo')
但是通过查询后台的记录我们得知，因为一些低版本浏览器的实现存在bug,在这些浏览器下使用report函数进行数据上报会丢失30%左右的数据，也就是说，report并不是每一次都成功发起了HTTP请求。丢失数据的原因是img是report函数中的局部变量，当退出report以后，img可能会随即被销毁，而此时还没来得及发出HTTP请求，所以请求就会丢失掉。
现在我们把img变量用闭包封闭起来，便能解决请求丢失的问题：
var report = (function(){
var imgs = [];
return function(src){
var img = new Image();
imgs.push(img)
console.log(imgs)
img.src = src
}
})()
3.1.2闭包和面向对象设计
过程与数据的结合时形容面向对象中的“对象”时经常使用的表达。对象以方法的形式包含了过程，而闭包则是在过程中以环境的形式包含了数据。通常面向对象思想能实现的功能，用闭包也能实现。看下下面这段跟闭包相关的代码：
var extent = function(){
var value = 0;
return {
call:function(){
value++;
console.log(value)
}
}
}
var extent = extent();
extent.call();//1
extent.call();//2
extent.call();//3
换成面向对象的写法：
var extent = {
value:0,
call:function(){
this.value++;
console.log(this.value)
}
}
extent.call();//1
extent.call();//2
extent.call();//3
或者
var Extent = function(){
this.value = 0;
}
Extent.prototype.call = function(){
this.value++;
console.log(this.value)
}
var extent = new Extent();
extent.call();//1
extent.call();//2
extent.call();//3
3.1.3用闭包实现命令模式
先来看一段用面向对象的方式编写的命令模式的代码：
<button id="execute">执行命令-打开电视</button> <button id="undo">执行命令-关闭电视</button>
var Tv = {
open:function(){
console.log("open TV")
},
close:function(){
console.log("close TV")
}
}
var OpenTvCommand = function(receiver){
this.receiver = receiver;
}
OpenTvCommand.prototype.excute = function(){
this.receiver.open()
}
OpenTvCommand.prototype.undo = function(){
this.receiver.close()
}
var setCommand = function(command){
document.getElementById('execute').onclick = function(){
command.excute()
}
document.getElementById('undo').onclick = function(){
command.undo()
}
}
setCommand(new OpenTvCommand(Tv))
命令模式的意图是把请求封装为对象，从而分离请求的发起者和请求的接收者（执行者）之间的耦合关系。在命令被执行之前，可以预先往命令对象中植入命令的接受者。
如果需要往函数对象中预先植入命令的接收者，那么闭包可以完成这个工作。在面向对象版本的命令模式中，预先植入的命令接收者被当成对象的属性保存起来；而在闭包版本的命令模式中，命令接收者会被封闭在闭包形成的环境中，代码如下：
var Tv = {
open:function(){
console.log("open TV")
},
close:function(){
console.log("close TV")
}
}
var createCommand = function(receiver){
var excute = function(){
return receiver.open();
}
var undo = function(){
return receiver.close();
}
return {
excute:excute,
undo:undo
}
}
var setCommand = function(command){
document.getElementById('execute').onclick = function(){
command.excute()
}
document.getElementById('undo').onclick = function(){
command.undo()
}
}
setCommand(new createCommand(Tv))
3.1.3闭包与内存管理
我们经常听到一种耸人听闻的说法“闭包会造成内存泄漏，所以要尽量减少闭包的使用”
使用闭包可以让局部变量一直生存下去，从这个意义上看，闭包的确会使一些数据无法被及时销毁。使用闭包的一部分原因是我们选择主动把一些变量封闭在闭包中，因为可能在以后还需要使用这些变量，把这些变量放在闭包中和放在全局作用域里，对内存的影响是一致的，这里不能说成是内存泄露。如果我们想回收这些变量，我们可以手动把这些变量设为null。
跟闭包和内存泄露有关系的地方是，使用闭包的同时比较容易形成循环引用，如果闭包作用域链中保存着一些DOM节点，这时候就有可能造成内存泄露。
同样，如果要解决循环引用带来的内存泄露问题，我们只需要把循环引用中的变量设为null。这意味着切断变量与它此前引用的值之间的连接。当垃圾收集器下次运行时，就会删除这些值并回收它们占用的内存。
3.2高阶函数
高阶函数是指至少满足下列条件之一的函数
- 函数可以作为参数被传递
- 函数可以作为返回值输出
在实际开发中，这两种情形都有很多应用场景，来看一下下面的应用场景。
3.2.1函数作为参数传递
把函数当作参数传递，这代表我们可以抽离出一部分容易变化的业务逻辑，把这部分业务逻辑放在函数参数中，这样一来可以分离业务代码中变化与不变的部分。其中一个重要的场景就是回调函数。
1.回调函数
在ajax异步请求的应用中，回调函数使用非常频繁：
var getUserInfo = function(userId,callback){
$.ajax('http://xxx.com/getUserInfo?'+userId,function(data){
if(typeof callback === 'function'){
callback(data)
}
})
}
getUserInfo("1001011",function(data){
alert(data.userName)
})
当然，回调函数不只能用在异步请求中，当一个函数不适合执行一些请求时，我们也可以把这些请求封装成一个函数。比如我们想在页面创建100个div节点，然后把这些div节点都设置为隐藏，可以用下面这种方式:
var appendDiv = function(){
for(var i = 0;i<100;i++){
var div = document.createElement('div');
div.innerHTML = i;
document.body.appendChild(div);
div.style.display = 'none';
}
}
appendDiv()
显然，把隐藏div的逻辑硬编码在appendDiv有些太个性化了，成为了一个难以复用的函数，所以我们要把div.style.display = 'none';这行代码抽出来，用回调函数的形式传入appendDiv：
var appendDiv = function(callback){
for(var i = 0;i<100;i++){
var div = document.createElement('div');
div.innerHTML = i;
document.body.appendChild(div);
if(typeof callback === 'function'){
callback(div)
}
}
}
appendDiv(function(node){
node.style.display = 'none';
})
2.Array.prototype.sort
Array.prototype.sort有排序的功能，它可以接收一个函数当作参数，在函数里封装了排序的规则，从Array.prototype.sort中可以看出，我们的目的是对数组进行排序，这是不变的部分，而要用什么规则排序，这是可变的部分。我们把可变的部分封装在函数里，动态传入Array.prototype.sort，这样这个方法就变得非常灵活。
// 从小到大排序
var sort1 = [1,4,6,2].sort(function(a,b){
return a - b;
})
// 从大到小排序
var sort2 = [1,4,6,2].sort(function(a,b){
return b - a;
})
console.log(sort1);//[1, 2, 4, 6]
console.log(sort2);//[6, 4, 2, 1]
3.2.2函数作为返回值输出
相比把函数当作参数传递，函数当作返回值输出的应用场景也许更多，让函数继续返回一个可执行的函数，意味着运算过程是可延续。
1.判断数据的类型
判断一个数据是否是数组，在以往的实现中，可以给予鸭子类型的概念来判断，比如判断这个数据有没有length属性，有咩有sort方法或者slice方法等。更好的方式是用Object.prototype.toString来计算，Object.prototype.toString.call(obj)返回一个字符串，比如Object.prototype.toString.call([1,2,3])会返回"[object Array]",而Object.prototype.toString.call(“str”)总是返回"[object String]"。我们可以编写一系列的isType函数。代码如下：
var isString = function(obj){
return Object.prototype.toString.call(obj) === '[object String]'
}
var isArray = function(obj){
return Object.prototype.toString.call(obj) === '[object Array]'
}
var isNumber = function(obj){
return Object.prototype.toString.call(obj) === '[object Number]'
}
可以看出上面的代码中，大部分代码都是相同的，不同的只是Object.prototype.toString.call(obj)返回的字符串。为了避免多余的代码，我们尝试把这些字符串作为参数提前植入isType函数：
var isType = function(type){
return function(obj){
return Object.prototype.toString.call(obj) === '[object '+type+']'
}
}
var isString = isType('String');
var isArray = isType('Array');
var isNumber = isType('Number');
console.log(isString([1,2,3]));//false
console.log(isArray([1,2,3]));//true
或者可以写一个循环来批量注册isType函数：
var Type = {};
for(var i = 0,type;type = ['String','Array','Number'][i++];){
(function(type){
Type['is'+type] = function(obj){
return Object.prototype.toString.call(obj) === '[object '+type+']'
}
})(type)
}
console.log(Type.isArray([]));//true
console.log(Type.isArray("str"));//false
2.getSingle
下面是一个单例模式的例子:
var getSingle = function(fn){
var ret;
return function(){
return ret || (ret = fn.apply(this,arguments))
}
}
这个高阶函数的例子，即把函数当作参数传递，又让函数执行后返回了另一个函数，可以看看getSingle函数的效果。
var getScript = getSingle(function(){
return document.createElement('script');
});
var script1 = getScript();
var script2 = getScript();
alert(script1 === script2)//true
3.2.3高阶函数实现AOP
AOP（面向切面编程）的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，例如日志统计、安全控制、异常处理等。把这些功能抽离出来以后，再通过“动态织入”的方式掺入业务逻辑模块中。这样做，可以保持业务逻辑模块的纯净和高内聚性，其次是可以很方便地复用日志统计等功能模块。
我们通过扩展Function.prototype来做这一点：
Function.prototype.before = function(beforefn){
var _self = this;//保存原函数的引用
return function(){//返回包含了原函数和新函数的“代理”函数
beforefn.apply(this,arguments);//执行新函数，修正this
return _self.apply(this,arguments);//执行原函数
}
}
Function.prototype.after = function(afterfn){
var _self = this;//保存原函数的引用
return function(){//返回包含了原函数和新函数的“代理”函数
afterfn.apply(this,arguments);//执行新函数，修正this
return _self.apply(this,arguments);//执行原函数
}
}
var func = function(){
console.log(2);
}
func = func.before(function(){
console.log(1)
}).after(function(){
console.log(3)
})
func();
我们把负责打印数字1和打印数字3的两个函数通过AOP的方式动态植入func函数。通过执行func()，控制台顺利地返回了执行结果
3.2.3高阶函数其他应用
1.currying
currying又称为部分求值，一个currying的函数首先会接受一些参数，接受了参数以后并不会立即求值，而是继续返回另一个函数，刚才传入的参数在函数形成的闭包中被保存起来。等到函数真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。
假如我们要写一个计算每月开销的函数，在每天结束之前，我们都要记录今天花掉多少钱。代码如下：
var monthlyCost = 0;
var cost = function(money){
monthlyCost += money;
}
cost(100);
cost(200);
cost(300);
alert(monthlyCost)//600
通过这段代码可以看到，每天结束后我们都会记录并计算到今天为止花掉的钱。我们并不太关心每天花了多少钱，只想知道到月底的时候会花掉多少钱。也就是说，实际上只需要在月底计算一次。
我们想要的效果是，每个月钱29天我们都只是保存好当天的开销，直到第30天才进行求值计算，下面的代码不是一个currying函数的完整实现，但有助于我们理解思想：
var cost = (function(){
var args = [];
return function(){
if(arguments.length === 0){
var money = 0;
for(var i = 0,l = args.length;i<l;i++){
money+=args[i];
}
return money
}else{
[].push.apply(args,arguments)
}
}
})()
console.log(cost(100));//undefined
console.log(cost(200));//undefined
console.log(cost(300));//undefined
console.log(cost());//600
接下来我们要编写一个通用的function currying(){}代码如下：
var currying = function(fn){
var args = [];
return function(){
if(arguments.length === 0){
return fn.apply(this,args)
}else{
[].push.apply(args,arguments);
return arguments.callee;
}
}
}
var cost = (function(){
var money = 0;
return function(){
for(var i = 0,l = arguments.length;i<l;i++){
money+=arguments[i];
}
return money
}
})();
var cost = currying(cost);
cost(100);
cost(200);
cost(300);
console.log(cost());//600
至此，我们完成了一个currying函数，当调用cost的时候，如果明确带一些参数，表示现在不是真正的求值，而是要把这些参数保存下来，此时让cost返回另一个函数，只有不传参数时。才能进行最后的求值计算。
2.uncurrying
在上一章我们讲了call 和apply，可以看到一个对象未必只能使用它自身的方法，比如我们常常让类数组对象去借用Array.prototype的方法，最常见的场景之一：
(function(){
Array.prototype.push.call(arguments,4);
console.log(arguments)//1,2,3,4
})(1,2,3)
这样一来，方法中用到this的地方就不再局限于原来规定的对象，而是加以泛化并得到更广的适用性。那么有没有办法把泛化this的过程提取出来呢？uncurrying就是用来解决这个问题的。
下面是uncurrying实现方法之一：
Function.prototype.uncurrying = function(){
var self = this;
return function(){
var obj = Array.prototype.shift.call(arguments);
return self.apply(obj,arguments)
}
}
先不要纠结这段代码的原理，看看它有什么作用吧。
在类数组对象arguments借用Array.prototype的方法之前，先把Array.prototype.push.call这句代码转换为一个通用的push函数：
Function.prototype.uncurrying = function(){
var self = this;
return function(){
var obj = Array.prototype.shift.call(arguments);
return self.apply(obj,arguments)
}
}
var push = Array.prototype.push.uncurrying();
(function(){
push(arguments,4)
console.log(arguments)//1,2,3,4
})(1,2,3)
通过uncurrying的方式，Array.prototype.push.call变成了一个通用的pu sh函数，这样一来push函数的作用就跟Array.prototype.push一样了。
我们还可以一次性地把Array.prototype上的方法“复制”到array对象上，当然这些方法可操作的对象也不仅仅只是array对象：
for(var i = 0,fn,ary = ['push','shift','forEach'];fn = ary[i++];){
Array[fn] = Array.prototype[fn].uncurrying()
}
var obj = {
"length":3,
"0":1,
"1":2,
"2":3
}
Array.push(obj,4)
console.log(obj)
console.log("-------------")
var first = Array.shift(obj)
console.log(first);
console.log(first,obj);
console.log("-------------")
Array.forEach(obj,function(i,n){
console.log(i,n)
});
现在我们分析一下调用Array.prototype.push.uncurrying()这句代码时发生了什么事情：
Function.prototype.uncurrying = function(){
var self = this;
return function(){
var obj = Array.prototype.shift.call(arguments);
// obj是{
// "length":1,
// "0":1
// }
// arguments对象的第一个元素被截去，剩下[2]
return self.apply(obj,arguments);
// 相当于Array.prototype.push.apply(obj,2);
}
}
var push = Array.prototype.push.uncurrying();
var obj = {
"length":1,
"0":1
}
push(obj,2);
console.log(obj);//输出
3.函数节流
JavaScript中的函数大多数情况下都是由用户主动调用触发的，除非是函数本身的实现不合理，否则我们一般不会遇到跟性能相关的问题。但在一些少数情况下，函数的触发不是由用户直接控制的。在这些场景下，函数有可能被非常频繁地调用，而造成大的性能问题。
（1）函数被频繁调用的场景
- window.onresize事件。我们给window对象绑定了resize事件，当浏览器窗口大小被拖动而改变的时候，这个事件触发的频率非常之高。如果哦我们在window.onresize事件函数里加一些跟DOM节点相关的操作，因为DOM节点是很消耗性能的，这时候浏览器可能会出现卡顿现象。
- mousemove事件。同样，如果我们给一个div节点绑定了拖拽事件，当div节点被拖动的时候，也会频繁地触发该拖拽事件函数。
- 上传进度。微云的上传功能使用了公司提供的一个浏览器插件。该浏览器插件在真正开始上传文件之前，会对文件进行扫描并随时通知JavaScript函数，以便在页面中显示当前的扫描进度。但该插件通知的频率非常之高，大约一秒钟10次，很显然我们在页面中不需要如此频繁的去提示用户。
（2）函数节流的原理
上面的三个场景，发现它们面临的共同问题是函数被触发的频率太高。
比如我们在window.onresize事件中要打印当前的浏览器窗口大小，在我们通过拖拽来改变窗口大小的时候，打印窗口大小的工作1秒钟进行了10次。但是我们实际上只需要2次或者3次，这就需要我们按时间段来忽略一些事件请求，比如确保在500ms内打印一次。很显然，我们可以借助setTimeout来完成这件事。
（3）函数节流的代码实现
我们来看一下下面这段代码：
var throttle = function(fn,interval){
var __self = fn,//保存需要被延迟执行的函数引用
timer,//定时器
firstTime = true;//是否是第一次调用
return function(){
var args = arguments,
__me = this;
if(firstTime){
__self.apply(__me,args);
return firstTime = false;
}
if(timer){
return false;
}
timer = setTimeout(function(){
clearTimeout(timer);
timer = null;
__self.apply(__me,args);
},interval || 500)
}
}
window.onresize = throttle(function(){
console.log(1)
},500)
这段代码将即将被执行的函数用setTimeout延迟一段时间执行。如果该次延迟执行还没有完成，则忽略接下来调用该函数的请求。
4.分时函数
假如，我们需要创建webQQ的QQ好友列表。列表中通常会有成百上千个好友，如果一个好友是一个节点，那我们在渲染列表时，会一次性往页面中创建成百上千个节点。
短时间内往页面中大量添加DOM节点可能会让浏览器卡顿甚至时假死，代码如下：
var ary = [];
for(var i = 1;i<=1000;i++){
ary.push(i);
}
var renserFriendList = function(data){
for(var i = 0,l = data.length;i < l;i++){
var div = document.createElement('div');
div.innerHTML = i;
document.body.appendChild(div)
}
}
renserFriendList(ary)
要解决这个问题，我们可以使用下面的timeChunk函数:
var timeChunk = function(ary,fn,count){
var obj,t;
var len = ary.length;
var start = function(){
for(var i = 0;i < Math.min(count||1,ary.length);i++){
var obj = ary.shift();
fn(obj)
}
}
return function(){
t = setInterval(function(){
if(ary.length === 0){//如果全部节点都已经被创建好
return clearInterval(t);
}
start();
},200);//分批执行的时间间隔，也可以用参数的形式传入
}
}
timeChunk函数让创建节点的工作分批进行，比如把1秒钟创建1000个节点，改为每隔200毫秒创建8个节点。
假设我们有1000个好友数据，接下来使用一下timeChunk。
var ary = [];
for(var i = 1;i<=1000;i++){
ary.push(i);
}
var renserFriendList = timeChunk(ary,function(n){
var div = document.createElement('div');
div.innerHTML = n;
document.body.appendChild(div)
},8)
renserFriendList()
5.惰性加载函数
在web开发中，因为浏览器之间的实现差异，一些嗅探工作总时不可避免。比如我们需要一个在各个浏览器中能够通用的事件来绑定函数addEvent,常见的写法：
var addEvent = function(elem,type,handler){
if(window.addEventListener){
return elem.addEventListener(type,handler,false);
}
if(window.attachEvent){
return elem.attachEvent('on'+type,handler)
}
}
这个函数每次调用的时候都会执行里面的if条件分支，虽然执行这些if分支的开销不算大，但有方法可以让程序避免这些重复的执行过程。
第二种方案，我们把嗅探浏览器的操作提前到代码加载的时候，在代码加载的时候就立刻进行一次判断，以便让addEvent返回一个包裹了正确逻辑的函数：
var addEvent = (function(){
if(window.addEventListener){
return function(elem,type,handler){
elem.addEventListener(type,handler,false);
}
}
if(window.attachEvent){
return function(elem,type,handler){
elem.attachEvent('on'+type,handler)
}
}
})()
这样还是会有一个缺点，也许我们从头到尾都没有使用过addEvent，如果这样的话这就属于多余操作，而且会稍稍延长页面呢ready时间。
第三种方案就是我们将要讨论的惰性载入函数方案，此时addEvent依然被声明为一个普通的函数，在函数里依然会有一些分支的判断，但是在第一次进入条件分支后，在函数内部会重写这两个函数，重写之后的函数就是我们期望的addEvent函数，在下一次进入addEvent函数的时候，addEvent函数里不再存在条件分支语句：
var addEvent = function(elem,type,handler){
if(window.addEventListener){
addEvent = function(elem,type,handler){
elem.addEventListener(type,handler,false);
}
}else if(window.attachEvent){
addEvent = function(elem,type,handler){
elem.attachEvent('on'+type,handler);
}
}
addEvent(elem,type,handler);
}
var div = document.getElementById('div1')
addEvent(div,'click',function(){
alert(1)
})
addEvent(div,'click',function(){
alert(2)
})
-
线下车企门店如何实现线上线下融合？12-23
-
鸿蒙Next ArkTS编程规范总结12-23
-
物流团队冬至高效运转，哪款办公软件可助力风险评估？12-23
-
优化库存，提升效率：医药企业如何借助看板软件实现仓库智能化12-23
-
项目管理零负担！轻量化看板工具如何助力团队协作12-23
-
电商活动复盘，为何是团队成长的核心环节？12-23
-
鸿蒙Next ArkTS高性能编程实战12-23
-
数据驱动：电商复盘从基础到进阶！12-23
-
从数据到客户：跨境电商如何通过销售跟踪工具提升营销精准度？12-23
-
汽车4S店运营效率提升的核心工具12-23
-
ERP 系统开发案例：用 PERT 图打造高效项目管理12-23
-
初创团队必备！全面解析支持甘特图的项目管理工具与功能特点12-23
-
任务进度跟踪不再难！可视化项目协作工具精选12-23
-
看板工具为汽车销售门店协作赋能：关键方法12-23
-
0.96寸OLED显示屏详解12-23
