js几种常见的设计模式

一、工厂模式

 //方式一 ：  一次只能创建一个对象 //缺点 ：  创建多个同类对象时，代码会重复
var obj = {"sname":"jack","study" :function(){console.log("学习ing");}};var obj2 = new Object();obj2.sname = "lily";obj2.study = function(){console.log( "学习ing" );}

工厂模式

function student(name, age) {var obj = new Object()obj.name = nameobj.age = agereturn obj}var stu1 = student('xiao li', 18)var stu2 = student('xiao yuan', 18)console.log( stu1 instanceof Object )

二、单例模式

function Animal(name){this.name = name;
}
var a1 = new Animal("小白");
var a2 = new Animal("大白");
console.log( a1 == a2 );
//要求 ：  a1 == a2  返回true   单例模式

function Student() {if (!Student.instance) {Student.instance = {age: 3,name: 'xiao',}}return Student.instance}var s1 = new Student()s1.age += 4var s2 = new Student()console.log(s1 = s2) // trueconsole.log(s2.age) // 7

三、代理模式

function Mx(){this.sing = function(){console.log( "可以开演唱会..." );}
}function Jjr(){this.sing = function(money){if( money >= 200000000 ){//通知主人 可以开演唱会啦new Mx().sing();}}
}var jj = new Jjr();
jj.sing( 200000001 );

四、适配器模式

 function Ipad(){this.music = function(){console.log( "ipad可以播放音乐" );}}//定义一个适配器  判读产品功能function Adapter(pro){this.pro = pro;//某个商品this.music = function(){if( this.pro.music ){console.log("可以播放音乐")}else{console.log("不可以播放音乐")}}this.phone = function(){if( this.pro.phone ){console.log("可以打电话")}else{console.log("不可以打电话")}}}var ipad = new Ipad();var adapter = new Adapter(ipad);adapter.music();adapter.phone();

五、策略模式

function Child(dad,mum){this.dad = dad;this.mum = mum;this.cry = function(){//小孩哭了  通知 爸爸 开始冲奶了this.dad.weinai();}//观察者模式（异步现象）setTimeout( function(){this.cry();}.bind(this),Math.random()*5000+200 )}function Dad(){this.weinai = function(){console.log( "开始给孩子喂奶了" );}}var dad = new Dad();var ch = new Child(dad , null);

六、发布订阅模式和观察者模式

class EventEmitter {constructor() {this.subs = Object.create(null)}// { 'click': [fn1, fn2], 'change': [fn] }$on(eventType, handler) {this.subs[eventType] = this.subs[eventType] || []this.subs[eventType].push(handler)}$emit(eventType) {if (this.subs[eventType].forEach(handler => {handler()}))}
}// 测试let em = new EventEmitter()em.$on('click', () => {console.log('click1')})em.$on('click', () => {console.log('click2')})em.$on('fn', ()=> {console.log('fn')})em.$emit('click')em.$emit('fn')

七、观察者模式

class Dep {constructor() {this.subs = []}addSub(sub) {if (this.sub && this.sub.update) {this.subs.push(sub)}}notify() {this.subs.forEach(sub => {sub.update()})}
}
class Watch {update() {console.log('update')}
}let dep = new Dep()
let watcher1 = new Watcher()
let watcher2 = new Watcher()
dep.addSub(watcher1)
dep.addSub(watcher2)
dep.notify()

js几种常见的设计模式相关推荐

js几种常见的递归方法
js几种常见的递归方法递归的概念:就是函数调用函数本身,或者在自己函数调用的下级调用函数自己: 案例1:求和,1-100 function sun(n){if(n==1) return 1} 案例2 ...
JS几种常见的用户名检测
本博客主要讲述关于JS的几种常见的用户名检测.包括一.不能以数字开头–isNaN() // isNaN 是一个系统的函数,用于判断一个变量是否为 NaN //strings指的是要判断对象 //st ...
Java中有哪几种常见的设计模式
Java中一般认为有23种设计模式,分别是: 1.创建型模式,五种:工厂方法模式,抽象工厂模式,单例模式,建造者模式,原型模式: 2.结构型模式,七种:适配器模式,装饰器模式,代理模式,外观模式,桥接 ...
Java几种常见的设计模式
--------------------- 本文来自旭日Follow_24 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/xuri24/article/detail ...
JavaEE5种常见的设计模式
1.工厂模式:比如你写了个应用,里面用到了数据库的封装,你的应用可以今后需要在不同的数据库环境下运行,可能是oracle,db2,sql server等, 那么连接数据库的代码是不一样的,你用传统的方 ...
前端：JS几种常见的排序
1.冒泡排序依次比较相邻的两个元素,如果后一个小于前一个,则交换,这样从头到尾一次,就将最大的放到了末尾. 动画演示: 代码: function bubbleSort(arr) {var len = ...
js几种常见排序的实现
1. 冒泡排序定义: 比较相邻的前后二个数据,如果前面数据大于后面的数据,就将二个数据交换. 这样对数组的第0个数据到N-1个数据进行一次遍历后,最大的一个数据就"沉"到数组 ...
7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式本文的 ...
Ajax 和 XML: 五种常见 Ajax 模式
Asynchronous JavaScript + XML(Ajax)无疑是 2006 年最热门的技术术语,且有望在 2007 得到进一步发展.但是对您的应用程序来说它究竟有什么意义呢?Ajax 应用 ...
php mysql设计中常问_PHP开发中常见的设计模式
一.工厂模式工厂模式是我们最常用的实例化对象模式,是用工厂方法代替new操作的一种模式. 使用工厂模式的好处是,如果你想要更改所实例化的类名等,则只需更改该工厂方法内容即可,不需逐一寻找代码中具体实 ...

js几种常见的设计模式

一、工厂模式

二、单例模式

三、代理模式

四、适配器模式

五、策略模式

六、发布订阅模式和观察者模式

七、观察者模式

js几种常见的设计模式相关推荐

最新文章

热门文章