JavaScript中的设计模式有哪些?
最编程
2024-08-06 14:37:52
...
设计模式:代码书写经验,为了应对各种场景,经过前人不断的总结,压缩,形成的一套又一套的代码的书写规范,形成了设计模式。
1.单例模式
单例模式是一种常用的设计模式,如果需要多次创建同一个对象,完成同一件事情,就会多次new出来很多个对象,而单例模式确保只有一个实例,并提供全局访问。
var f = (function(){
var instance;
return function(){
if(!instance){
// 如果没有则赋值,初始化
instance = new Person();
}
// 有的话直接返回
return instance;
}
})();
var p1 = f();
var p2 = f();
console.log(p1);
console.log(p2);
// 单例模式(唯一的),每次获取的都是一个东西,所以他
两相等
console.log(p1 === p2);
2.组合模式
组合模式,将对象组合成树形结构以表示“部分-整体”的层次结构。将多个对象的功能,组成起来,实现批量执行。使用这种模式可以用一条命令在多个对象上激发复杂的递归的行为。
// 先准备一些需要批量执行的功能
class GoHome{
init(){
console.log("到家了,开门");
}
}
class OpenComputer{
init(){
console.log("开电脑");
}
}
class OpenXiaoAi{
init(){
console.log("开音乐");
}
}
// 组合器,用来组合功能
class Comb{
constructor(){
// 准备容器,用来防止将来组合起来的功能
this.skills = [];
}
// 用来组合的功能,接收要组合的对象
add(task){
// 向容器中填入,将来准备批量使用的对象
this.skills.push(task);
}
// 用来批量执行的功能
action(){
// 拿到容器中所有的对象,才能批量执行
this.skills.forEach( val => {
val.init();
} );
}
}
// 创建一个组合器
var c = new Comb();
// 提前将,将来要批量操作的对象,组合起来
c.add( new GoHome() );
c.add( new OpenComputer() );
c.add( new OpenXiaoAi() );
// 等待合适的时机,执行组合器的启动功能
c.action();
// 在内部,会自动执行所有已经组合起来的对象的功能
3.观察者模式
也称发布-订阅模式,定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,就会通知所有的观察者对象。发布者:发布信息,会随时更新自身的信息或状态。 订阅者:接收信息,接收到发布者发布的信息,从而做出对应的改变或执行,订阅者可以随时加入或离开。
// 需要一个观察者,创建一个事件容器,并准备on等方法
function Observer(){
this.msg = {};
}
// 向事件容器中添加事件,消息
Observer.prototype.on = function(type, cb){
// 判断事件容器中,有没有当前传进来的这个类型
// 如何没有,走else
if(this.msg[type]){
// 如果有,直接给第一次设置的这个数组,添加个新数据
this.msg[type].push(cb);
}else{
// 给他设置一个对应的属性,同时,属性值需要提前写成数组
this.msg[type] = [cb];
}
}
Observer.prototype.emit = function(type){
// 首先判断事件容器中是不是已经记录
if(this.msg[type]){
var event = {
type:type
}
// 如果已经记录了信息,那么就去执行这个消息对应的所有的处理函数
this.msg[type].forEach(val=>{
val.call(this,event);
})
}
}
Observer.prototype.off = function(type, cb){
// 首先判断事件容器中是不是已经记录
if(this.msg[type]){
// 准备保存符合传参的处理函数的索引
var i = 0;
// 遍历,判断,当前类型对应的每一个处理函数,依次作比较
var onoff = this.msg[type].some((val, idx)=>{
i = idx;
return val === cb;
})
// 判断是否获取到重复的函数
if(onoff){
// 如果有,那么就在当前的消息处理函数的队列中,删除这个函数
this.msg[type].splice(i, 1);
}
}
}
// 首先创建一个观察者对象
var ob = new Observer();
// 准备两个处理函数
function a(){
console.log("没收");
}
function b(){
console.log("叫家长");
}
// 随便绑定一个消息,给了两个处理函数
ob.on("玩手机",a);
ob.on("玩手机",b);
// 模拟事件的执行
ob.emit("玩手机");
// 删除一个处理函数
ob.off("玩手机", b);
// 模拟事件的执行
ob.emit("玩手机");
4.MVC模式
MVC模式是一种架构模式,它将应用抽象为3个部分:M:model数据(模型);V:view视图;C:控制器
// 创建模型,管理多个数据
class Model{
model1(){
return "hello";
}
model2(){
return "world";
}
model3(){
return "你好";
}
}
// 创建视图,管理多种渲染方式
class View{
view1(data){
console.log(data);
}
view2(data){
document.write(data);
}
view3(data){
alert(data);
}
}
// 创建控制器,设定对应的指令
class Ctrl{
constructor(){
// 初始化模型和视图
this.m = new Model();
this.v = new View();
}
// 在指令中,可以读取对应的数据,放在对应的视图中
ctrl1(){
var data = this.m.model1();
this.v.view1(data);
}
ctrl2(){
var data = this.m.model2();
this.v.view3(data);
}
}
var c = new Ctrl();
c.ctrl1();
c.ctrl2();
上一篇: 责任链模式
下一篇: 理解责任链模式:一种设计模式的实现与应用
推荐阅读
-
YUV到RGB转换中的关键要点有哪些?
-
学习备忘录模式:使用go编写行为型设计模式中的手撸实例
-
最值得投资的服务O2O公司TOP10- http://www.chinaz.com/start/2014/1010/370056.shtml 创哥说:自2013年下半年开始,本地生活服务业里出现了众多O2O模式的创业公司。这是资本和舆论密切关注的热点,它们大多相信自己就是那个能改造本地生活服务业的人,资本和舆论差不多也这么想,所以它们创立没多久,就纷纷拿到了天使投资。现在大半年过去,它们要融A轮甚至B轮了。那么,哪些公司的发展前景更值得期待? 《创业家》跟踪了这波浪潮,并对其中的代表公司进行了深度采写。此外,《创业家》还通过微信群和“重度垂直-黑马O2O特训营”、线下沙龙等服务聚集起了中国最领先的O2O创业公司创始人,请加微信号korchagin,加群请注明姓名+公司名+职位,否则初审都不会过。 《创业家》采访了近10位投资人和大约30家从事本地生活服务的创业公司,试图找到每个细分行业里最优秀的早期公司。我们的评判标准与VC投早期项目时类似,主要看行业前景、团队结构、商业思路这三个维度。为了加强专业度和调查力度,我们还请投资人和业内公司作了互相评价。 有的人可能会想:我作为同行,明明三项指标都比上榜的公司好,为啥我榜上无名?因为很多概念,拆细了看才有价值。比如“行业前景”,创业者第一步切入的细分市场的规模与它所能延伸出的想象空间,其实是两回事。出行市场广阔无边,滴滴打车和易到用车虽然正在商务租车领域展开竞争,但它们最早切入的细分领域不同,所以发展节奏和今日的市值也就不同。又比如,二次创业者要比初次创业者有优势,因为阅历很值钱。但如果前者第一次创业时实现了财务*,那他二次创业时很可能饥饿感不够,这可能会抵销掉他的阅历优势。 NO.
-
【English】十三、英语中的连词有哪些,都有什么作用
-
6 种 JavaScript 设计模式,让你的代码更高效!
-
全面更新!探究21种最实用的JavaScript设计模式,附带详细图解与实例
-
JavaScript里的15个常用设计模式解析
-
掌握JavaScript设计模式的10种实用方法
-
ES6中的23种JavaScript设计模式:让你的代码更高效、更易读
-
搞定JavaScript设计模式的几种常用方法