Conceptual Interpretation

Diagram Builder Mode

Effect

• Create a complex object step by step.
• Decouple the packaging process and the components created.
• You don't need to care how the components are assembled.

Matters needing attention

• A stable algorithm to support
• Processing process is exposed

Code Practice

• code implementation

    //$.ajax() belongs to the constructor mode, where the basic parameters are its builder and.Ajax is its commander.
    $.ajax({
        url:'',
        method:"",
        success:function(){
        },
    })
  
  

• Don't feel clear yet?

  Let's try another scenario, like when we want to create a class of candidates who belong first to humans, then add different attributes, which we refine into different builders (classes) to unify.

  //The method that individualizes each instantiated object requires this declaration
  var Human=function(param){
   this.skill=param&&param.skill||'secrecy';
   this.hobby=param&&param.hobby||'secrecy';
  }
  //Human prototypes, common attributes and method suggestions are written in the prototype
  Human.prototype={
   getSkill:function(){
       return this.skill; 
   },
   getHobby:function(){
       return this.hobby;
   }
   
  }
  var Named=function(name){
   var that=this;
   //constructor
   (function(name,that){
       that.wholeName=name;
       if(name.indexOf(" ")>-1){
           that.firstname=name.slice(0,name.indexOf(" "));
           that.lastname=name.slice(name.indexOf(" "));
       }
   })(name,that)
  }
  //Instantiate Job Class: Expand Knowledge Points:
  //1 You need to define that to avoid confusion with this; 2 switch followed by no colon 
  //break in 3 switch is necessary for subsequent statements not to be executed after the statement meets the criteria 
  //4 Recommend writing default in switch to handle default values for exceptions
  
  var Work=function(work){
   var that=this;
   //constructor
   //The constructor sets the corresponding position and description by passing in the position characteristics
   (function(work,that){
       switch(work){
           case 'code':that.work='Engineer';
           that.workDesc='Immerse in programming every day';
           break;
           case 'ui':that.work='Designer';
           that.workDesc='Design is an art';
           break;
           default:that.work=work;
           that.workDesc="I don't know your job description yet";
       }
   })(work,that)
  }
  Work.prototype.changeWork=function(work){
   this.work=work;
  }
  Work.prototype.changeDesc=function(desc){
   this.workDesc=desc;
  }
  
  //Create a class for candidates
  function Person=function(name,work){
   var _person=new Human();
   _person.name=new Named(name);
   _person.work=new Work(work);
   return _person;
   
  }
  var xiaoli=new Person('xiao li','code');
  // Detecting attributes and methods
  console.log(xiaoli.skill);
  console.log(xiaoli.work.work);
  xiaoli.work.changeWork("ui");
  console.log(xiaoli.work.work);
  console.log(xiaoli.firstname);
  

Expand

• Differences from engineering models
  1. It can be distinguished from code samples that factory mode gives the product name and gives the result directly, while builder mode requires the user to participate in the construction process and specify parameters.
  2. The construction process of the builder model is more complex than that of the factory, and is done step by step in modules, which may require a small class or constructor for each module part.