请选择 进入手机版 | 继续访问电脑版
创作

#楼主# 2020-6-18

跳转到指定楼层
设计模式是程序语言里的集大成者。JavaScript 中的设计模式指的是一些可重用的解决方案,这些方案适用于编写 JavaScript Web 应用程序时常见的一些问题。

      开发人员将 JavaScript 设计模式作为解决问题的模板是很合适的,但并不是说这些模式可以代替开发人员的工作。

timg.jpg

      通过设计模式,我们可以将许多开发人员的经验结合起来,以优化过的方式来构造代码,从而解决我们所面对的问题。设计模式还提供了用于描述问题解决方案的通用词汇表,而不是去枯燥地描述代码的语法和语义。
      JavaScript 设计模式可帮助开发人员编写出井井有条、美观且结构合理的代码。尽管设计模式很容易重用,但它们并不是要取代开发人员的工作;它们是开发人员的支持与辅助,提供了与特定应用程序无关的通用解决方案,从而尽量避免那些可能导致 Web 应用程序的开发工作出现重大问题的小漏洞。
      与临时方案相比,它们消除了不必要的重复,从而缩减了代码库的整体大小,并让我们的代码更加健壮。
      在本文中,我们将探讨 7 种最出色和最受欢迎的 JavaScript 设计模式,这些模式主要归为以下三类:创作设计模式、结构设计模式和行为设计模式。

1、构造函数设计模式
这是一种特殊的方法,用于在分配内存后初始化新创建的对象。由于 JavaScript 一般来说是面向对象的,所以它打交道最多的就是对象。于是我打算深入研究对象构造函数。在 JavaScript 中创建新对象有三种方法可用。
以下创建构造函数设计模式的一种方法。
  1. // 创建一个新的空对象
  2. let newObject = {};
  3. // 创建一个新的空对象
  4. let newObject = Object.create(Object.prototype);
  5. let newObject = newObject();
复制代码
要访问函数的属性,你需要初始化对象。
  1. const object = new ConstructorObject()
复制代码
上面的 new 关键字告诉 JavaScript,一个 constructorObject 应该充当一个构造函数。这个设计模式并不支持继承。

2、原型模式
原型模式是基于原型继承的。在这种模式中,被创建的对象充当其他对象的原型。实际上,原型(prototype)是被创建的每个对象构造函数的蓝图。
示例:
  1. var myCar= {
  2.    name:"Ford Escort",
  3.    brake:function(){
  4.    console.log("Stop! I am applying brakes");
  5. }
  6. Panic : function (){
  7.     console.log ( "wait. how do you stop thuis thing?")
  8. }
  9. }
  10. // 使用 object create 实个新的例化一 car
  11. var yourCar= object.create(myCar);
  12. // 现在它就是另一个的原型了
  13. console.log (yourCar.name);]
复制代码

3、模块设计模式
模块(module)设计模式对原型模式做了一些改进。模块模式设置了不同类型的修饰符(私有和公共)。你可以创建相似的函数或属性而不会发生冲突。我们还可以灵活地公开重命名函数。这个设计模式的一个缺陷是无法覆盖(override)外部环境中创建的函数。
示例:
  1. function AnimalContainter () {
  2. const container = [];
  3. function addAnimal (name) {
  4.      container.push(name);
  5. }
  6. function getAllAnimals() {
  7.     return container;
  8. }
  9. function removeAnimal(name) {
  10.    const index = container.indexOf(name);
  11.    if(index < 1) {
  12.         throw new Error('Animal not found in container');
  13.    }
  14. container.splice(index, 1)
  15. }
  16. return {
  17.     add: addAnimal,
  18.     get: getAllAnimals,
  19.     remove: removeAnimal
  20. }
  21. }
  22. const container = AnimalContainter();
  23. container.add('Hen');
  24. container.add('Goat');
  25. container.add('Sheep');
  26. console.log(container.get()) //Array(3) ["Hen", "Goat", "Sheep"]
  27. container.remove('Sheep')
  28. console.log(container.get()); //Array(2) ["Hen", "Goat"]
复制代码

4. 单例模式
在仅需要创建一个实例的情况下(例如一个数据库连接),这个模式是必需的。在这个模式中,只能在关闭连接时创建一个实例,或者在打开新实例之前必须关闭已有的实例。此模式也称为严格模式,它的一个缺点是测试时的体验很差,因为它隐藏的依赖项对象很难挑出来进行测试。
示例:
  1. function DatabaseConnection () {
  2. let databaseInstance = null;
  3. // 追踪特定时间创建实例的数量
  4. let count = 0;
  5. function init() {
  6.      console.log(`Opening database #${count + 1}`);
  7.      // 现在执行操作
  8. }
  9. function createIntance() {
  10. if(databaseInstance == null) {
  11.      databaseInstance = init();
  12. }
  13. return databaseInstance;
  14. }
  15. function closeIntance() {
  16.       console.log('closing database');
  17.       databaseInstance = null;
  18. }
  19. return {
  20.     open: createIntance,
  21.     close: closeIntance
  22. }
  23. }
  24. const database = DatabseConnection();
  25. database.open(); //Open database #1
  26. database.open(); //Open database #1
  27. database.open(); //Open database #1
  28. database.close(); //close database
复制代码



转播转播 分享分享 分享淘帖 反对反对
回复

使用道具

成为第一个回答人

B Color Link Quote Code Smilies
站点地图|手机版|WEB明教光明顶 |湘ICP备19021820号-1
Powered by WEB明教  © 2017-2020 Starsoft.
返回顶部