js设计模式之 代理模式与应用场景

从代码可以看出，杨超越确实有签合同的能力，但是签合同这事应该不会是杨超越本人去的吧，而应当是她的经纪人去代签的。

3.经典使用场景

===========================================================================

3.1 事件委托

document.addEventListener(‘DOMContentLoaded’, function() {

let app = document.getElementById(‘todo-app’);

app.addEventListener(‘click’, function(e) {

if (e.target && e.target.nodeName === ‘LI’) {

let item = e.target;

alert('you clicked on item: ’ + item.innerHTML)

}

})

})

关于事件委托 详细可以看我的另一篇文章

事件委托

3.2.Jquery中的proxy—$.proxy

为什么这里要用到代理呢？

因为如果不用代理的话，这里的this的指向已经变成了window了哦。

所以我们需要这样写

当然，也可以用$.proxy()

$.proxy(fn,this)这个方法的作用就是让this.的指向指向fn。

3.3 ES6 Proxy

Proxy 代理，在 JavaScript 似乎很陌生，却又在生活中无处不在。或许有人在学习 ES6 的时候有所涉猎，但却并未真正了解它的使用场景，平时在写业务代码时也不会用到这个特性。

我们仍然用明星与经纪人的例子来讲解

.有这样一个明星。

我们想获得明星的信息，一般都是找他的经纪人

所以，对应的就有这样一个经纪人

这里简单讲解一下get和set。

**get 里是可以直接获得值的属性

set 里是需要你传入一个值，再根据你传进的值来判断 返回什么的 属性**

举个栗子

get：

当我们想要知道 明星的价格的时候 ，直接 agent.price。例如

console.log(agent.price);//120000

我们是不能直接获得明星的手机号码的，只能获得经纪人的手机号码

console.log(agent.phone);//18611112222

set：

好了，接下来我们要报价 了

当我们报价低于10w时，会发生报错，因为看代码，那里抛出了“价格太低的错误”

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。