JavaScript设计模式–简单工厂模式实例分析【XHR工厂案例】

JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】

什么是简单工厂模式？

简单工厂是一种创建型模式，它提供了一种创建对象的最佳方式。在简单工厂模式下，对象创建实例化不是由客户端代码直接完成，而是由工厂类负责创建对象实例化。

XHR工厂案例

在Web开发中，我们常常使用XHR对象来进行ajax异步请求，那么我们如何使用简单工厂模式来简化创建XHR对象的流程呢？下面我们以XHR工厂案例进行说明。

// XHR工厂对象
var XHRFactory = {
  createXHR: function() {
    var xhr;
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
  }
};

// 客户端调用工厂创建 XHR 对象
var xhr = XHRFactory.createXHR();

// 在客户端代码中直接使用 xhr 发送 ajax 请求
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 && xhr.status == 200) {
      console.log(xhr.responseText);
  }
};
xhr.send(null);

在XHR工厂案例中，我们封装了XHR对象的实例化过程，使得客户端代码只需调用工厂的 createXHR() 方法就可以获取XHR对象实例，无需再关心兼容性问题以及实例化的细节。

示例说明1

通过XHR工厂案例，我们可以看到通过工厂对象封装创建XHR对象的过程，将对象创建和具体实现进行了分离，使得客户端代码只需通过工厂方法间接地获取对象实例，提高了代码的复用性和可维护性。同时，对于开发者而言，在创建复杂的对象时也可以参考简单工厂模式，将对象创建的具体实现交给工厂对象来完成。

示例说明2

除了XHR对象，我们还可以使用简单工厂模式来创建其他对象，例如Vue.js中的组件就是通过工厂方法Vue.extend()来完成的。在Vue.js中，我们可以通过继承一份Vue实例来创建一个子组件，同时将这个子组件注册到全局的Vue对象上，供其他组件使用。下面是一个Vue.js组件的示例代码：

// 组件工厂方法
Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function() {
    return {
      message: 'Hello Vue.js!'
    };
  }
});

// 注册组件到全局Vue对象中
Vue.component('my-component', Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function() {
    return {
      message: 'Hello Vue.js!'
    };
  }
}));

在以上示例代码中，我们使用了Vue.extend()方法来创建一个Vue.js组件，然后将这个组件注册到全局的Vue对象中，供其他组件使用。通过简单工厂模式，我们可以封装组件创建的具体实现，并且在需要使用时直接调用工厂方法获取组件实例，提高代码的复用性和可维护性。