一、单例模式：
所谓单例模式，即保证一个类只有一个实例,并提供一个访问它的全局访问点。
<script type="text/javascript">
//一个类有某个实例，就用这个实例，没有的话，就新生成一个实例
var singleTon = (function(){
var _instance = null;
function Foo(){
this.a = "**";
this.b = "**";
}
Foo.prototype.fn = function(){
}
return {
getInstance:function(){
if(!_instance){
_instance = new Foo();
}
return _instance;
}
}
})();
console.log(singleTon.getInstance()==singleTon.getInstance());
</script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<input type="button" id="btn" value="弹出层" />
<script type="text/javascript">
(function(){
var oBtn = document.getElementById("btn");
var _instance = null;
//创建弹窗类
function PopBox(){
this.node = document.createElement("div");
document.body.appendChild(this.node);
}
oBtn.onclick = function(){
if(!_instance){
_instance = new PopBox;
}
}
})();
</script>
</body>
</html>二、观察者模式：
所谓观察者模式，即（发布-订阅模式）：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。
<script type="text/javascript">
var observer = {
regist:function(eventName,callback){
if(!this.obj){
this.obj = {};
}
if(!this.obj[eventName]){
this.obj[eventName] = [callback];
}else{
this.obj[eventName].push(callback);
}
},
emit:function(eventName){
if(this.obj[eventName]){
for(var i = 0; i < this.obj[eventName].length; i++){
this.obj[eventName][i]();
}
}
},
remove:function(eventName,callback){
if(this.obj[eventName]){
for(var i = 0; i < this.obj[eventName].length;i++){
if(this.obj[eventName][i]==callback){
this.obj[eventName].splice(i,1);
}
}
}
}
};
//购物车模块注册的事件
observer.regist("loginSucess",function(){
console.log("购物车模块发生改变");
});
//个人信息模块注册的事件
observer.regist("loginSucess",function(){
console.log("个人信息模块发生改变");
});
observer.emit("loginSucess");//
</script><script type="text/javascript">
var Event = {
// 通过on接口监听事件eventName
// 如果事件eventName被触发，则执行callback回调函数
on: function(eventName, callback) {
//你的代码 注册事件
if(!this.obj){
Object.defineProperty(this,"obj",{
value:{},
enumerabel:false
})
}
if(!this.obj[eventName]){
this.obj[eventName] = [callback];
}else{
this.obj[eventName].push(callback);
}
},
// 触发事件 eventName
emit: function(eventName) {
//你的代码 发布事件
if(this.obj[eventName]){
for(var i = 0; i < this.obj[eventName].length; i++){
this.obj[eventName][i](arguments[1]);
}
}
}
};
// 测试1
Event.on('test', function(result) {
console.log(result);
});
Event.on('test', function() {
console.log('test');
});
Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test'
// 测试2
var person1 = {};
var person2 = {};
Object.assign(person1, Event);
Object.assign(person2, Event);
person1.on('call1', function() {
console.log('person1');
});
person2.on('call2', function() {
console.log('person2');
});
person1.emit('call1'); // 输出 'person1'
person1.emit('call2'); // 没有输出
person2.emit('call1'); // 没有输出
person2.emit('call2'); // 输出 'person2'
</script>三、组合模式：
组合模式又称部分-整体模式，将对象组合成树形结构以表示“部分整体”的层次结构。
<script type="text/javascript">
//订单系统 票务系统 酒店系统
function Ticket(){
}
Ticket.prototype.create = function(){
console.log("创建了机票订单");
}
function Hotel(){
}
Hotel.prototype.create = function(){
console.log("创建了酒店订单");
}
function Order(){
this.orders = [];
}
Order.prototype.addOrder = function(order){
this.orders.push(order);
return this;
}
Order.prototype.create = function(){
for(var i = 0; i < this.orders.length; i++){
this.orders[i].create();
}
}
var order = new Order();
order.addOrder(new Ticket()).addOrder(new Ticket())
.addOrder(new Hotel());
order.create();
</script>
js设计模式之单例模式,javascript如何将一个对象设计成单例
单例模式是我们开发中一个非常典型的设计模式，js单例模式要保证全局只生成唯一实例，提供一个单一的访问入口，单例的对象不同于静态类，我们可以延迟单例对象的初始化，通常这种情况发生在我们需要等待加载创建单例的依赖。
前端设计模式：从js原始模式开始，去理解Js工厂模式和构造函数模式
工厂模式下的对象我们不能识别它的类型，由于typeof返回的都是object类型，不知道它是那个对象的实例。另外每次造人时都要创建一个独立的person的对象，会造成代码臃肿的情况。
JavaScript设计模式_js实现建造者模式
建造者模式：是将一个复杂的对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。工厂类模式提供的是创建单个类的模式，而建造者模式则是将各种产品集中起来进行管理，用来创建复合对象
html和xhtml，DOCTYPE和DTD，标准模式和兼容模式
主要涉及知识点： HTML与XHTML,HTML与XHTML的区别,DOCTYPE与DTD的概念,DTD的分类以及DOCTYPE的声明方式,标准模式（Standard Mode）和兼容模式（Quircks Mode）,标准模式（Standard Mode）和兼容模式（Quircks Mode）的区别
前端四种设计模式_JS常见的4种模式
JavaScript中常见的四种设计模式：工厂模式、单例模式、沙箱模式、发布者订阅模式
javascript 策略模式_理解js中的策略模式
javascript 策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。 策略模式利用组合，委托等技术和思想，有效的避免很多if条件语句，策略模式提供了开放-封闭原则，使代码更容易理解和扩展， 策略模式中的代码可以复用。
javascript观察者模式_深入理解js中的观察者模式
javascript观察者模式又叫发布订阅模式，观察者模式的好处：js观察者模式支持简单的广播通信，自动通知所有已经订阅过的对象。存在一种动态关联，增加了灵活性。目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
Vue中如何使用方法、计算属性或观察者
熟悉 Vue 的都知道 方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用，有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的
我最喜欢的 JavaScript 设计模式
我觉得聊一下我爱用的 JavaScript 设计模式应该很有意思。我是一步一步才定下来的，经过一段时间从各种来源吸收和适应直到达到一个能提供我所需的灵活性的模式。让我给你看看概览，然后再来看它是怎么形成的
Flutter 设计模式 - 简单工厂
在围绕设计模式的话题中，工厂这个词频繁出现，从 简单工厂 模式到 工厂方法 模式，再到 抽象工厂 模式。工厂名称含义是制造产品的工业场所，应用在面向对象中，顺理成章地成为了比较典型的创建型模式
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!