浅析javascript代理模式-事件绑定与内存泄漏

代理模式（Entrust）：多个对象接收并处理同一请求，他们将请求委托给另一个对象统一处理请求。

在开发中我们可以利用委托模式做事件绑定以及防止内存泄露

 

举个栗子，有一个日期列表，当用户点击日期格子的时候将格子的背景色变成灰色

首先我们先看下面这一种方式

var ul = document.getElementById('container'),
	li = document.getElementsByName('li'),
	i = li.length - 1;
	
for(; i >= 0; i--) {
	li[i].onclick = function() {
		this.style.backgroundColor = 'grey';
	}
}

上面这种方式为所有原始对象绑定点击事件，看似没有问题，但是在无形中增加了很多事件，造成极大的内存损耗，尤其是在低版本IE浏览器中，会影响用户体验。

我们可以用代理模式解决这一问题

 

委托给父元素

完整的事件流，是从事件捕获开始，到触发该事件，再到事件冒泡三个阶段，所以我们可以将子元素的事件委托给更高层面的父元素去绑定执行。

ul.onclick = function(e) {
	var e = e || window.event,
		tar = e.target || e.srcElement;
		
	if (tar.nodeName.toLowerCase() === 'li') {
		tar.style.backgroundColor = 'grey';
	}
}

以上，通过判断目标元素的名称是不是我们寻找的元素从而执行相应操作。

 

预言未来

这种方式的另一个好处是可以为未来新增的元素绑定点击事件，也就是当前页面所不存在的，未来某一时刻可能会新增的元素，要是想对未来的元素绑定事件，是比较困难的事情。但是代理模式（委托模式）可以将未来元素的事件委托给现有的父元素。

<div class="article">
    <p></p>
</div>

我们可以很容易的为P添加一个click事件，因为目前这个元素是存在的，是可以获取的。但是将来某一时刻，又添加了一个p元素，此时新增的p元素是没有绑定点击事件的，这并不是我们想要的。

换一个角度想，id为article的div元素是始终存在的，在未来通过事件冒泡判断出发点击的元素是不是将来添加的元素来执行某一业务逻辑是可以实现的

var article = document.getElementById('article');

article.onclick = function(e) {
	var e = e || window.event,
		tar = e.target || e.srcElement;
		
	if (tar.nodeName.toLowerCase() === 'p') {
		tar.innerHTML = '我要更改内容';
	}
}

var p = document.createElement('p');
p.innerHTML = '新增一段内容';
article.appendChild(p);

 

内存泄露

代理模式有时候还能处理一些内存泄漏的问题

在老版本IE浏览器中，由于他们的引用计数式垃圾回收机制，使得那些对DOM元素的引用没有显示性清除的数据会遗留在内存中，除非关闭浏览器，否则无法清除，比如

<div id="btn_container">
	<button id="btn">demo</button>
</div>

<script>
	var g = function(id) {
		return document.getElementById(id);
	}

	g('btn').onclick = function() {
		g('btn_container').innerHTML = '触发了事件';
	}
</script>

为id为btn的元素绑定点击事件，在触发时，在其父元素中重置内容，这样会将按钮自身覆盖掉，然后g变量保存的元素绑定的click事件没有被清除，所以这个事件就会泄露到内存中，为了解决这个问题，我们可以在父元素这只内容前显性地清除事件，比如

g('btn').onclick = function() {
	g('btn').onclick = null;
	g('btn_container').innerHTML = '触发了事件';
}

g('btn').onclick = null;这个清除事件语句在标准浏览器中是不需要的，因为他们采用标记清除方式管理着自身的内存。所以更好的解决办法便是代理模式了。

g('btn_container').onclick = function(e) {
	var target = e && e.target || window.event.srcElement;
	
	if (target.id === 'btn') {
		g('btn_container').innerHTML = '触发了事件';
	}
}

在ES6中，解决内存泄漏的另一种方式是WeakMap

 

WeakMap

WeakMap结构与Map结构类似，也是用于生成键值对的集合。

// WeakMap 可以使用 set 方法添加成员
const wm1 = new WeakMap();
const key = {foo: 1};
wm1.set(key, 2);
wm1.get(key) // 2

// WeakMap 也可以接受一个数组，
// 作为构造函数的参数
const k1 = [1, 2, 3];
const k2 = [4, 5, 6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
wm2.get(k2) // "bar"

WeakMap与Map的区别有两点。

首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。

const map = new WeakMap();
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null, 2)
// TypeError: Invalid value used as weak map key

上面代码中，如果将数值和Symbol值作为WeakMap的键名，都会报错。

其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。

WeakMap的设计目的在于，有时我们想在某个对象上面存放一些数据，但是这会形成对于这个对象的引用。请看下面的例子。

const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
  [e1, 'foo 元素'],
  [e2, 'bar 元素'],
];

上面代码中，e1和e2是两个对象，我们通过arr数组对这两个对象添加一些文字说明。这就形成了arr对e1和e2的引用。

一旦不再需要这两个对象，我们就必须手动删除这个引用，否则垃圾回收机制就不会释放e1和e2占用的内存。

// 不需要 e1 和 e2 的时候
// 必须手动删除引用
arr [0] = null;
arr [1] = null;

上面这样的写法显然很不方便。一旦忘了写，就会造成内存泄露。

WeakMap 就是为了解决这个问题而诞生的，它的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内。因此，只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

基本上，如果你要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap。一个典型应用场景是，在网页的 DOM 元素上添加数据，就可以使用WeakMap结构。当该 DOM 元素被清除，其所对应的WeakMap记录就会自动被移除。

const wm = new WeakMap();

const element = document.getElementById('example');

wm.set(element, 'some information');
wm.get(element) // "some information"

上面代码中，先新建一个 Weakmap 实例。然后，将一个 DOM 节点作为键名存入该实例，并将一些附加信息作为键值，一起存放在 WeakMap 里面。这时，WeakMap 里面对element的引用就是弱引用，不会被计入垃圾回收机制。

也就是说，上面的 DOM 节点对象的引用计数是1，而不是2。这时，一旦消除对该节点的引用，它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对，也会自动消失。

总之，Weakmap 的专用场合就是，它的键所对应的对象，可能会在将来消失。Weakmap 结构有助于防止内存泄漏。

注意，WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用。

const wm = new WeakMap();
let key = {};
let obj = {foo: 1};

wm.set(key, obj);
obj = null;
wm.get(key)
// Object {foo: 1}

上面代码中，键值obj是正常引用。所以，即使在 WeakMap 外部消除了obj的引用，WeakMap 内部的引用依然存在。

WeakMap 的用途

前文说过，WeakMap 应用的典型场合就是 DOM 节点作为键名。下面是一个例子。

let myWeakmap = new WeakMap();

myWeakmap.set(
  document.getElementById('logo'),
  {timesClicked: 0})
;

document.getElementById('logo').addEventListener('click', function() {
  let logoData = myWeakmap.get(document.getElementById('logo'));
  logoData.timesClicked++;
}, false);

上面代码中，document.getElementById('logo')是一个 DOM 节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在 WeakMap 里，对应的键名就是这个节点对象。一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。

WeakMap 的另一个用处是部署私有属性。

const _counter = new WeakMap();
const _action = new WeakMap();

class Countdown {
  constructor(counter, action) {
    _counter.set(this, counter);
    _action.set(this, action);
  }
  dec() {
    let counter = _counter.get(this);
    if (counter < 1) return;
    counter--;
    _counter.set(this, counter);
    if (counter === 0) {
      _action.get(this)();
    }
  }
}

const c = new Countdown(2, () => console.log('DONE'));

c.dec()
c.dec()
// DONE

上面代码中，Countdown类的两个内部属性_counter和_action，是实例的弱引用，所以如果删除实例，它们也就随之消失，不会造成内存泄漏。