"javascript Design pattern" Lesson Three factory method mode

In the development of the project often encountered on the Web page to display some of the same style but the content of different requirements, and this demand is still dynamic, as the changes in the requirements of the content may also be changing, we recommend: Factory mode: by abstracting the product class, it creates a business that is primarily used to create instances of Multi-Class Products.
For example, there is a need to do two ads, so that we can directly define two classes to achieve

  
 

   
  

  
var Java = function (content) {
   
  

  
 //将内容备份到content中，以备日后使用
   
  

  
 this.content = content;
   
  

  
 //创建对象时，通过闭包直接执行，讲内容按照需求的模式插入到页面
   
  

  
 (function () {
   
  

  
 var div = document.createElement(‘div‘);
   
  

  
 div.innerHTML = content;
   
  

  
 div.style.color = ‘green‘;
   
  

  
 document.getElementById(‘container‘).appendChild(div);
   
  

  
 })(content);
   
  

  
}
   
  

  

   
  

  
var Php = function (content) {
   
  

  
 //将内容备份到content中，以备日后使用
   
  

  
 this.content = content;
   
  

  
 //创建对象时，通过闭包直接执行，讲内容按照需求的模式插入到页面
   
  

  
 (function () {
   
  

  
 var div = document.createElement(‘div‘);
   
  

  
 div.innerHTML = content;
   
  

  
 div.style.color = ‘blue‘;
   
  

  
 document.getElementById(‘container‘).appendChild(div);
   
  

  
 })(content);
   
  

  
}
  
 

The requirements above have the same pattern, which is somewhat similar to the simple factory pattern, and we can use the Simple factory model to Achieve:

  
 

   
  

  
var jobFactory = function (type, content) {
   
  

  
 switch (type){
   
  

  
 case ‘java‘:
   
  

  
 return new Java(content);
   
  

  
 case ‘php‘:
   
  

  
 return new Php(content);
   
  

  
 }
   
  

  
}
  
 

This is also required to meet the requirements, but also to make the code look more hierarchical structure, but if the demand has changed, the number of published ads increased, the content and color has changed correspondingly, if we still use the simple factory model, we will find that we need to modify two places, Add a new class and then modify the simple Factory mode method, so that the simple Factory mode is not simplified and becomes more complex. It is recommended to use the factory Mode.
The so-called factory pattern is that the work of actually creating objects is left to the subclasses, so that the class becomes an abstract class.

  
 

   
  

  
//安全模式创建的工厂类
   
  

  
var Factory = function (type, content) {
   
  

  
 if(this instanceof Factory){
   
  

  
 var s =new this[type](content);
   
  

  
 return s;
   
  

  
 }else{
   
  

  
 return new Factory(type,content);
   
  

  
 }
   
  

  
}
   
  

  

   
  

  
//工厂原型中设置创建对象的基类
   
  

  
Factory.prototype = {
   
  

  
 Java : function (content) {
   
  

  
 //将内容备份到content中，以备日后使用
   
  

  
 this.content = content;
   
  

  
 //创建对象时，通过闭包直接执行，讲内容按照需求的模式插入到页面
   
  

  
 (function () {
   
  

  
 var div = document.createElement(‘div‘);
   
  

  
 div.innerHTML = content;
   
  

  
 div.style.color = ‘green‘;
   
  

  
 document.getElementById(‘container‘).appendChild(div);
   
  

  
 })(content);
   
  

  
 },
   
  

  
 Php : function (content) {
   
  

  
 //将内容备份到content中，以备日后使用
   
  

  
 this.content = content;
   
  

  
 //创建对象时，通过闭包直接执行，讲内容按照需求的模式插入到页面
   
  

  
 (function () {
   
  

  
 var div = document.createElement(‘div‘);
   
  

  
 div.innerHTML = content;
   
  

  
 div.style.color = ‘green‘;
   
  

  
 document.getElementById(‘container‘).appendChild(div);
   
  

  
 })(content);
   
  

  
 }
   
  

  
}
  
 

So if there is a new similar requirement in the future, we just need to add the corresponding base class implementation in the factory Prototype. This is the essence of the factory model.

From for Notes (Wiz)

"javascript Design pattern" Lesson Three factory method mode