"JavaScript design pattern" Lesson Two magic Magician-simple Factory mode

The so-called simple factory pattern is a way to decide exactly which instance of the class to create, and these instances often have the same interface. Simple Factory mode mainly use a few situations (add personal Understanding) 1, the construction of the object is regular, most of the same only a few different, duplicate code more
2, need to rely on the specific environment to create different instances
3. Handle large numbers of small objects with the same attributes
In particular, we look at a small example: we often encountered in the development process login module, the first to see the following specific requirements: 1, the user entered in the input box does not conform to the specification, you need to define a prompt box: "You entered the content does not conform to the specification, please re-enter"
2, user login Prompt user does not exist, prompting the user "account does not exist, please re-enter, if there is no account, you can click the" Register "button to register", equivalent to a conform prompt box
3, the user login success, prompted the user "login success, please enter your mood today."
For the above requirements, the first equivalent of a prompt box, the second equivalent to the conform box, with the user there is a choice of interaction, the third equivalent of the input conform box, for three kinds of requirements, we can design the following classes to implement the function

  
 

   
  

  
//定义一个提示类
   
  

  
 var LoginTip = function (context) {
   
  

  
 this.context = context;
   
  

  
}
   
  

  

   
  

  
LoginTip.prototype.show = function(){
   
  

  
 //显示提示框
   
  

  
}
   
  

  
//定义一个conform类
   
  

  
var LoginConform = function (context) {
   
  

  
 this.context = this.context;
   
  

  
}
   
  

  

   
  

  
LoginConform.prototype.show = function () {
   
  

  
 //显示确认框
   
  

  
}
   
  

  

   
  

  
//定义一个输入conform框
   
  

  
var LoginInputConform = function(context){
   
  

  
 this.context = context;
   
  

  
}
   
  

  

   
  

  
LoginInputConform.prototype.show = function(){
   
  

  
 //显示输入确认框 
   
  

  
}
  
 

In this way we only need to call the corresponding class and then new one corresponding instance to achieve the function requirement when we use the box. But in the system's team development, other places if has the similar function to call the corresponding method to implement the same function, such code cannot achieve the reuse function, and the other people also need to know your method's implementation then is good to call the corresponding method to implement the corresponding function,   At this point, the corresponding function can be realized by the simple Factory mode. First of all, the other developers in the team need to implement the corresponding function, they just need to know a function method, and then through this function method can create the desired object so it would not be better. This allows us to add a functional approach to achieve the above requirements:

  
 

   
  

  
//定义一个方法 根据用户输入的需求来获得对应的对象
   
  

  
var PopFactory = function(name,context){
   
  

  
 switch (name){
   
  

  
 case ‘tip‘:
   
  

  
 return new LoginTip(context);
   
  

  
 case ‘conform‘:
   
  

  
 return new LoginConform(context);
   
  

  


   
  

  
 case ‘inputConform‘:
   
  

  
 return new LoginInputConform();
   
  

  
 }
   
  

  
}
  
 

So that we can implement just remember popfactory this method, and then pass in the corresponding parameters can be implemented to create the object to be returned
But looking at the three requirements above, we found that there are a lot of the same three classes, so we can abstract them out for common use, and then not similar ones for processing.

  
 

   
  

  
var createPop = function(type,txt){
   
  

  
 var o = new object();
   
  

  
 o.content = txt;
   
  

  
 o.show = function(){
   
  

  
 //显示方法
   
  

  
 }
   
  

  
 if(type == ‘tip‘){
   
  

  
 //提示框差异的部分
   
  

  
 }
   
  

  
 if(type == ‘conform‘){
   
  

  
 //conform差异的部分
   
  

  
 }
   
  

  
 if(type == ‘inputConform‘){
   
  

  
 // inputConform差异的部分
   
  

  
 }
   
  

  
 return o;
   
  

  
}
  
 

From for notes (Wiz)

"JavaScript design pattern" Lesson Two magic Magician-simple Factory mode