This task is a synthesis of the previous tasks, and also requires object-oriented programming. Mainly encapsulation and abstraction.

Task description: http://ife.baidu.com/2016/task/detail?taskId=21
Code: https://github.com/sunyueru/IFE/tree/master/task21
demo: https://sunyueru.github.io/IFE/task21/task21.html
The main points of attention are:

1. Summary of general ideas
2. Use of constructors and prototype patterns

3. Summary of updateTags and updateHobby functions

   1. General Ideas
   First, an object is created using the constructor pattern and the prototype pattern. Then instantiate the object. Finally, two function functions are created. I am not very proficient in object-oriented knowledge, but I need to continue to practice and summarize.
   2. Combination of constructor and prototype.

// Combining constructor pattern with prototype pattern, 159 pages of js advanced programming
// Attributes and private methods are defined in constructors, and methods are defined in prototypes.
// Why draw functions are defined in constructors here is not particularly clear, referring to other people's code.
function createContainerObj(Container){
    this.queue=[];
    this.draw=function(){
        var innerHTML="";
        this.queue.forEach(function(e){
            innerHTML+='<span>'+e+'</span>';
        });
       Container.innerHTML=innerHTML;
    }
}
createContainerObj.prototype.push=function(str){
    this.queue.push(str);
    this.draw();
}
createContainerObj.prototype.shift=function(){
    this.queue.shift();
    this.draw();
}

Generally speaking, attributes and private methods can be defined in constructors, while other methods can be defined in prototypes.

// Create instance objects
var tagsObj=new createContainerObj(tagContainer);
var hobbyObj=new createContainerObj(hobbyContainer);

After reading the relevant chapters of js advanced programming, we know some theoretical knowledge, but how to encapsulate objects when we encounter practical problems needs more thinking. What attributes and methods should be included in the object? The use of constructors or factory patterns or what, these are specific issues to be analyzed.
3. Summary of updateTags and updateHobby functions
One is the operation of label input, the other is the operation of interest input.
Firstly, the updateTags function is analyzed.
The function that needs to be completed is to input the relevant characters or to return to the train and start the operation.
Or use an array, perform the corresponding operations, and finally draw.

function updateTags(){
     var str=tagInput.value;
     if((/[, ;\n,\s]/.test(str))||event.keyCode==13){
        // var data=str.trim().split(/,|，|,| |\t|\r|\n/);
        var data=str.trim().split(/[,， ；;\t\r\n]/);
        //alert(data);
        for(var i=0;i<data.length;i++){
            if(tagsObj.queue.indexOf(data[i]===-1)){
                // No push in the queue to avoid duplication
                tagsObj.push(data[i]);
            }
        }
        if(tagsObj.queue.length>10){
            tagsObj.shift();
        }
        tagsObj.draw();
        str="";
     }
}

Relevant points of attention:

• How to achieve the requirement that when users enter spaces, commas and return, they automatically put the current input content as a tag under the input box.
  (i.e. write an if statement at the outermost level to judge first)
• How to implement Tag without duplication, when it encounters duplicate input Tag, it will be ignored automatically.
  (that is, first determine whether the array contains the element, no push)
• The push and shift functions defined on the prototype are invoked by tagObj.

Next, we analyze the updateHobby function. It's similar to the function above.
What we need to achieve is to encounter the corresponding character splitting, which has been said before, is to use shift.
ForEach is used instead of the for loop. You may pay attention to it. There's a function in forEach.

function updateHobby(){
    //alert("updateHobby");
    var str=hobbyInput.value;
    var data=str.trim().split(/[,， ；;\t\r\n]/);
    // You can also use the for loop as above.
    data.forEach(function(e){
        if(hobbyObj.queue.indexOf(e)===-1){
            hobbyObj.push(e);
            if(hobbyObj.queue.length>10){
                hobbyObj.shift();
            }
        }
    })
    hobbyObj.draw();
    str="";
}

Finally, how to realize the function of skipping over the deleted font and clicking to delete it?
Skip, delete, I wrote in css, in fact, the best is also written in js.

#tagContainer span:hover{
            background-color: red;
            cursor: pointer;
        }
        #tagContainer span:hover:before{
            content:"Click Delete";
        }

Click Delete:

addHandler(tagContainer,"click",function(e){
          if(e.target && e.target.nodeName == "SPAN") { 
          tagContainer.removeChild(e.target);
    }
    })

Event proxy is used here, a little bit of it has been touched before. Recently, I'm going to take a look at the relevant contents of the advanced js book. Mainly the use of e.target and e.target.nodeName. This knowledge point may be added later.