首页 > 代码库 > 【Javascript设计模式】第三课 工厂方法模式

【Javascript设计模式】第三课 工厂方法模式

2024-08-15 20:22:27   220人阅读

    在项目开发中经常遇到在网页上显示一些相同的样式但是内容不同的需求，而且这个需求还是动态的，随着需求的变化内容也有可能在不断的变化，对此我们推荐：工厂模式：通过对产品类的抽象使其创建业务主要用于创建多类产品的实例。
    
    比如说有个需求，需要做两个广告，这样我们可以直接定义两个类来实现
  1. var Java = function (content) {
  2.     //将内容备份到content中，以备日后使用
  3.     this.content = content;
  4.     //创建对象时，通过闭包直接执行，讲内容按照需求的模式插入到页面
  5.     (function () {
  6.         var div = document.createElement(‘div‘);
  7.         div.innerHTML = content;
  8.         div.style.color = ‘green‘;
  9.         document.getElementById(‘container‘).appendChild(div);
  10.     })(content);
  11. }
  13. var Php = function (content) {
  14.     //将内容备份到content中，以备日后使用
  15.     this.content = content;
  16.     //创建对象时，通过闭包直接执行，讲内容按照需求的模式插入到页面
  17.     (function () {
  18.         var div = document.createElement(‘div‘);
  19.         div.innerHTML = content;
  20.         div.style.color = ‘blue‘;
  21.         document.getElementById(‘container‘).appendChild(div);
  22.     })(content);
  23. }

上面的需求都有相同类似的模式，这种模式有点类似简单工厂模式，我们可以使用简单工厂模式来实现：
  1. var jobFactory = function (type, content) {
  2.     switch (type){
  3.         case ‘java‘:
  4.             return new Java(content);
  5.         case ‘php‘:
  6.             return new Php(content);
  7.     }
  8. }

这样也是能达到需求的要求的，而且使代码看起来更有层次结构，但是如果此时需求发生了变化，发布的广告的数目增加了，内容和颜色也发生了相应的变化，如果我们依旧使用简单工厂模式的话，就会发现我们需要修改两处，新增一个类然后修改简单工厂模式的方法，这样看来简单工厂模式反而没有简化，变得更加复杂了。这时候就推荐使用工厂模式了。

所谓的工厂模式就是将实际创建对象的工作交由子类来完成，这样这个类就成了抽象类。
  1. //安全模式创建的工厂类
  2. var Factory = function (type, content) {
  3.     if(this instanceof Factory){
  4.         var s =new this[type](content);
  5.         return s;
  6.     }else{
  7.         return new Factory(type,content);
  8.     }
  9. }
  11. //工厂原型中设置创建对象的基类
  12. Factory.prototype = {
  13.     Java : function (content) {
  14.         //将内容备份到content中，以备日后使用
  15.         this.content = content;
  16.         //创建对象时，通过闭包直接执行，讲内容按照需求的模式插入到页面
  17.         (function () {
  18.             var div = document.createElement(‘div‘);
  19.             div.innerHTML = content;
  20.             div.style.color = ‘green‘;
  21.             document.getElementById(‘container‘).appendChild(div);
  22.         })(content);
  23.     },
  24.     Php : function (content) {
  25.         //将内容备份到content中，以备日后使用
  26.         this.content = content;
  27.         //创建对象时，通过闭包直接执行，讲内容按照需求的模式插入到页面
  28.         (function () {
  29.             var div = document.createElement(‘div‘);
  30.             div.innerHTML = content;
  31.             div.style.color = ‘green‘;
  32.             document.getElementById(‘container‘).appendChild(div);
  33.         })(content);
  34.     }
  35. }

这样如果以后有新增类似的需求，我们只需要在Factory的原型中添加对应的基类实现就可以了。这个就是工厂模式的精华所在。


来自为知笔记(Wiz)


【Javascript设计模式】第三课 工厂方法模式


联系
我们