javascript 设计 js的设计模式

转载

gulaotou 2023-09-21 09:48:58

文章标签 javascript 设计 javascript 前端设计模式构造器 文章分类 JavaScript 前端开发

JS设计模式

设计模式前言
设计原则
一、构造器模式

1. 创建对象的三种方式
2. 赋值的四种方式
3. 构造器的两种写法
4.补充

二.装饰器模式
三. 工厂模式

1.简单工厂模式
2.工厂方法模式

设计模式前言

设计模式(Design pattern)是一套被反复使用、思想成熟、经过分类和无数实战设计经验的总结的。使用设计模式是为了让系统代码可重用、可扩展、可解耦、更容易被人理解且能保证代码可靠性。设计模式使代码开发真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。只有夯实地基搭好结构，才能盖好坚壮的大楼。也是我们迈向高级开发人员必经的一步。

设计原则

javascript 设计 js的设计模式_设计模式

模式

解释

过程

写法

一、构造器模式

在面向对象编程中，新建的对象分配到内存后，有构造器函数初始化该对象。
过程：
1.创建对象并分配内存；
2.接收参数，通过构造器给对象赋值（属性和方法）。

1. 创建对象的三种方式

// 1.创建对象(的三种方式)
      // ①
      var newObj = {};
      console.log(newObj);
      
      // ②
      var newObj = Object.create(null);
      console.log(newObj);

      // ③
      var newObj = new Object();
      console.log(newObj);
      // 注:使用 var 关键字声明的变量可以重复声明，后者会覆盖前者

javascript 设计 js的设计模式_前端_02

2. 赋值的四种方式

// 2.四种赋值方式
      // ①“点号”法
      // 设置name属性和属性值  对象.key = value
      newObj.name = "龙傲天";
      // 取值
      var name = newObj.name;
      console.log(name);

      // ② “方括号”法
      // 赋值取值
      newObj["age"] = 18;
      var age = newObj["age"];
      console.log(age);

      // ③Object.defineProperty方式
      // Object.defineProperty(对象,key,{ descriptor }) 在对象上添加新属性并赋值, 或修改对象已有属性
      Object.defineProperty(newObj, "sex", {
        value: "女",
        writable: true, //value值可改
        // enumerable: true,
        // configurable: true,
      });
      newObj.sex = "男";
      console.log(newObj.sex);

      // 等价于
      var defineProp = function (obj, key, value) {
        let config = {};
        config.value = value;
        Object.defineProperty(obj, key, config);
      };
      // 调用
      defineProp(newObj, "height", 175);
      console.log(newObj.height);

      // ④Object.defineProperties方式
      Object.defineProperties(newObj, {
        weight: {
          value: 55,
          writable: true,
        },
        eyesight: {
          value: 5.0,
          writable: true,
        },
      });

      console.log(newObj.weight);
      console.log(newObj["eyesight"]);

Object.defineProperty()函数详解

3. 构造器的两种写法

1.基础写法(对象的函数写在内部)

//  构造函数写法一
      function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        // 对象方法写在构造器内
        this.toString = function () {
          return (
            `我是` +
            this.name +
            `,今年` +
            this.age +
            `岁了,是一名` +
            this.sex +
            `生.`
          );
        };
      }
      var kunpeng = new Person("鲲鹏", 18, "男");
      console.log(kunpeng.toString());

javascript 设计 js的设计模式_javascript 设计_03

2.使用"原型"的构造器(对象的函数写在prototype上, 可以被子类继承)√

// 构造函数写法二: 原型写法
      function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
      }
      // 对象属性写在构造器内,方法(函数)写在原型上
      Person.prototype.toString = function () {
        return (
          `我是` +
          this.name +
          `,今年` +
          this.age +
          `岁了,是一名` +
          this.sex +
          `生.`
        );
      };

      var fenghuang = new Person("凤凰", 18, "女");
      console.log(fenghuang.toString());

javascript 设计 js的设计模式_设计模式_04

4.补充

类的继承

二.装饰器模式

对原有功能进行拓展时, 在不违反’开放封闭原则’的情况下就可以用装饰器模式

var old = function () {
        console.log("看不懂的一堆老逻辑");
      };
      //要求: 添加一些新逻辑
      var _old = old;
      var old = function () {
        _old();
        console.log("添加的新逻辑");
      };
      old();

javascript 设计 js的设计模式_javascript_05

三. 工厂模式

将创建对象的过程单独封装.

1.简单工厂模式

简单工厂模式是一个工厂对象来创建某一类产品的实例。
就是这个工厂只生产某一类产品, 比如不同的书.

以书为类

function bookShop(name, year, vs, price) {
        var book = new Object();
        book.name = name;
        book.year = year;
        book.vs = vs;
        book.price = price;
        return book;
      }
      var b1 = bookShop("十万个为什么", 1999, "第三版", 123);
      var b2 = bookShop("神兵小将", 1999, "第二版", 23);
      console.log(b1, b2);

javascript 设计 js的设计模式_构造器_06