JavaScript 设计模式
2020/7/16 11:10:43
本文主要是介绍JavaScript 设计模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一种设计模式应该包括下列元素
模式名称
描述
上下文大纲
问题陈述
解决方案
设计
实现
插图
示例
辅助条件
关系
已知的用法
讨论
直接给出解释与案例分析,帮助理解
构造器模式
构造器是一种内存已分配给该对象的情况下,用于初始化新对象的的特殊方法
-
基本构造器
Constructor
function Person(name,age,sex) { this.name = name; this.age = age; this.sex = sex; this.personalString = function(){ return '姓名:'+ this.name + ' 年龄:' + this.age + ' 性别:' + this.sex } } <!--example--> var xiaoming = new Person('小明','18','男'); console.log(xiaoming.personalString()) <!----姓名:小明 年龄:18 性别:男> 复制代码
缺点: 基本构造器 继承变得很困难
-
带原型的构造器
Constructor
function Person(name,age,sex) { this.name = name; this.age = age; this.sex = sex; } Person.prototype.personalString = function(){ return '姓名:'+ this.name + ' 年龄:' + this.age + ' 性别:' + this.sex } <!--example--> var xiaoming = new Person('小玲','17','女'); console.log(xiaoming.personalString()) <!----姓名:小玲 年龄:17 性别:女> 复制代码
理解:
构造器模式利用new
关键字 创建不同的示例,示例的__proto__.contructor
指向同一个构造函数
xiaoming.__proto__.constructor === Person
模块模式
Module 最初为一种传统软件工程中为类提供私有和公有方法封装的方
var countModule = (function(){ var counter = 0; return { add:function(){ return ++counter; }, min:function(){ return --counter; } } })(); <!--example--> countModule.add() //--> 1 countModule.add() //--> 2 countModule.min() //--> 1 复制代码
var myModule = (function(){ var module = {}, privateVariable = "hello world"; function privateMethod(){ } module.publicProperty = "Foobar"; module.publicMethod = function(){ console.log(privateVariable); }; return module; }) 复制代码
声明对象,挂载注册,直接return输出,重新赋值挂载到声明的全局变量
理解: 利用闭包达到维系私有变量,防止污染全局作用域,隔离与其他开发者 引用冲突
代理模式
为一个对象提供一个代用品或占位符,以便控制对它的访问。例如图片懒加载业务模型
var imgFunc = (function() { var imgNode = document.createElement('img'); document.body.appendChild(imgNode); return { setSrc: function(src) { imgNode.src = src; } } })(); var proxyImage = (function() { var img = new Image(); img.onload = function() { imgFunc.setSrc(this.src); } return { setSrc: function(src) { imgFunc.setSrc('./loading,gif'); img.src = src; } } })(); proxyImage.setSrc('./pic.png'); 复制代码
单例模式
单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。
class CreatePerson { constructor(name) { this.name = name; this.getName(); } getName() { return this.name; } } // 代理实现单例模式 var Person = (function() { var instance = null; return function(name) { if(!instance) { instance = new CreatePerson(name); } return instance; } })(); // test var a = new Person("aaa"); var b = new Person("bbb"); console.log(a === b); //true 复制代码
观察者模式
对目标状态感兴趣的一个或多个观察者,通过将自身与该目标关联在一起的形式进行注册。当目标出现观察者可能感兴趣的变化时,发出提醒消息,进而调用每个观察者的更新方法。如果观察者对目标状态不再感兴趣,只需要解除关联即可。
1. Subject 目标
维护一系列的观察者,方便添加或删除观察者
2. Observer 观察者
为那些在目标状态发生改变时,需要获得通知的对象提供一个更新接口
3. ConcreteSubject 具体目标
状态发生改时,向Observer
发出通知,存储ConcreteSubject
状态
4.ConcreteObserver 具体观察者
存储一个指向ConcreteSubject
的饮用,实现Observer
的更新接口,以️使自身状态与目标的状态保持一致
function Tweeter () { var subject = new Subject(); this.addObserver = function (observer) { subject.add_observer(observer); }; this.removeObserver = function (observer) { subject.remove_observer(observer); }; this.fetchTweets = function fetchTweets () { // tweet var tweet = { tweet: "This is one nice Observer" }; // 提示观察者发生的变化 subject.notify(tweet); }; } // 添加观察者 var TweetUpdater = { update: function () { console.log('Update Tweet - ', arguments); } }; var TweetFollower = { update: function () { console.log('Following this tweet - ', arguments); } }; var tweetApp = new Tweeter(); tweetApp.addObserver(TweeterUpdater); tweetApp.addObserver(TweeterFollower); tweetApp.fetchTweets(); tweetApp.removeObserver(TweetUpdater); tweetApp.removeObserver(TweetFollower); 复制代码
Mixin模式
如果有可以在多个对象和类层次之间共享的功能,可以使用 mixin;如果要共享的功能是在单个层次中,可以使用继承。在原型继承中,如果继承来自原型,那么对原型做出的修改会影响到从原型继承的一切内容。如果不希望出现这种情况,可以使用 mixin
var _ = require('underscore'); // 将共享的功能封装进 CustomLogger var logger = (function () { var CustomLogger = { log: function (message) { console.log(message); } }; return CustomLogger }()) // 需要定制的日志记录器来记录系统特定日志的对象 var Server = (function (Logger) { var CustomServer = function () { this.init = function () { this.log("Initializing Server..."); }; }; // 将 CustomLogger 的成员复制/扩展为 CustomServer _.extend(CustomServer.prototype, Logger); return CustomServer; }(logger)); (new Server()).init(); 复制代码
原型模式
用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象
function Person () { this.name = 'ivan' this.sex = '28' this.age = '男' this.getName=function () { return `姓名:${this.name}` } } Person.prototype.getInfo = function () { return `姓名: ${this.name}, 年龄: ${this.age}, 性别:${this.sex}` } let person = new Person() const person1 = Object.create(proto) const person2 = Object.create(proto) person1.name //"ivan" person2.name //"ivan" person1.name = 'xxx' // "xxx" person2.name //"ivan" 复制代码
命令模式
将方法调用 请求 操作封装到单一对象中,从而根据我们不同的请求对客户进行参数化与传递可供执行的方法调用。此外,这种模式将调用操作的对象与知道如何实现该操作的对象解偶,并在交换出具体类方面提供更大的整体灵活性。
* 通过假设桥梁,降低耦合,一定程度遵从OOP
let CarManager = (() => { return { requesrInfo: (model, id) =>{ return 'The information for ' + model + 'width ID' + id + 'is foobar' }, buyVehicle: (model, id) =>{ return 'purchased Item ' + model + ', ' + id }, arrangeView: (model, id) =>{ return 'You have successfully booked a viewing of ' + model + ' ' + id }, execute: (...arg) => { return CarManager[arg[0]] && CarManager[arg[0]].apply(CarManager,[].slice.call(arg,1)) } } })() CarManager.execute('arrangeView','ff','123') 复制代码
外观模式
为更大的代码体提供一个方便的高层次接口,能够隐藏其底层的真是复杂度,可以理解成库的API
let module = (() => { let _private = { i: 5, get: () => { console.log(this.i) }, set: (val)=> { this.i = val }, run: () => { console.log('runing') }, jump: ()=> { console.log('jumping') } } return { facade: (args)=>{ _private.set(args.val); _private.get(); if(args.run){ _private.run() } } } })() module.facade({run:true,val:10}) // 10 runing 复制代码
工厂模式
用于创建对象的接口。根据传入工厂的类型,可以创建出特定类型的对象。这种模式常见的实现通常是利用类或类的静态方法
class UserPerson { constructor(name = '', task = '') { this.name = name this.task = task } } class userPersonFactory extends UserPerson { constructor(name, viewPage) { super(name, viewPage) } create(role) { switch (role) { case 'teacher': return new userPersonFactory( '老师', '教书' ); break; case 'student': return new userPersonFactory( '学生', '学习' ); break default: throw new Error('找不到你想要的') } } } let UPF = new userPersonFactory() let teacher = UPF.create('teacher') // userPersonFactory {name: "老师", task: "教书"} let student = UPF.create('student') // userPersonFactory {name: "学生", task: "学习"} let principal = UPF.create('principal') // Uncaught Error: 找不到你想要的 复制代码
如果任何问题,欢迎指正,特别感谢!!!!!!
这篇关于JavaScript 设计模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求