jquery中判断-后端工程师的设计模式——工厂模式

bendan520 2023年9月28日 jquery 0

1 简介

工厂模式根据不同的名称输入返回不同类的实例jquery中判断，通常用于创建同一类的对象。工厂模式的主要思想是将对象的创建与对象的实现分离。

2.现实生活中的例子

在类似场景下jquery中判断，这些案例具有以下特点：

3. 分类

工厂模式分为简单鞋工厂模式、工厂模式和抽象鞋工厂模式。

4.简单鞋厂模型

简单的鞋厂模式使用鞋厂对象来决定要创建哪个产品类实例。

简单鞋厂模式包含以下特点：

4.1 实施

类图：AmericanoCoffee、LatteCoffee 和 CappuccinoCoffee 都继承了 Coffee

代码

abstract class Coffee {
   constructor(public name: string) {
   }
}
class AmericanoCoffee extends Coffee {
   constructor(public name: string) {
       super(name);
   }
}
class LatteCoffee extends Coffee {
   constructor(public name: string) {
       super(name);
   }
}
class CappuccinoCoffee extends Coffee {
   constructor(public name: string) {
       super(name);
   }
}
class Café {
   static order(name: string) {
       switch (name) {
           case 'Americano':
               return new AmericanoCoffee('美式咖啡');
           case 'Latte':
               return new LatteCoffee('拿铁咖啡');
           case 'Cappuccino':
               return new LatteCoffee('卡布奇诺');
           default:
               return null;
       }
   }
}
console.log(Café.order('Americano'));
console.log(Café.order('Latte'));
console.log(Café.order('Cappuccino'));

4.2 前端应用场景 4.2.1 jQuery

jQuery

class jQuery{
    constructor(selector){
        let elements = Array.from(document.querySelectorAll(selector));
        let length = elements?elements.length:0;
        for(let i=0;i<length;i++){
            this[i]=elements[i];
        }
        this.length = length;
    }
    html(html){
        if(html){
           this[0].innerHTML=html;
        }else{
          return this[0].innerHTML;
        }
    }
}
window.$ = function(selector){
   return new jQuery(selector);
}

4.2.2 Vue/React源码中的鞋工厂模式

与原生的 document.createElement 类似，Vue 和 React 等带有虚拟 DOM 树（Virtual Dom Tree）机制的框架，在生成虚拟 DOM 时都提供了 createElement 方法来生成 VNode，作为真实的 DOM 节点使用。映射

// Vue
createElement('h3', { class: 'main-title' }, [
  createElement('img', { class: 'avatar', attrs: { src: '../avatar.jpg' } }),
  createElement('p', { class: 'user-desc' }, '放弃不难，但坚持一定很酷')
])
// React
React.createElement('h3', { className: 'user-info' },
  React.createElement('img', { src: '../avatar.jpg', className: 'avatar' }),
  React.createElement('p', { className: 'user-desc' }, '放弃不难，但坚持一定很酷')
)

createElement函数结构大致如下：

class Vnode (tag, data, children) { ... }
function createElement(tag, data, children) {
  return new Vnode(tag, data, children)
}

可以看到VNode的具体创建会在createElement函数中进行。创建过程非常复杂，框架提供的createElement工厂方法封装了复杂的创建和验证过程，对于用户来说非常方便。

4.2.3 vue-router源码中的鞋子工厂模式

工厂模式在源代码中经常使用。以vue-router中的源码为例。代码位置：vue-router/src/index.js

// src/index.js
export default class VueRouter {
  constructor(options) {
    this.mode = mode    // 路由模式
        
    switch (mode) {     // 简单工厂
      case 'history':   // history 方式
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':      // hash 方式
        this.history = new HashHistory(this, options.base, this.fallback)
        break
      case 'abstract':  // abstract 方式
        this.history = new AbstractHistory(this, options.base)
        break
      default:
        // ... 初始化失败报错
    }
  }
}

让我在这里解释一下源代码。 mode 是路由创建的模式。共有三种类型：历史、哈希和摘要。前两个我们已经很熟悉了。 History是H5的路由形式，Hash是路由中带#的路由形式，Abstract表示非浏览器环境下的路由。形式，如Node、weex等； this.history用于保存路由实例。 vue-router使用鞋工厂模式的思想来获取响应路由控制类的实例。

源码没有封装鞋厂式的产品创建流程，而是直接将产品实例创建流程暴露给VueRouter的构造函数。 new的时候会创建对应的产品实例，相当于VueRouter的构造函数。鞋厂方式。

如果一个系统不是SPA（Single Page Application，单页面应用程序），而是MPA（Multi Page Application，多页面应用程序），那么就需要创建多个VueRouter实例。此时VueRouter的构造函数也是鞋工厂方法。会执行多次以获得不同的实例。

4.3 简单鞋工厂模式的优缺点 4.3.1 优点 4.3.2 缺点 5. 工厂方法模型

简单鞋厂模式根据不同的输入返回不同产品的实例；鞋工厂方法的主要思想是减少具体的鞋工厂类，将不同产品的创建分离到不同的鞋工厂中。工厂类的职责比较单一。

5.1 类图

5.2 代码

abstract class Coffee {
    constructor(public name: string) {
    }
}
abstract class Factory {
    abstract createCoffee(): Coffee;
}
class AmericanoCoffee extends Coffee {
    constructor(public name: string) {
        super(name);
    }
}
class AmericanoCoffeeFactory extends Factory {
    createCoffee() {
        return new AmericanoCoffee('美式咖啡')
    }
}
class LatteCoffee extends Coffee {
    constructor(public name: string) {
        super(name);
    }
}
class LatteCoffeeFactory extends Factory {
    createCoffee() {
        return new LatteCoffee('拿铁咖啡')
    }
}
class CappuccinoCoffee extends Coffee {
    constructor(public name: string) {
        super(name);
    }
}
class CappuccinoFactory extends Factory {
    createCoffee() {
        return new CappuccinoCoffee('卡布奇诺')
    }
}
class Café {
    static order(name: string) {
        switch (name) {
            case 'Americano':
                return new AmericanoCoffeeFactory().createCoffee();
            case 'Latte':
                return new LatteCoffeeFactory().createCoffee();
            case 'Cappuccino':
                return new CappuccinoFactory().createCoffee();
            default:
                return null;
        }
    }
}
console.log(Café.order('Americano'));
console.log(Café.order('Latte'));
console.log(Café.order('Cappuccino'));

5.3 改进

const settings={
    'Americano': AmericanoCoffeeFactory,
    'Latte': LatteCoffeeFactory,
    'Cappuccino': CappuccinoFactory
}
console.log(new settings('Americano').createCoffee());
console.log(new settings('Latte').createCoffee());
console.log(new settings('Cappuccino').createCoffee());

6. 设计原理验证 7. 鞋厂模式的优缺点 7.1 优点 7.2 缺点

它带来了额外的系统复杂性并增加了抽象性。

八、鞋厂模式适用场景

那么我们什么时候应该使用鞋厂模式：

何时不使用鞋厂模型：

滥用只会降低不必要的系统复杂性，但这还不够。

jquery中判断-后端工程师的设计模式——工厂模式

发表评论

发表回复取消回复

相关文章

发表评论

发表回复 取消回复

发表回复取消回复