标签：good console name 模式 几种 new 设计模式 前端开发 log

前端开发中常用的几种设计模式

单列模式

构造函数每次被创建对象，只有一个被创建

​ 单例模式是JavaScript最简单的设计模式之一。属于创建型模式，提供看一种创建对象的最佳方式

简单来说

就是没有就创建，有就使用，只有一个

1. 私有构造函数
2. 声明静态单列对象
3. 构造单列之前要加锁
4. 需要二次检查单例实例是否为空，分别在锁之前和锁之后

var single = (function(){
	var demo;
	return function(name){
		if(demo){
			return demo
		}
		this.name = name
		demo = this
	}
})

//es6实现方式
class Singleton{
    constructor(name){
        this.name=name
        this.instance = null
    }
//构造一个广为人知的接口，供用户对该类进行实例化
    static getInstance(name){
        if(!this.instance){
            this.instance = new Singleton(name)
        }
        return this.instance
    }
}

单例模式分为二种

懒汉模式 ，饿汉模式

懒汉模式
比较慢，在类加载的时候，不创建实例，因此类加载速度快，但是运行获取对象的速度慢

class Ddd{
    constructor(){
        this.init();
        this.Instance=null
    }
    init(){
        console.log("我是懒汉，我有点懒")
    }
    sayName(){
        console.log("我是懒汉")
    }
    static getInstance(){
        if(!this.Instance){
            this.Instance = new Ddd()
        }
        return this.Instance
    }
}

Ddd.getInstance().sayName()

//我是懒汉，我有点懒
//我是懒汉


class Ddd{
  
    static EvilMan = new Ddd()
	sayName(){
        console.log("我是恶汉")
    }
	sayAge(){
        console.log("我比他大一岁")
    }
 	constructor(){
        console.log("我是恶汉ES6写法")
    }
}

Ddd.EvilMan.sayName();

我是恶汉ES6写法
我是恶汉

简单工厂模式

运用场景：

你去购买汉堡，直接点餐，取餐，没必要自己亲手做（初始化实例封装）

商店要‘封装’做汉堡的工作，做好直接给买者

实现：

从上面的代码中我们可以知道，所谓简单工厂模式技术一个工厂类和一个工厂函数，通过传入参数的不同，返回不同的实例

适用场景：

举一个生活中实际的使用场合，假如我们上体育课需要去拿篮球，足球和排球，我们可以自己去一个一个找对应的球(类似于上面通过自己来创建对象)，也可以通过管理员，告诉管理员需要什么样的球，至于管理员是怎么找到这个相对应的球，就与我们不相关了。这个管理员就是工厂类。

特点：

1. 需要创建的类较少，因为需要根据传入的参数来判断返回的实例，如果类太多，那么就会导致逻辑复杂。
2. 2. 不需要关注实例的创建过程，只需要传入相对应的值即可。

缺点：

从简单工厂模式的特点中我们可以知道，简单工厂模式适合于创建的类较少，一旦需要的类较多，逻辑就会复杂。而且一旦需要添加新的类，就得重新修改工厂类，这样显得非常不方便。

//封装买东西的动作
class Product{
	constructor(name){
		this.name=name
	}
	init(){
		console.log("点餐")
	}
	fn1(){
		console.log("取餐")
	}
	fn2(){
		console.log("取餐人："+ this.name)
	}
}
//创建一个产品对象
class Creator{
	create(name){
		return new Product(name)
	}
}
let creator = new Creator();
let p = creator.create('p1');

观察者模式

​ 当对象见存在一对多关系，使用观察者模式观察者模式属于行为型模式

发布订阅

• 发布
• 订阅
• 取消订阅
• 当状态发生改变的时候，执行一段代码

模拟场景：有一个饭馆前台接受客户订单，当食物做好了，喊一声，客户确认是自己的食物，就来控制台取餐

class Platform{
	constructor(){
        this.orders = []
    }
    submit(order){
        this.orders.push(order)
    }
    notify(good){
        this.orders.forEach(item =>{
            item.callMe(good)
        })
    }
}

class customer{
    constructor(name,good){
        this.name = name
        this.good = good
    }
    callMe(good){
        if(good == this.good){
            console.log(this.name+'的'+this.good+"做好了！！！")
        }
    }
}

var meituan = new Platform()
meituan.submit(new customer("张三","奶茶"))
meituan.submit(new customer("李四","麻辣烫"))
meituan.notify("麻辣烫")

（未完待续…）

标签：good,console,name,模式,几种,new,设计模式,前端开发,log
来源： https://blog.csdn.net/yi_shi__/article/details/122798256

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。