任务描述: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()都会自动向其中的函数传递三个参数,每一个数组的值,数组的索引号以及调用的这个数组;