脑壳疼的js设计模式

构造函数模式

/*** 构造一个动物的函数 */
function Animal(name, color){this.name = name;this.age= age;this.getName = function(){return this.name;}
}
// 实例一个对象
var dog= new Animal('狗', '8');
console.log( dog.getName() );

工厂模式

/*** 工厂模式*/
function Animal(opts){var obj = new Object();obj.name = opts.name;obj.age= opts.age;obj.getInfo = function(){return '名称：'+obj.name +'， 年龄：'+ obj.age;}return obj;
}
var dog= Animal({name: '哈士奇', age: '6'});
dog.getInfo();

模块模式

/*** 模块模式 = 封装大部分代码，只暴露必需接口*/
var Car = (function(){var name = 'jeep自由光';function sayName(){console.log( name );}function getColor(name){console.log( name );}return {name: sayName,color: getColor}
})();
Car.name();
Car.color('红色')

混合模式

/*** 混合模式 = 原型模式 + 构造函数模式*/
function Animal(name, color){this.name = name;this.color = color;console.log( this.name  +  this.color)
}
Animal.prototype.getInfo = function(){console.log('名称：'+ this.name);
}function largeCat(name, color){Animal.call(null, name, color);this.color = color;
}largeCat.prototype = create(Animal.prototype);
function create (parentObj){function F(){}F.prototype = parentObj;return new F();
};largeCat.prototype.getColor = function(){return this.color;
}
var cat = new largeCat("Persian", "白色");
console.log( cat )

单例模式

/*** 在执行当前 Single 只获得唯一一个对象*/
var Single = (function(){var instance;function init() {//define private methods and properties//do somethingreturn {//define public methods and properties};}return {// 获取实例getInstance:function(){if(!instance){instance = init();}return instance;}}
})();var obj1 = Single.getInstance();
var obj2 = Single.getInstance();console.log(obj1 === obj2);

//2

var single = (function(){var unique;function getInstance(){// 如果该实例存在，则直接返回，否则就对其实例化if( unique === undefined ){unique = new Construct();}return unique;}function Construct(){// ... 生成单例的构造函数的代码}return {getInstance : getInstance}
})();

发布订阅模式

/*** 发布订阅模式*/
var EventCenter = (function(){var events = {};/*{my_event: [{handler: function(data){xxx}}, {handler: function(data){yyy}}]}*/// 绑定事件 添加回调function on(evt, handler){events[evt] = events[evt] || [];events[evt].push({handler:handler})}function fire(evt, arg){if(!events[evt]){return }for(var i=0; i < events[evt].length; i++){events[evt][i].handler(arg);}}function off(evt){delete events[evt];}return {on:on,fire:fire,off:off}
}());var number = 1;
EventCenter.on('click', function(data){console.log('click 事件' + data + number++ +'次');
});
EventCenter.off('click');   //  只绑定一次
EventCenter.on('click', function(data){console.log('click 事件' + data + number++ +'次');
});EventCenter.fire('click', '绑定');

脑壳疼的js设计模式相关推荐

[js]设计模式小结对原型的修改
js设计模式小结工厂模式/构造函数--减少重复- 创建对象有new- 自动创建obj,this赋值- 无return原型链模式 - 进一步去重类是函数数据类型,每个函数都有prototypecons ...
js observer 添加_简单了解4种JS设计模式
阅读本文约需要5分钟大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).上次老师跟大家分享了15款有用前端开发的ST插件的知识,今天跟大家分享下4种 ...
JS设计模式之Module（模块）模式、Revealing Module（揭示模块）模式
Module(模块)模式概念 Module模式最初被定义为一种在传统软件工程中为类提供私有和共有封装的方法. 通过这种方式,能够使一个单独的对象拥有共有/私有方法和变量,从而屏蔽来自全局作用局的特殊 ...
js设计模式——3.观察者模式
js设计模式--观察者模式 /*js设计模式--.观察者模式*/// 主题,保存状态,状态变化之后触发所有观察者对象 class Subject {constructor() {this.state ...
js 设计模式学习（1）
最近一个人外出旅行顺便在那座城市买了一本关于JS设计模式的书供无聊的时候阅读却发现小有收获旅游回来以后立马写下心得做了一个地图并以此总结此次旅行的经过的地方尝试1: 尝试写JS类 1 v ...
剑灵灵动区服务器位置,《剑灵》这波电二合区，属实让我脑壳疼
公长少苍:第一次玩剑灵我还是阴阳道仙的,第一次回坑的时候就变成花样年华了发布于 2020-08-16 23:03:32 涵畅1:这都无所谓主要是自打合完区就没有不卡过发布于 2020-08-16 ...
20220512之脑壳疼
个人博客地址:http://www.ltang.me/2022/05/12/20220512/ 最近的工作,包括但不限于: 评需求.评工作量.定排期, 跟人家说:不要再变啦再变自杀沟通.看文档.写接 ...
java多态优化多个if_脑壳疼！代码中那么多“烦人”的if else
if else 是我们写代码时,使用频率最高的关键词之一,然而有时过多的 if else 会让我们感到脑壳疼. 图片来自 Pexels 例如下面这个伪代码: 是不是很崩溃?虽然他是伪代码,并且看起来也 ...
Android Q 存储新特性适配脑壳疼？指南来了！
码个蛋(codeegg)第 692 次推文原文: https://mp.weixin.qq.com/s/aiDMyAfAZvaYIHuIMLAlcg 简单回顾下:Android Q 适配之存储新 ...

脑壳疼的js设计模式

脑壳疼的js设计模式相关推荐

最新文章

热门文章