[JS设计模式]：构造函数模式（2）

[js]js设计模式-构造函数模式

构造函数模式 function WriteJsPerson(name,age) { this.name=name; //不用手动创建obj this.age = age; this.writeJs=function () { console.log(this.name+"hello") }; //不用写return语句了 } p2 = new WriteJsPerson("yifei",23); //执行方法和普通函数有所区别, 类是func类型, 实例是对象数据类…

js设计模式--单体模式

GOF里的23种设计模式, 也是在软件开发中早就存在并反复使用的模式. 如果程序员没有明确意识到他使用过某些模式, 那么下次他也许会错过更合适的设计 (这段话来自<松本行弘的程序世界>). 单体模式: 单体(Singleton)模式的思想在于保证一个特定类仅有一个实例.当在第二次使用同一个类创建新对象的时候,和第一次创建对象完全相同对象. 当使用new语法通过构造函数来创建对象,仅仅获得的是指向完全相同的对象的新指针: 例: function uniFn(){}; var uni1 = new…

js设计模式--迭代器模式

迭代器模式: 迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示.js中我们经常会封装一个each函数用来实现迭代器. 理解的意思:提供一个方法,去把对象的每一项按照一定的方法,访问各个元素. 上代码: var agg = ((function(){ var index = 0, arr = [1,2,3,4,5,6], length = arr.length; return { next:function(){ //向下进行 var ele; if(!thi…

[转]js设计模式-策略模式

在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法.这些算法灵活多样,而且可以随意互相替换.这种解决方案就是本文将要介绍的策略模式.策略模式是指定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换奖金计算策略模式有着广泛的应用.以年终奖的计算为例进行介绍.很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的.例如,绩效为S的人年终奖有4倍工资,绩效为A的人年终奖有3倍工资,而绩效为B的人年…

如何做JS 单体模式的设计---->>js设计模式<<-------单体模式

1. 单体模式是js中最基本单最有用的模式之一,非常常用. 单体模式的基本结构如下: var Person = { name: 'lilu', age:', sayHi: function(){ alert('); }, sayBye: function(){ alert('); } } 这个栗子中,所有的成员都可以通过Person进行访问,用点运算符就行. 如: Person.name = "zczc"; Person.age = "; var hi = Person.s…

js设计模式--工厂模式

工厂模式: 工厂模式的目的是为了创建对象,它经常是在类和类的方法中实现.简单的工厂模式是由一个方法来决定到底要创建哪类的实例,这些实例经常拥有相同的接口,这种模式在所实例化的类型在编译期并不确定,而是在执行期决定的情况. 比如说,你有一家加工厂,生产各类牛奶:三氯氰胺奶粉,酸奶,变质奶,..等等.当有客户跟你签约生产某种奶粉的时候,你便让工厂生产对应的奶.但如果要求生产牛肉,那肯定没有这个功能... 具体上代码: var Car = (function () { var Car = functi…

JS设计模式——工厂模式详解

它的领域中同其它模式的不同之处在于它并没有明确要求我们使用一个构造器.取而代之,一个工厂能提供一个创建对象的公共接口,我们可以在其中指定我们希望被创建的工厂对象的类型. 简单工厂模式:使用一个类(通常为单体)来生成实例复杂工厂模式:使用子类来决定一个变量成员应该为哪个具体的类的实例. 简单工厂模式 var BicycleShop = function () { }; BicycleShop.prototype = { sellBicycle: function (model) { var bi…

[js]js设计模式-原型模式

构造函数模型- 对象的属性和方法每人一份 function createJs(name, age) { this.name = name; this.age = age; this.writeJs = function () { console.log(this.name, this.age) } } p1 = new createJs("maotai", 22); p1.writeJs(); p2 = new createJs("maotai2", 23); p2…

浅谈js设计模式 — 命令模式

命令模式最常见的应用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦合关系. 假设我们正在编写一个用户界面程序,该用户界面上至少有数十个 Button 按钮.因为项目比较复杂,所以我们决定让某个程序员负责绘制这些按钮,而另外一些程序员则负责编写点击按钮后的具体行为,这些行为都将被封装在对象里. var bindClick = function(button, fun…

js设计模式-命令模式

命令模式是一种组织型模式,主要用在把调用对象(用户界面.API和代理等)与实现操作的对象隔离开.也就是说 ,凡是两个对象间的互动方式需要更高的模块化程度时都可以用到这种模式. 命令模式的好处:1.提高程序的模块化程度和灵活性.(运用得当):2.实现取消和状态恢复等复杂的有用特性非常容易. 例子:菜单组合对象 /** * 菜单组合对象 */ /*command,Composite and MenuObject interfaces*/ var Command = new Interface("Co…

js设计模式-组合模式

组合模式是一种专为创建web上的动态用户界面而量身定制的模式.使用这种模式,可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更容易维护,而那些复杂行为则被委托给各个对象. 组合模式实例:图片库 /** * 图片库 */ var Composite = new Interface("Composite",["add","remove","getChild"]); var GalleryItem = n…

js设计模式-桥接模式

桥接模式定义:桥梁模式的用意是"将抽象化(Abstraction)与实现化(Implementation)脱耦,使得二者可以独立地变化".这句话有三个关键词,也就是抽象化.实现化和脱耦. 最简单的桥接模式例子:事件监听器 addEvent(element,"click",getResultByIdBridge); function getResultByIdBridge(e){ getById(this.id, function(result){ //TODO: t…

js设计模式-工厂模式（抽象工厂）

场景:定义一个抽象类 AbsProducer(生产商),该生产商有两个行为,一个生产,一个出售,其中生产方法为抽象方法,由具体的厂家(工厂)去实现,出售的产品均是电子产品(返回的对象为电子产品对象,即对象都要实现电子产品的接口).其中有联想和apple两个工厂,根据传入的参数生产旗下不同的电子产品.具体代码实现如下: 1 /*定义一个抽象类 AbsProducer(生产商),该生产商有两个行为,一个生产,一个出售,其中生产方法为抽象方法,由具体的厂家去实现*/ 2 var AbsProducer…

js设计模式-代理模式

1.什么是设计模式? 设计模式:在软件设计过程中常用的代码规范,针对特定的场景 2.应用场景: 麦当劳点餐观察者模式规定的代码格式花店送花 :代理模式真实对象(男同学)-----代理对象(花店人员)----用户(女同学) //声明女孩对象(用户) var girl = function(name){ this.name = name; console.log(this); } //声明男同学(真实对象) var boy = function(girl){ //女同学 th…

JS设计模式——策略模式

设计模式高大上,业务代码用不上...平时用不上我们就可以忽略了吗? 非也,就像面试造火箭,工作拧螺丝一样.万一我们公司哪天要造火箭了,你得立马能上手. 同时,有些复杂的业务代码也可以用设计模式的思想去写,如果你对设计模式不了解,到时怎么会想到呢?那你写出来的代码怕是很难去阅读和维护. 说了那么多,就是想说一点:设计模式很棒!你可以不用,但不能不会!下面来聊聊策略模式: 策略模式的定义何为策略?比如我们要去西藏旅游,可以根据自身的实际情况来选择出行的路线. 如果没有时间但是不在乎钱,可以选择坐飞…

js设计模式-建造者模式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>functionModule</title> </head> <body> <script type="text/javascript"> //建造者模式 //1.产出的东西是房子 //2.baogon…

js设计模式--策略模式

策略模式: 定义了一系列的算法,把他们封装起来,是它们之间可以互相替换,此模式不会影响到使用算法的客户. 回忆下jquery里的animate方法: $( div ).animate( {"left: 200px"}, 1000, 'linear' ); //匀速运动 $( div ).animate( {"left: 200px"}, 1000, 'cubic' ); //三次方的缓动这2句代码都是让div在1000ms内往右移动200个像素. linear(匀…

[js]js设计模式-工厂模式

// 定义一个人 var p1 = { name: 'wxb', age: 22, writejs: function () { console.log(this.name + ' can sing.....') } }; //定义另一个人 var p2 = { name: 'mmm', age: 18, writejs: function () { console.log(this.name + 'i can sing.....') } }; 工厂模式: 减少冗余代码.实现函数的封装 func…

js设计模式-门面模式

适用场景:门面模式在DOM脚本编程这种需要对各种不一致的浏览器接口的环境中很常用. 例子:阻止模式事件 var DED = widow.DED || {}; DED.util = { stopPropagation:function(e){ if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; //IE's interface } }, preventDefault:function(e){ if(e.…

js 设计模式——状态模式

状态模式允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类. 简单的解释一下: 第一部分的意思是将状态封装成独立的类,并将请求委托给当前的状态对象,当对象的内部状态改变时,会带来不同的行为变化. 第二部分是从客户的角度来看,我们使用的对象,在不同的状态下具有截然不同的行为,这个对象看起来是从不同的类中实例化而来的,实际上这是使用了委托的效果. 现在举一个网上比较多的例子,没错就是电灯的例子(不要烦,请耐心往下看) // 首先定义了一个Light类 class Light {…

js 设计模式——代理模式

代理模式代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问. 生活中有很多的代理模式的场景.例如,明星有经纪人作为代理,老板有秘书作为代理等等,当有事情的时候,会找到经纪人或秘书,再由他们转达给明星或者老板. 首先通过一个例子来简单的了解了解,故事是这样的... 以下故事纯属虚构,不要当真大家都知道三顾茅庐(不知道的百度一下)吧,诸葛亮何许人也,厉害的不要不要的,名声在外啊.好巧不巧刘备知道了,刘备心想:"这么厉害的人跟着我,岂不美哉,统一三国起步指日可待",于是,刘备…

js 设计模式——策略模式

策略模式(Strategy) 定义:将定义的一组算法封装起来,使其相互之间可以替换.封装的算法具有一定的独立性,不会随客户端的变化而变化废话不多说,先来个例子 // 例如要写一个计算两个数加减乘除的方法,会有人这么写 countNum(type, num1, num2) { if(type === 'add'){ return num1 + num2 } else if(type === 'subtract'){ return num1 - num2 } else if(type === 'm…

JS设计模式—节流模式的实际应用

在实际工作中,我们会经常遇到这样的业务场景,比如点击按钮提交表单,点击一次发一次请求,如果快速点击多次会发送多次请求,这样发送了多次请求是我们不愿意看到的.又比如输入框我们输入内容会调搜索的接口,那么每当我们输入一个字符都会发送一次请求......为了解决类似的困扰,那么节流模式就应运而生了. // 节流模式的核心思想是创建定时器,延迟程序的执行. var throttle = function f() { arguments.slice = Array.prototype.slice; var…

js设计模式-工厂模式（XHR工厂）

场景:如果代码中需要多次执行Ajax请求,那么明智的做法是把创建这种对象的代码提取到一个类中,并创建一个包装器来包装在实际请求时所要经历的一系列步骤.简单工厂非常适合这种场合. /*AjaxHandler interface*/ var AjaxHandler = new Interface("AjaxHandler",["request","createXhrObject"]); /*SimpleHandler class.*/ var Sim…

js设计模式——7.备忘录模式

js设计模式——7.备忘录模式 /*js设计模式——备忘录模式*/ // 备忘类 class Memento { constructor(content) { this.content = content; } getContent() { return this.content; } } // 备忘列表 class CarTaker { constructor() { this.list = []; } add(memento) { this.list.push(memento); } get…