百度前端技术学院Task21

任务描述：http://ife.baidu.com/task/detail?taskId=21

代码地址：https://github.com/Shirley0926/Baidu.IFE/tree/master/task21

demo地址：http://shirley0926.github.io/Baidu.IFE/task21/task21.html

• 基于任务20，将任务20的代码进行抽象、封装，然后在此基础上实现如图中的两个需求：Tag输入和兴趣爱好输入

关于封装知识的学习：http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

构造函数的继承：http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html

 

　function extend(Child, Parent) {

　　　　var F = function(){};
　　　　F.prototype = Parent.prototype;
　　　　Child.prototype = new F();
　　　　Child.prototype.constructor = Child;
　　　　Child.uber = Parent.prototype;
　　}

　　可以将child实例对象中相同的属性都放到parent当中，那么就可以节省内存。

非构造函数的继承：http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html

1.object方法 2.浅拷贝（基本类型） 3.深拷贝（包括数组对象的处理）

针对这个任务，上下两部分都要包含的功能是获取标签（具体实现方法不一样）但是都应该是有一个strArr存放标签；标签不能有重复的，即strArr中的数据不可以是重复的；每一个标签都要trim处理；标签最多是10个，多余10个前面开始删除；

不同的点在于获得strArr的方法不同，标签有删除方法。

基本的想法是，创建一个构造函数对象，其中有strArr这个数组，这个数组中的数字的渲染方式。然后上下分别用构造函数创建两个对象，再将不同的内容放置在这两个对象中实现。

中间有一个小bug：

在定义keyup事件的时候，开始是e.keyCode==32，然后就会触发后面的事件后来发现有问题，因为在中文输入的时候，空格是避免不了的，但是这个词组可能还没有输完，因此借鉴了别人的代码，将其改成了正则表达式的判断方式。

RegExp有一个方法test(),参数是一个字符串，若果包含正则表达式的一个匹配结果就返回true。因此输入的判断就成了：

e.keyCode==13||(/(，| |\,)$/.test($("taginput").value))

　　array.prototype.map()和array.prototype.filter()都会自动向其中的函数传递三个参数，每一个数组的值，数组的索引号以及调用的这个数组；

转载于:https://www.cnblogs.com/shirleyyang-fe/p/5701625.html