task21任务总结

这个任务是前几个任务的综合，而且还需要面向对象的编程。主要是封装和抽象。

任务描述：http://ife.baidu.com/2016/task/detail?taskId=21
代码：https://github.com/sunyueru/IFE/tree/master/task21
demo：https://sunyueru.github.io/IFE/task21/task21.html
主要的注意点：

1. 大体思路总结
2. 构造函数和原型模式的使用

3. updateTags和updateHobby函数的总结

   1、大体思路
   首先使用构造函数模式和原型模式创建一个对象。然后实例化对象。最后创建两个功能函数。面向对象的相关知识我也不是很熟练，之后还需要继续多练习总结。
   2、构造函数和原型模式结合。

// 组合使用构造函数模式和原型模式，js高级程序设计159页
// 属性和私有方法在构造函数中定义，方法在原型中定义
// 这里draw函数为什么放在构造函数中定义，还不是特别清楚，参考了别人的代码
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();
}

一般来说，属性和私有方法可以定义在构造函数中，其他的方法可以在原型中定义。

// 创造实例对象
var tagsObj=new createContainerObj(tagContainer);
var hobbyObj=new createContainerObj(hobbyContainer);

看了js高级程序设计的相关章节，对理论知识有所了解了，但是遇到实际问题的时候如何封装对象，这些还需要多思考。对象中应该包含哪些属性，哪些方法。使用构造函数还是工厂模式还是什么的，这些都是要具体问题具体分析的。
3. updateTags和updateHobby函数的总结
一个是对标签输入的操作，一个是对兴趣输入的操作。
首先分析updateTags函数：
需要完成的功能是输入相关的字符或者是回车开始执行操作，
还是使用一个数组，执行相应的操作，最后使用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)){
                // 队列里面没有才push，避免重复
                tagsObj.push(data[i]);
            }
        }
        if(tagsObj.queue.length>10){
            tagsObj.shift();
        }
        tagsObj.draw();
        str="";
     }
}

相关注意点：

• 如何实现要求遇到用户输入空格，逗号，回车时，都自动把当前输入的内容作为一个tag放在输入框下面。
  （即在最外层写一个if语句先判断）
• 如何实现Tag不能有重复的，遇到重复输入的Tag，自动忽视。
  （即先判断数组中是否含有该元素，没有再push）
• 通过tagObj调用定义在原型上的push和shift函数。

接下来分析updateHobby函数。和上面的函数大体类似。
需要实现的是遇到相应字符拆分，这个之前也说过这么实现了，就是用shift。
这里使用了forEach替代了for循环。可以注意一下。forEach里面是一个函数。

function updateHobby(){
    //alert("updateHobby");
    var str=hobbyInput.value;
    var data=str.trim().split(/[,， ；;\t\r\n]/);
    // 也可以和上面一样用for循环吧。
    data.forEach(function(e){
        if(hobbyObj.queue.indexOf(e)===-1){
            hobbyObj.push(e);
            if(hobbyObj.queue.length>10){
                hobbyObj.shift();
            }
        }
    })
    hobbyObj.draw();
    str="";
}

最后是如何实现滑过出现删除字体，点击实现删除的功能。
滑过出现删除我是写在css里面的，其实最好也都写在js里面。

#tagContainer span:hover{
            background-color: red;
            cursor: pointer;
        }
        #tagContainer span:hover:before{
            content:"点击删除";
        }

点击删除：

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

这里使用了事件代理，之前接触过一点点。最近打算在把js高级那本书的相关内容看一下。主要是e.target和e.target.nodeName的使用。关于这个知识点之后可能再追加。