JS中常见的设计模式

最新推荐文章于 2024-03-07 10:13:02 发布
最新推荐文章于 2024-03-07 10:13:02 发布
阅读量316 收藏 2
点赞数
分类专栏： JS+jQuery 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wendyGao_Yin/article/details/113973045
版权

JS中常见的设计模式

JS设计模式：是一种思想，更规范更合理的去管理代码（方便维护、升级、扩展、开发）

单例设计模式 (Singleton)

  • 最早期的模块化编程思想（同样的还有：AMD / CMD / CommonJS / ES6Module ）
  • 避免全局变量的污染
  • 实现模块之间的相互调用（提供了模块导出的方案）
//公共板块
let utiles = (function(){
	function debounce(func, wait){};
	//...
return {
	debounce:debounce,
}

})()
//A板块
let AModule = (function(){
	utiles.debounce();
	function fn(){};
	function jquery(){};
	return {
		jquery:jquery
	}
})()
//B板块(实现当前模块下需要完成的所有的功能)
let BModule = (function(){
	utiles.debounce();
	AModule.jquery();
	function fn(){};
	return {}
})()

命令模式(Command)

let BModule = (function(){
		utiles.debounce();
		AModule.jquery();
		
		//获取数据
		function getData(){}		
		//绑定数据
		function binding(){}			
		//处理事件绑定
		function handle(){}		
		//处理其他事情
		function fn(){};
		return {			
			init(){	//模块的入口（相当于模块的大脑，控制模块中方法的执行顺序,这种方式称为命令模式）		
				getData();
				binding();
				handle();
				fn();
			}		
		}
}
BModule.init();

Constructor构造器模式

  • 自定义类和实例
  • 私有&公有属性和方法
  • 编写公共的类库 & 歇一歇插件组件

*每次调用插件都是创造这个类的一个实例，既保证每个实例之间(每次调用之间)有自己的私有属性，互不影响；也可以保证一些属性方法还是公用的，有效避免代码的冗余…

//实现方法一：
function Fn(){
	//原型上的属性
	this.xxx = xxx;
}
Fn.prototype = {
	construtor:Fn,
	//原型上的方法
	query(){},
	//...
};
//私有的方法
Fn.xxx = function () {};
new Fn();

//实现方法二：
class Fn2{
	constructor(){
	};
	//原型上的方法
	query(){};
	
	//私有的方法
	static xxx(){}
}
let f1 = new Fn2();
let f2 = new Fn2();

工厂模式

  • 简单的工厂模式：一个方法根据传参的不同，做了不同事情的处理
  • JQ中的工厂模式：加工转换
  • 经典案例：后台开发的时候，会有一个产品需要适配多套数据库（MySQL sqlserver Oracle），项目需要根据一些配置，转换到对应的数据库上
//简单的工厂模式
function factory(options){
	if(options == null) options ={};
	if(!/^(function| object)$/i.test(typeof options) ) options = {};
	
	let {
		type,
		payload
	} = options;
if(type === "MYSQL"){
	// ...
	return;
};

if(type === "SQLSERVER"){
	// ...
	return;
};
//...
}
factory({
	type: "SQLSERVER"，
	root:"",
	pass:"",
	select:""
});



(function(){
	function jQuery(selector, context){};
	jQuery.fn = jQuery.prototype = {
		constructor:jQuery,
		//...
	}
	
	//中间件转换
	function init (){};
	jQuery.fn.init = init;
	init.prototype = jQuery.fn;
	
	if(typeof window !== "undefined"){
		window.$ = window.jQuery = jQuery;
	}

})()

发布订阅模式Public& Subscribe

灵感来源于 addEventListener DOM2 事件绑定

  • 给当前元素的某一个事件行为，绑定多个不同的方法（事件池机制）
  • 事件行为触发，会依次通知事件池中的方法执行
  • 支持内置事件（标准事件：click、dbclick、mouseenter…）
  • 应用场景：凡事某个阶段到达的时候，需要执行很多方法（更多时候，到底执行多少方法不确定，需要边写业务边处理），我们都可以基于发布订阅设计模式来管理代码;（创建事件池->发布任务）|（向事件池中加入方法 ->向计划表中订阅任务）|（ fire -> 通知计划表中任务执行 ）
(function(){
//自己创造的事件池
 	let pond = [];
	
	//向事件池中注入方法
	function subscribe(func){
		//去重处理
		if(pond.include(func)) return ;
		pond.push(func);
		//每一次执行，返回的方法是用来移除这一项的
		return function unsubscribe(){
			pond = pond.filter(item =>item !==func);
			/*等于
			if(item ===func){return false};
			return true;
			*/
		}
	};
	//通知事件池中所有的事件执行
	subscribe.fire = function fire(...params){
		pond.forEach(item=>{
			if(typeof item === "function") item(...params);
		})
	}
	window.subscribe = subscribe;
})()
let unsubscribe1 = subscribe(function () {
    console.log(1, arguments);
});

subscribe(function () {
    console.log(2, arguments);
});

subscribe(function () {
    console.log(3);
    unsubscribe1();
});

subscribe(function () {
    console.log(4);
});

setTimeout(() => {
    subscribe.fire(10, 20, 30);
}, 1000);

//需求：从服务器获取数据，获取数据后要干很多事情
//A
const f1 = data=>{};
subscribe(f1);
//B
const f2 = data=>{};
subscribe(f2);
//C
const f3 = data=>{};
subscribe(f3);
//D
const f4 = data=>{};
subscribe(f4);

//M
query.then(data=>{
	subscribe.fire(data);
})

一个项目中可能会出现多个事情需要基于发布订阅来管理，一个事件池不够

  • 管理多个事件池
    • 面向对象：类和实例
    • 每个实例都有一个自己私有的事件池
    • subscribe/ unsubscribe/fire是公用的
  • 一个事件池支持不同的自定义事件类型
//基于jquery 的$.callbacks() 实现
let $plan1 = $.Callbacks();
//add remove fire
$plan1.add(function(){console.log(1, arguments)})
$plan1.add(function(){console.log(2, arguments)})
setTimeout(function(){
	$plan1.fire(100,200)
},1000)
let $plan2 = $.Callbacks();
$plan2.add(function(){console.log(3, arguments)})
$plan2.add(function(){console.log(4, arguments)})
setTimeout(function(){
	$plan2.fire(300,400)
},2000)

运行结果：
在这里插入图片描述

clss Sub {
	//实例私有的属性：私有的事件池
	pond = [];
	//原型上设置方法
	//1.向当前实例所属事件池中订阅任务
	subscribe(func){
		let self = this,
			pond = self.pond;
		if(!pond.includes(func)) pond.push(func);
		return function unsubscribe(){
			//pond = pond.filter(item =>item !==func);
			let i = 0,
			len = pond.length,
			item = null;
			for(; i <len;i++){
				item = pond[i];
				if(item === func){
					pond.splice(i,1);
					break;
				}
			}
		}
		
	}	
	//3. 通知当前实例所属事件池中的任务执行
	fire(...params){
		let self = this,
			pond = self.pond;
		pond.forEach(item=>{
			if(typeof item === "function") item(...params);
		});
	};
}

let sub1 = new Sub;
sub1.subscribe(function(){console.log(1, arguments)})
sub1.subscribe(function(){console.log(2, arguments)})
setTimeout(function(){	sub1.fire(100,200)},1000)

let sub2 = new Sub;
sub2.subscribe(function(){console.log(3, arguments)})
sub2.subscribe(function(){console.log(4, arguments)})
setTimeout(function(){	sub2.fire(300,400)},2000)

let  sub = (function(){
	let pond = {};
	//向事件池中增加指定自定义类型的方法
	const on = function on(type, func){
		//每一次增加的时候，验证当前类型在事件池中是否已经存在
		Array.isArray(pond[type])? pond[type]=[] :null;
		let arr = pond[type];
		if(arr.includes(func)) return;
		arr.push(func);
	};
	//从事件池中删除指定自定义类型的方法
	const off = function off(type, func){
		let arr = pond[type],
		i = 0,
		item = null,
		len = arr.length;
		if(!Array.isArray(pond[type])) throw new TypeError(`${type}自定义事件在事件池中并不存在`);
		for(;i<len;i++){
			item = arr[i];
			if(item === func) i{
				//移除掉
				//arr.splice(i,1);
				arr[i] =null;
				break;
			}
		}
	};
	//通知事件池中指定自定义类型的方法执行
	const emit = function emit(type, ..params){
		let arr = pond[type],
		i = 0,
		item = null,
		len = arr.length;
		if(!Array.isArray(pond[type])) throw new TypeError(`${type}自定义事件在事件池中并不存在`);
		for(;i<len;i++){
			item = arr[i];
			if(typeof item === "function"){
				item(...params);
				continue;
			}
			arr.splice(i,1);
			i--;
		}

	};

	return {
		on,
		off,
		emit
	};
})();

const fn1 = ()=> console.log(1);
const fn2 = ()=> console.log(2);
const fn3 = ()=> console.log(3);
const fn4 = ()=> console.log(4);
sub.on("A",fn1);
sub.on("A",fn2);
setTimeout(function(){	sub.emit("A")},1000);

sub.on("B",fn3);
sub.on("B",fn4);
setTimeout(function(){	sub.emit("B")},2000);
/*
1
2
3
4
*/

观察者模式Observer

发布订阅是观察者模式的升级版

  • 首先要有一个目标容器
    • 增加（add ）观察者
    • 删除（remove）观察者
    • 通知观察者中的update执行并且传递消息（notify）
  • 有n个观察者，每个观察者都有一个update方法
// 定义观察者：形式可以不一样，只需要具备update方法即可
class OBSERVER {
    update(msg) {
        console.log(`我是观察者1，我接收到的消息是：${msg}`);
    }
}
let DEMO = {
    update(msg) {
        console.log(`我是观察者2，我接收到的消息是：${msg}`);
    }
};

// 目标
class Subject {
    observerList = [];
    add(observer) {
    	if(!observerList.includes(observer)) observerList.push(observer);
    };
    remove(observer) {
	    let i = 0,
			item = null,
			len = observerList.length;
			if(!observerList.includes(observer)) throw new TypeError(`${type}自定义事件在事件池中并不存在`);
		for(;i<len;i++){
			item = observerList[i];
			if(item === observer){
				observerList[i] =null;
				break;
			}
		}
    };
    notify(...params) {
	     let i = 0,
			 item = null,
			 len = observerList.length;
		if(len<1)) return;
		for(;i<len;i++){
			item = observerList[i];
			if(typeof item === "function") {
				item(...params);
				continue;
			};
			observerList.splice(i,1);
			i--;
		}
    };
}
let sub = new Subject;
sub.add(new OBSERVER);
sub.add(DEMO);
setTimeout(() => {
    sub.notify('hello world~~');
}, 1000);

中介者模式Mediator

// 中介者模式
let mediator = (function () {
    let topics = [];

    const subscribe = function subscribe(callback) {
   	 	if(!topics.includes(callback)) topics.push(callback);
    };

    const publish = function publish(...params) {
        topics.forEach(callback => {
            if (typeof callback === "function") {
                callback(...params);
            }
        });
    };

    return {
        subscribe,
        publish
    };
})();
mediator.subscribe(() => console.log(1));
mediator.subscribe(() => console.log(2));
setTimeout(() => {
    mediator.publish();
}, 1000);
wendyGao_Yin
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS常见的设计模式
ABCFF12333的博客
07-19 203
1.单例模式 无论调用多少次只会产生一个实例 let obj=(function(){ return { fn1(){}, fn2(){} })() 2.构造器模式 可以产生多个实例对象并且可以共有一些方法 class Fn(){ constructor(name){ this.name=name; } getName(){} } 3.工厂模式 根据条件不同产生不同的结果 function factory(){ .
js设计模式
萌古大汗的专栏
11-22 357
单例模式 场景 内存中永远只有一个该类的对象实例。 示例 let singleton=(function(){ let instance return function(data){ if(instance)return instance this.data=data return instance=this } })() singleton.prototype.getData=function(){ return this.da
js 设计模式
04-01
这个资源不要下载，是我测试上传用的，描述不支持HTML标签；详细的资源描述有机会获得我们的推荐，更有利于他人下载，赚取更多积分。如资源描述不清，有可能审核不通过。
前端攻略系列(三) - javascript 设计模式（文章很长，请自备瓜子，水果和眼药水）...
weixin_34362875的博客
08-31 235
　　一直都在考虑这个月分享大家什么东西最好，原计划是打算写一些HTML5中JS方面的内容或者是AJAX方面的，可是自己由于表达能力，时间，还有个人工作方面的问题，这个还是等下个月再做分享吧^.^。 　　老规矩，开始正文以前先交代自己写这篇文章的目的和一些注意事项： 　　1.首先本人一直从事前端开发，所以除了JavaScript其他的语言了解不深，所以文章只会以JavaScript语言的角度去论...
js设计模式（二）
Jinrong
10-27 159
六、命令模式 1. 定义 用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系 命令（command）指的是一个执行某些特定事情的指令 2. 核心 命令中带有execute执行、undo撤销、redo重做等相关命令方法，建议显示地指示这些方法名 3. 实现 简单的命令模式实现可以直接使用对象字面量的形式定义一个命令 七、组合模式 1. 定义 是用小的子对象来构建更大的 对象，而这些小的子对象本身也许是由更小 的“孙对象”构成的。 2. 核心 可以用树形结构来表示这种“部分- 整
JS设计模式
早早踏入养生行列
09-05 1250
JS设计模式总结创建型设计模式简单工厂模式工厂方法模式抽象工厂模式建造者模式原型模式单例模式结构型设计模式外观模式适配器模式代理模式装饰者模式桥接模式组合模式享元模式行为型设计模式模板方法模式观察者模式状态模式策略模式职责链模式命令模式访问者模式中介者模式备忘录模式迭代器模式解释器模式技巧型设计模式链模式委托模式数据访问对象模式节流模式简单模板模式惰性模式参与者模式等待者模式架构型设计模式SMD同...
深度解析JavaScript中常见设计模式及其应用场景，看完去面试，面试官说：就你了
最新发布
为了WLB努力
03-07 582
深度解析JavaScript中常见设计模式及其应用场景，并手写部分经典模式
JavaScript中常见的设计模式
01-08
单例模式是设计模式中的一种，其核心目标是确保一个类只有一个实例，并提供一个全局访问点。在JavaScript中，单例模式常用于创建资源管理器或者配置对象，以避免因为多次实例化导致的资源浪费或状态混乱。单例模式的...
JavaScript常见设计模式视频教程下载
08-02
JavaScript常见设计模式
JavaScript设计模式与开发实践_himppf_js_jspremise_精通javascript_Js设计模式_
10-04
"函数式编程"也是JavaScript设计模式中的一个重要概念，它鼓励使用无副作用的纯函数和高阶函数，减少代码耦合，提高可读性和可测试性。"柯里化"和"偏函数"是函数式编程中的两种技术，它们可以提升函数的灵活性和重用...
JavaScript设计模式与开发实践.pdf
12-08
本书《JavaScript设计模式与开发实践》是JavaScript语言的设计模式和开发实践的指南，旨在帮助初、中、高级Web前端开发人员和想往架构师晋级的中高级程序员，掌握JavaScript设计模式和开发实践的知识。本书共分为三...
js的设计模式
不想写代码的一天
06-27 202
1:工厂模式 工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。 简单的工厂模式可以理解为解决多个相似的问题;这也是她的优点 function work(name,sex){ var obj=new Object(); obj.name=name; obj.sex=sex; ...
【设计模式】什么是设计模式
codedot
12-23 533
设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。 设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖
js常用设计模式
AndyViky的博客
12-31 417
js常用设计模式 单例模式 目的：保证一个对象只生成一个实例，并提供一个全局访问口. 作用：所有使用者使用同一个实例，确保数据一致性，操作的同步. 用例：app音乐播放器，所有操作均使用同一个实例播放，保证不出现连播两首歌曲的情况。弹窗，无论点击多少次都只弹出一次. 主要实现方法: 如果存在实例就返回，如果不存在就创建一个新的对象再返回// 编写主要对象 class Cre
数据类型 - Array
wendyGao_Yin的博客
05-09 6643
数据类型-Array什么是数组创建数组访问和修改数组length 和数字下标之间的关系数组的方法数组对象的方法字符串和数组之间的转换数组实例的方法数组的增删改查**push**：在数组的末尾增加一个或多个元素，并返回数组的新长度**pop**：删除数组的最后一个元素，并返回这个元素。此方法更改数组的长度。**shift**：删除数组的第一个元素，并返回这个元素。此方法更改数组的长度。**unshift**：一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。**splice**：通过
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值