设计模式
关注
分享
扫一扫
凉音、
小笨鸟
展开
-
JS编写防抖和节流函数
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。一个例子通常，我们想要监听窗口的滚动事件，去做一些处理，我们可以直接为元素绑定onscroll事件，下面我们编写一个例子，来观察滚动事件触发的频率<!DOCTYPE html><html lang="en"> <head> <meta charset="utf.原创 2020-10-29 14:11:10 · 749 阅读 · 0 评论 -
数据访问对象模式-前端封装本地数据存储类
数据访问对象模式（Data access object-DAO）:抽象和封装对数据源的访问和存储，DAO通过对数据源链接的管理方便对数据的访问和存储。假设我们有一个功能需要本地存取数据实现而非调用后台接口，这个功能并不难，但存在以下问题数据很可能会覆盖他人的数据或被其他人员覆盖 添加一条数据需要做各个浏览器的兼容 无法知道数据存取的状态成功、失败、过期等 更多一系列的问题那么，有什么办法可以让每个人方便的管理自己的本地存储库呢？...原创 2020-05-22 14:51:26 · 386 阅读 · 0 评论 -
浅析javascript代理模式-事件绑定与内存泄漏
代理模式（Entrust）：多个对象接收并处理同一请求，他们将请求委托给另一个对象统一处理请求。在开发中我们可以利用委托模式做事件绑定以及防止内存泄露举个栗子，有一个日期列表，当用户点击日期格子的时候将格子的背景色变成灰色首先我们先看下面这一种方式var ul = document.getElementById('container'), li = document.getElementsByName('li'), i = li.length - 1; for(; i >.原创 2020-05-21 21:24:41 · 430 阅读 · 0 评论 -
浅析javascript观察者模式（发布-订阅模式）与应用
观察者模式（Observer）:又称作发布-订阅模式或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间功能的耦合。发布订阅模式可以解决主体对象与观察者之间功能的耦合。举个栗子，一架飞机要从沈阳飞到香港，当经过北京中转站时，需要向卫星发送位置信息，卫星接收到飞机的位置信息后将消息保存在消息容器中，向订阅了飞机信息的北京站和香港站发送信息，两个站点接收到飞机的消息并做相应的处理以避免飞机事故的发生当飞机已经离开北京中转站，北京中转站就不需要再接收飞机的位置信息，因此北京中转站可以取消订阅原创 2020-05-21 17:56:18 · 474 阅读 · 0 评论 -
链模式-jquery链式调用的原理与实现
链模式（Operate of Responsibility）:通过在对象方法中将当前对象返回，实现对同一个对象多个方法的链式调用。从而简化对该对象的多个方法的多次调用时，对该对象的多次引用...说白了就是可以a().css().attr().on()这样调用方法，而不需要a().css();a().attr();a().on()这样繁琐而且要多次创建对象jQuery的设计就是通过这种模式使得代码更简洁。这种链模式是基于原型继承的，并且在每一个原型方法的实现上都返回当前对象this，使当前对象一直处于原型原创 2020-05-21 14:50:33 · 2605 阅读 · 1 评论 -
巧妙的使用模板字符串生成dom元素
通常，我们拼接dom元素字符串是这样的...function createDOM(option) { var dom = '<div class="preview-modal"><div class="preview-header">' + option.title + '<a href="javascript:void(0)" class="preview-btn-close" title="' + option.title + '"/>' + '原创 2020-05-16 16:39:08 · 3956 阅读 · 0 评论 -
javascript设计模式-面向对象编程（封装、继承、多态）
编程的两种风格--面向过程与面向对象面向过程：分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了面向对象：把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为以五子棋为例：面向过程的设计思路就是首先分析问题的步骤：1、开始游戏，2、黑子先走，3、绘制画面，4、判断输赢，5、轮到白子，6、绘制画面，7、判断输赢，8、返回步骤2，9、输出最后结果。把上面每个步骤用不同的方法来实现。面向原创 2020-05-09 14:21:54 · 336 阅读 · 0 评论 -
装饰者模式-一个简单的装饰函数
装饰者模式（Decorator）:在不改变原对象的基础上，通过对其进行包装拓展（添加属性或者方法）使原有对象可以满足用户更复杂的需求。一个简单的栗子：需求：为输入框绑定新事件而不影响原有事件var decorator = function(input, fn) { // 获取事件源 var input = document.getElementById(input);...原创 2020-04-29 00:13:44 · 264 阅读 · 0 评论 -
利用外观模式实现浏览器通用事件绑定及阻止浏览器默认行为
外观模式（Facade）：为一组复杂的系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。一个通用事件绑定的栗子// 外观模式实现function addEvent(dom, type, fn) { // 对于支持DOM2级事件处理程序addEventListener方法的浏览器 if (dom.addEventListener) { ...原创 2020-04-28 23:55:36 · 203 阅读 · 0 评论 -
将this返回-一个链式操作的小技巧
一个检测类的栗子var CheckObject = function() {};CheckObject.prototype = { checkName: function() { // 验证姓名 return this; }, checkEmail: function() { // 验证邮箱 retur...原创 2020-04-28 23:24:29 · 162 阅读 · 0 评论