[广告] Javascript技能等级快速上升的正确姿势-设计模式

#1

今天给大家分享一下“javascript设计模式”。
自我介绍一下,我叫张容铭。在百度工作,比较喜欢钢琴、绘画,平时和朋友拿单反到处玩吧。在分享前 想问大家一个东西。
你们理解的设计模式是什么?概念是什么?

这只是说一个概念性的东西,但是你们怎么理解设计模式的?他给我们工作中带来哪些问题?带来哪些帮助?我翻阅了一下百度百科,发现上面给了我一个定义:设计模式是一套被反复使用、多数人知晓经过分类编目的代码设计经验的总结。
我对设计模式的理解,说白了就是:设计模式即是经验总结。设计模式就是工作经验,无论是技巧性的还是思想性的,还是说架构性的东西,其实都是前人把一些工作经验总结下来留给我们的。所以说,设计模式就是工作经验。
然后我们想一想我们为什么学习设计模式呢,我希望大家听到的时候 能把这个问题思考一下。我们学每一个东西都有一个初衷的,比如说我们不能平白无故的学一个东西。我们学习一个东西 我们为什么学习它,它能给我们带来哪些收益?那, 我这个问题先不给大家回答,我们最后再给大家说。
Q:那么大家都用过哪些前端代码库?
A:angular、 jquery还有react

Q: 接触过哪些模式
A: 订阅的模式 单例 工厂 …

我给大家介绍几种模式,可能比较多,我不能一一给大家介绍.介绍几种比较常见的。
第一种 就是委托模式
大家在工作中用过这种模式,委托也可以叫代理。它们比较像但是也不太一样。先看一个例子吧。

比如说,页面中有100个元素或10个元素,我们要给10个元素绑定事件。传统的方式是一个一个绑定,就是我们最原始的时候。可能大部分同学都是这么来实现的:比如说 有10个

  • ,我们把它找到,遍历10个
  • 给它绑定一个点击事件。那么这种方式有什么问题呢?如果现在只是10个,如果要是100个呢?那么我们就要绑定100个事件!但是说我们内存性能是有一定限度的,不能无限的给它增加。所以说,如果要是元素太多的话,我们这种行为会给我们页面占用大量的内存、大量的事件,也会把我们性能拖垮。
    我们有没有办法只绑定一个事件,
    来解决这一类问题呢?

    委托模式给我们一个解决思想。通过我们这些事件,把这些子元素事件委托到我们父元素上,通过这个父元素,通过事件的模块,然后找到事件的出发点来进行某一项工作。这是委托的一种应用,性能优化的一种方式。
    还有一个,看下面一个例子。

    下面一个

    里有两个

    元素,然后给它绑定两个事件,给它遍历之后绑定两个事件。然后我们也可以通过事件委托,给它绑定一个事件,绑定它的父元素上。
    现在有个问题产生了:现在给它父容器里添加一个

    元素。那么我们现在这个方案能实现绑定吗?不能!对吧。因为我们还没有给它绑定事件呢!所以我们下边给它添加一行,绑定一个事件 。
    然后,我们看第二种方式。它可以吗?是可以的!因为事件是绑定在谁身上?是绑定在父容器上的。所以,我们通过父容器就可以任意的对未来的元素进行事件接听 。这是我们事件的一种解决方案——预言未来。某些事件的发生,预言未来的事件。
    朋友们,再看下面一个问题。

    这个例子可能说在一些ie里很常见的一个内存外泄的例子。一父容器里有个,然后父容器里重新赋值一段文案,当它点击的时候给它父容器里重新填充文案。然后 这个时候我们看发生什么事情了?元素没了!但是这种方式是不是 给绑定一个事件,那么在ie里就会造成内存外泄,就说我们这个事件。绑定元素上,把这个元素删除了没有手动的写进这个事件,可能内存中遗留下来这一段。那么,我们解决方案是什么?事件给它写进去:取消绑定,给它取消了。这样就不会内存外泄 ,解决这个问题了。
    但是,这样实现起来很烦,为什么呢?因为如果我们元素很多的话,逐一解绑的话或者说一个元素绑定很多事件。然后我们找不到它们某一个地方具体绑定在哪个地方,所以说是很麻烦的。那么 好的解决方案呢?就是把我们事件委托在我们父元素上,然后通过父元素来执行我们主元素的事件。此时,我们发现去掉之后是不是就没有这个事件。
    这是解决内存外泄,不仅仅事件我们可以用到委托,还有在一些数据请求上。

    比如说:我们另外有10个模块,10个模块加载之后需要异步请求数据来渲染模块。以往的方式,我们发送请求然后把这个请求拿过来数据挨个建模块。但是 这有问题呀!我们请求的通道它是有限的,有的浏览器是5个 有的浏览器是7个。如果太多的话那么后面堵塞。
    还有一个问题,我们每一个请求发出去的时候它可能会有等待时间、保障时间有很多的时间,我们把这些加起来 时间是很多的等它出来 是很慢的。把这些请求委托到一个父请求里然后通过父请求请求数据然后把数据拆包,然后委托到每一个模块里它们模块内的逻辑。这样的话 我们10个请求只剩下一个。然后 请求等待时间都是1个了,就不是以前的10个了。这是数据分发。
    这是我对委托模式分享的几个案例,下一期会介绍另一种常用的模式:观察者模式。
    最后附上我其他视频的案例
    http://www.icketang.com/2017/ickt_state_0713/190.html?m836

  • #2

    这广告。。。排版搞一下,看的也方便些啊

    1 Like
    #3

    张大师还在百度工作吗?不是去培训机构当老师了吗?