JavaScript设计模式
Posden
唯天下之至拙能胜天下之至巧。曾国藩表示,我没说过这句话
展开
-
《JavaScript设计模式》笔记 之 享元模式
好久没碰这本书了 享元模式 享元模式:运用共享的技术有效地支持大量的细颗粒度的对象,避免对象间拥有多余的开销。 翻页需求 有个按钮点击显示下一页内容。一页有五条数据。 version 1.0 var dom = null, pager = 0, num = 5, len = articles.length; for (var i = 0; i < len; i++) {...原创 2019-11-19 00:02:23 · 107 阅读 · 0 评论 -
《JavaScript设计模式》笔记 之 策略模式
策略模式:将定义的一组算法封装起来,使其相互之间可以替换。封装的算法具有一定独立性,不会随客户变化而变法。 项目需求 一部分商品5折出售,一部分商品8折出售,一部分商品9折出售;普通用户满100返30,高级用户满100返50.。。。 version 1.0 // 100 返 30 function return30(price){} // 100 返 50 function return50(...原创 2019-10-03 21:42:12 · 149 阅读 · 0 评论 -
《JavaScript设计模式》笔记 之 状态模式
状态模式:当一个对象的内容状态发生改变时,会导致其行业的改变 项目需求 开展一个最美图片投票征集活动,根据网民的投票,每张图片又有一些不同结果。 version 1.0 function showResult(result) { if(result == 0){ // 0处理结果 }else if(result == 1){ // 1处理结果 ...原创 2019-10-01 20:58:25 · 106 阅读 · 0 评论 -
《JavaScript设计模式》笔记 之 观察者模式
观察者模式(Observer):又称发布–订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合。 创建一个观察者 把观察者或者消息系统看作一个对象,它是一个消息容器,有三个方法:订阅消息的方法,取消订阅的消息模式和发送订阅的消息方法 // 将观察者放在一个闭包里,当页面加载就立马执行 var Observer = (function(){ // 防止消息队列暴露...原创 2019-09-30 22:28:34 · 100 阅读 · 0 评论 -
《JavaScript设计模式》笔记 之 外观模式
外观模式:为一组复杂1子系统接口提供一个更高级的同一接口,通过这个接口使得对子系统接口的访问更容易。 添加一个点击事件 为页面文案document对象绑定了一个click文件事件来实现隐藏提示框的交互功能 document.onclick = function(e){ e.preventDefault(); if(e.target !== document.getElementBy...原创 2019-08-09 23:52:32 · 80 阅读 · 0 评论 -
《JavaScript设计模式》笔记 之 单例模式
单例模式 单例模式,又称为单体模式,是只被实例化一次的对象类。 滑动效果: //version 1 function g(id){ return document.getElementById(id) } function css(id,key,value){ g(id).style[key] = value } function attr(id,key,value){ g...原创 2019-07-08 23:08:46 · 110 阅读 · 0 评论 -
《JavaScript设计模式》笔记 之 抽象工厂模式
抽象工厂模式 抽象工厂模式:通过对类的工厂抽象使其业务用域对产品类簇的创建,而不是负责创建某一类产品的实例。 抽象类 JavaScript 中 abstract 还是保留字,虽然不像传统面向对象创建,之前Dart就有此类方法,(语言相通性)。 var Car = function(){}; Car.prototype = { getPrice:function(){ ret...原创 2019-06-17 23:28:17 · 150 阅读 · 0 评论 -
《JavaScript设计模式》笔记 之 建造者模式
建造者模式 建造者模式:将一个复杂对象的构建层与表现层相互分离。更关心构建对象的细节。 分 ----合 项目需求 应聘者的信息 //创建一人类 var Human = function(param){ this.skill = param && param.skill || '保密'; this.hobby = param && param.hob...原创 2019-06-20 23:03:49 · 167 阅读 · 0 评论 -
《JavaScript设计模式》笔记 之 工厂方法模式
工厂模式 工厂方法模式,通过对产品类的抽象,使其创建业务主要负责用于创建多类的实例。 项目案例 需求: 来了一批广告资源投放,关于计算机培训,一批是Java的,字体是绿色的;还有一批是php,字体是黄色的,背景色是红色;JavaScript的,背景色是粉丝的 。。。 按照上篇的简单工厂模式,https://blog.csdn.net/weixin_44420276/article/details/...原创 2019-06-16 18:55:22 · 85 阅读 · 0 评论 -
《JavaScript设计模式》笔记 之 简单工厂模式
简单工厂模式 简单工厂模式,又称静态工厂方法,由一个工厂对象决定创建某一中产品对象类的实例。 项目案例: 需求: 1.用户名,如果用户输入内容不符合规范就自定义一个警示框,提示信息:用户名不能超过16个字母或者数字; 2.用户密码,如果用户输入的密码错误就自定义一个警示框,提示信息:用户密码错误; 3.用户名:用户名不存在就自定义一个警示框,提示信息:您的用户名不存在,清重新输入; 4.在警示框...原创 2019-06-14 00:25:48 · 137 阅读 · 0 评论