码迷,mamicode.com
首页 > 其他好文 > 详细

百度前端技术学院Task21

时间:2016-07-24 22:27:35      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

任务描述:

代码地址:

demo地址:

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

关于封装知识的学习:

构造函数的继承:

 
 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当中,那么就可以节省内存。

非构造函数的继承:

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

百度前端技术学院Task21

标签:

原文地址:http://www.cnblogs.com/shirleyyang-fe/p/5701625.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!