盘点开发人员都应该了解的7种JavaScript设计模式
转载自品略图书馆 http://www.pinlue.com/article/2020/06/2013/0310775902957.html
开发人员将 JavaScript 设计模式作为解决问题的模板是很合适的,但并不是说这些模式可以代替开发人员的工作。
通过设计模式,我们可以将许多开发人员的经验结合起来,以优化过的方式来构造代码,从而解决我们所面对的问题。设计模式还提供了用于描述问题解决方案的通用词汇表,而不是去枯燥地描述代码的语法和语义。
JavaScript 设计模式可帮助开发人员编写出井井有条、美观且结构合理的代码。尽管设计模式很容易重用,但它们并不是要取代开发人员的工作;它们是开发人员的支持与辅助,提供了与特定应用程序无关的通用解决方案,从而尽量避免那些可能导致 Web 应用程序的开发工作出现重大问题的小漏洞。
与临时方案相比,它们消除了不必要的重复,从而缩减了代码库的整体大小,并让我们的代码更加健壮。
在本文中,我将探讨 7 种最出色和最受欢迎的 JavaScript 设计模式,这些模式主要归为以下三类:创作设计模式、结构设计模式和行为设计模式。
1、构造函数设计模式
这是一种特殊的方法,用于在分配内存后初始化新创建的对象。由于 JavaScript 一般来说是面向对象的,所以它打交道最多的就是对象。于是我打算深入研究对象构造函数。在 JavaScript 中创建新对象有三种方法可用。
以下创建构造函数设计模式的一种方法。
// 创建一个新的空对象
var newObject = {};
// 创建一个新的空对象
var newObject = Object.create(Object.prototype);
var newObject = newObject();
要访问函数的属性,你需要初始化对象。
const object = new ConstructorObject();
上面的 new 关键字告诉 JavaScript,一个 constructorObject 应该充当一个构造函数。这个设计模式并不支持继承。
2、原型模式
原型模式是基于原型继承的。在这种模式中,被创建的对象充当其他对象的原型。实际上,原型(prototype)是被创建的每个对象构造函数的蓝图。
示例
var myCar= {
name:"Ford Escort",
brake:function(){
console.log("Stop! I am applying brakes");
}
Panic : function (){
console.log ( "wait. how do you stop thuis thing?")
}
}
// 使用 object create 实个新的例化一 car
var yourCar= object.create(myCar);
// 现在它就是另一个的原型了
console.log (yourCar.name);]
3、模块设计模式
模块(module)设计模式对原型模式做了一些改进。模块模式设置了不同类型的修饰符(私有和公共)。你可以创建相似的函数或属性而不会发生冲突。我们还可以灵活地公开重命名函数。这个设计模式的一个缺陷是无法覆盖(override)外部环境中创建的函数。
示例
function AnimalContainter () {
const container = [];
function addAnimal (name) {
container.push(name);
}
function getAllAnimals() {
return container;
}
function removeAnimal(name) {
const index = container.indexOf(name);
if(index < 1) {
throw new Error("Animal not found in container");
}
container.splice(index, 1)
}
return {
add: addAnimal,
get: getAllAnimals,
remove: removeAnimal
}
}
const container = AnimalContainter();
container.add("Hen");
container.add("Goat");
container.add("Sheep");
console.log(container.get()) //Array(3) ["Hen", "Goat", "Sheep"]
container.remove("Sheep")
console.log(container.get()); //Array(2) ["Hen", "Goat"]
4、单例模式
在仅需要创建一个实例的情况下(例如一个数据库连接),这个模式是必需的。在这个模式中,只能在关闭连接时创建一个实例,或者在打开新实例之前必须关闭已有的实例。此模式也称为严格模式,它的一个缺点是测试时的体验很差,因为它隐藏的依赖项对象很难挑出来进行测试。
示例
function DatabaseConnection () {
let databaseInstance = null;
// 追踪特定时间创建实例的数量
let count = 0;
function init() {
console.log(`Opening database #${count + 1}`);
// 现在执行操作
}
function createIntance() {
if(databaseInstance == null) {
databaseInstance = init();
}
return databaseInstance;
}
function closeIntance() {
console.log("closing database");
databaseInstance = null;
}
return {
open: createIntance,
close: closeIntance
}
}
const database = DatabseConnection();
database.open(); //Open database #1
database.open(); //Open database #1
database.open(); //Open database #1
database.close(); //close database
5、工厂模式
这个模式的创新之处在于,它不需要构造函数就能创建对象。它提供了用于创建对象的通用接口,我们可以在其中指定要创建的工厂(factory)对象的类型。这样一来,我们只需指定对象,然后工厂会实例化并返回这个对象供我们使用。当对象组件设置起来很复杂,并且我们希望根据所处的环境轻松地创建不同的对象实例时,使用工厂模式就是很明智的选择。在处理许多共享相同属性的小型对象,以及创建一些需要解耦的对象时也可以使用工厂模式。
示例
// Dealer A
DealerA = {};
DealerA.title = function title() {
return "Dealer A";
};
DealerA.pay = function pay(amount) {
console.log(
`set up configuration using username: ${this.username} and password: ${
this.password
}`
);
return `Payment for service ${amount} is successful using ${this.title()}`;
};
//Dealer B
DealerB = {};
DealerB.title = function title() {
return "Dealer B";
};
DealerB.pay = function pay(amount) {
console.log(
`set up configuration using username: ${this.username}
and password: ${this.password}`
);
return `Payment for service ${amount} is successful using ${this.title()}`;
};
//@param {*} DealerOption
//@param {*} config
function DealerFactory(DealerOption, config = {}) {
const dealer = Object.create(dealerOption);
Object.assign(dealer, config);
return dealer;
}
const dealerFactory = DealerFactory(DealerA, {
username: "user",
password: "pass"
});
console.log(dealerFactory.title());
console.log(dealerFactory.pay(12));
const dealerFactory2 = DealerFactory(DealerB, {
username: "user2",
password: "pass2"
});
console.log(dealerFactory2.title());
console.log(dealerFactory2.pay(50));
6、观察者模式
观察者(observer)设计模式在许多对象同时与其他对象集通信的场景中用起来很方便。在观察者模式中不会在状态之间发生不必要的事件 push 和 pull;相比之下,所涉及的模块仅会修改数据的当前状态。
示例
function Observer() {
this.observerContainer = [];
}
Observer.prototype.subscribe = function (element) {
this.observerContainer.push(element);
}
// 下面是从 container 中移除一个元素
Observer.prototype.unsubscribe = function (element) {
const elementIndex = this.observerContainer.indexOf(element);
if (elementIndex > -1) {
this.observerContainer.splice(elementIndex, 1);
}
}
/**
* we notify elements added to the container by calling
* each subscribed components added to our container
*/
Observer.prototype.notifyAll = function (element) {
this.observerContainer.forEach(function (observerElement) {
observerElement(element);
});
}
7、命令模式
最后介绍的是命令(command)模式。命令设计模式将方法调用、操作或请求封装到单个对象中,以便我们可以自行传递方法调用。命令设计模式让我们可以从任何正在执行的命令中发出命令,并将责任委托给与之前不同的对象。这些命令以 run() 和 execute() 格式显示。
(function(){
var carManager = {
// 请求的信息
requestInfo: function( model, id ){
return "The information for " + model + " with ID " + id + " is foo bar";
},
// 现在购买这个 car
buyVehicle: function( model, id ){
return "You have successfully purchased Item " + id + ", a " + model;
},
// 现在 arrange viewing
arrangeViewing: function( model, id ){
return "You have successfully booked a viewing of " + model + " ( " + id + " ) ";
}
};
})();
小 结
对于 JavaScript 开发人员来说,使用设计模式的好处很多。设计模式的一些主要优点包括提升项目的可维护性,还能减少开发周期中不必要的工作。JavaScript 设计模式可以为复杂的问题提供解决方案,提升开发速度并提高生产率。
盘点开发人员都应该了解的7种JavaScript设计模式相关推荐
- 每个开发人员都应该学习的 10 种算法
文章目录 1.二分查找 2. 选择.冒泡和插入排序 3. 快速排序和合并排序 4. 霍夫曼编码 5.广度优先搜索 6. 深度优先搜索 7.梯度下降 8. Dijkstra 算法 9. Diffie-H ...
- javascript 设计模式_开发者都应该了解的7种JavaScript设计模式
你好,欢迎收听极客视点. JavaScript 中的设计模式指的是一些可重用的解决方案,这些方案适用于编写 JavaScript Web 应用程序时常见的一些问题.最近,全栈开发人员德文(Deven) ...
- javascript设计模式_开发者都应该了解的7种JavaScript设计模式
你好,欢迎收听极客视点. JavaScript 中的设计模式指的是一些可重用的解决方案,这些方案适用于编写 JavaScript Web 应用程序时常见的一些问题.最近,全栈开发人员德文(Deven) ...
- java开发错误_每个Java开发人员都必须避免的9个安全错误
java开发错误 Checkmarx CxSAST是功能强大的源代码分析(SCA)解决方案,旨在从根本上识别,跟踪和修复技术和逻辑安全漏洞:源代码. 在这里查看 ! 自从1995年中期引入Java以来 ...
- 每个Java开发人员都必须避免的9个安全错误
Checkmarx CxSAST是功能强大的源代码分析(SCA)解决方案,旨在从根本上识别,跟踪和修复技术和逻辑安全缺陷:源代码. 在这里查看 ! 自从1995年中期引入Java以来,它已经走了很 ...
- c++每调用一次函数+1_每个开发人员都应该知道的一些很棒的现代C ++功能
c++每调用一次函数+1 As a language, C++ has evolved a lot. 作为一种语言,C ++已经发展了很多. Of course this did not happen ...
- 每位开发人员都应铭记的10句编程谚语 (我超喜欢,转载了)
所谓谚语,就是用言简意赅.通俗易懂的方式传达人生箴言和普遍真理的话,它们能很好地帮助你处理生活和工作上的事情.也正因如此,我才整理了10句编程谚语,每位开发人员都应该铭记他们,武装自己. 1. 无风不 ...
- 多线程并发:每个开发人员都应了解的内容
各种类型的 源码,书籍,工具等 进入 磐实资源站 可以找到.网址 --> www.panshsoft.net 如果你有好的文章,源码提供给本站 可以进入 bbs.panshsoft.com ...
- java 开发人员工具_每个Java开发人员都应该知道的10个基本工具
java 开发人员工具 大家好,我们已经到了2019年的第二个月,我相信你们所有人都已经制定了关于2019年学习以及如何实现这些目标的目标. 我一直在撰写一系列文章,为您提供一些知识,使您可以学习和改 ...
- java开发人员_每个Java开发人员都应该阅读的10本书
java开发人员 我已经阅读了自己的软件开发书籍,并且发现发现一本我想多次阅读的书籍非常罕见. 但是,有时我会发现一本书,每次阅读时都会教给我新的东西. 这篇博客文章是对这些稀有宝石的致敬. 现在,我 ...
最新文章
- 网站robots.txt探测工具Parsero
- 解决Ubuntu18.04下Qt中无法输入中文的问题
- NYOJ 49 开心的小明
- 怎样的代码算是好代码?
- 自动切换电脑或手机版(php aspx),ASP程序自动判断是电脑或手机访问网站。
- Mysql中各种与字符编码集(character_set)有关的变量含义
- windows 安装yaml支持和pytest支持等
- C#FTP下载文件出现远程服务器返回错误: (500) 语法错误,无法识别命令
- 解决 网上下载的例子 My Mac 64-bit 不能运行的问题
- 一个小故事读懂Memcached漏洞
- shell 命令set -e的作用
- 在达沃斯使用约会软件是怎样一番体验
- 英语单词如何看字母划分音节
- 计算方法 7.数值积分计算方法
- linux系统英语词汇大全,linux系统中常命令和英语词汇.docx
- Oracle中Clob类型处理解析
- 2019年年终个人总结
- @RequiredArgsConstructor 代替@AutoWired注解
- Flex中实现double-click修改DataGrid
- iterm通过代理访问网络
热门文章
- python 股票收益数据统计(柱状图)
- xshell传输文件到服务器(ubuntu)(上传下载)
- 【180620】小人物走路、奔跑的VC++游戏特效
- 主成分分析碎石图_因子分析碎石图
- python数字大小写转换代码_把金额小写转换成大写的Python代码
- 人工智能深度学习Caffe框架介绍
- mtk flashtools工具回读镜像文件system.img
- 索尼电视总出现Android,索尼电视紧急撤回安卓8.0固件包:N多用户无法连接Wi-Fi...
- 知识点 —— Python基础-1
- 网络邻居上不显示计算机,网上邻居不显示或找不到自己电脑怎么办?