温习classList api
有道题是一个removeClass的功能,代码里是正则分隔了传入的name,根据name的个数,循环移除掉,让寻找bug。。看了了这几行代码,首先想到的是我会如何去优化。 如果看代码一两分钟就能找到公司js框架中的bug,那也太。。。
改为如何优化算是不错的面试题,
first,去掉正则表达式,使用split字符串内置方法分隔,
second,支持html5的浏览器使用classList api,
第三,类似jq,hasClass、remove、togglle都是用了字符串内置方法,indexOf、replace、字符串相加。
周末试着coding。代码如下
var className = (function() {
//设置的方法list
var fnName = 'add,remove,contains,toggle'.split(',');
var _trim = function(str) {
return str.trim ? str.trim() : str.replace(/(^\s*)|(\s*$)/g, "");
}; //不支持H5的classList,使用自定义方法实现
var cClassList = {
add: function(el, name) {
if (!this.contains(el, name)) {
el.className = _trim(el.className + ' ' + name + ' ');
}
},
remove: function(el, name) {
if (this.contains(el, name)) {
var _class = (' ' + el.className + ' ').replace(' ' + name + ' ', ' ');
el.className = _class ? _trim(_class) : '';
}
},
contains: function(el, name) {
if (el && el.nodeType == 1 && (" " + el.className + " ").indexOf(" " + name + " ") >= 0) {
return true;
}
return false;
},
toggle: function(el, name) {
if (this.contains(el, name)) {
this.remove(el, name);
} else {
this.add(el, name);
}
}
}; var _classList = {};
/*
* 如果name为多个(空格分隔),那么循环设置,反之调用classList设置
* @param {HtmlNode} type
* @param {String} name
* @returns {undefined}
*/
var _eachDo = function(type, name) {
if (typeof name === 'string' && name.length) {
name = _trim(name).split(' ');
var len = name.length;
if (len === 1) {
if (this.classList) {//使用h5的classList,非hasClass 则return undefined
return this.classList[type](name[0]);
} else {
return cClassList[type](this, name);//使用自定义设置
}
} else {
var Return = true;
for (var j = 0; j < len; j++) {
if (_eachDo.call(this, type, name[j]) == false) {
Return = false;
}
;
}
return Return;
}
}
};
//添加上 add、toggle、contains、remove方法
for (var i = 0; i < fnName.length; i++) {
(function(key) {
_classList[key] = function(el, name) {
//如果传入的className是个function,那么得到计算结果
if (typeof name === 'function') {
name = name.call(this);
}
return _eachDo.call(el, key, name);
};
})(fnName[i]);
}
//hasClass
_classList['has'] = _classList.contains;
return _classList;
})(); var div1 = document.getElementById('div1');
className.add(div1, 'asd fv');
alert(div1.className)
className.remove(div1, 'asd');
alert(div1.className)
className.toggle(div1, 'asd sd');
alert(div1.className)
className.add(div1, 'asd sd fv');
alert(div1.className)
alert(className.has(div1, 'asd fv'))
温习classList api的更多相关文章
- [Javascript] Manipulate the DOM with the classList API
Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than u ...
- HTML5 classList API接口
原文地址:HTML5 classList API 原文日期: 2010年07月13日 翻译日期: 2013年08月23日 当我陷入JavaScrip和JavaScript类库框架之中时,我总是有种希望 ...
- HTML5 classList API
Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: Whe ...
- 使用 classList API
一.classList API 是什么 属于 DOM API,HTML5 引入,用来操作 HTML 标签的 class 属性值. classList 属性是一个只读的类数组对象,"实时&qu ...
- [转]HTML5 classList API
Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: Whe ...
- HTML5的classList API优化对样式名className的操作
//添加一个class elem.classList.add(classname); //删除一个class elem.classList.remove(classname); //判断一个class ...
- element.dataset API
不久之前我向大家展示了非常有用的classList API,它是一种HTML5里提供的原生的对页面元素的CSS类进行增.删改的接口,完全可以替代jQuery里的那些CSS类操作方法.而另外一个非常有用 ...
- H5新增属性classList
H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...
- h5的classList对象
H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...
随机推荐
- 深入理解C++中的Const,Mutable以及Volatile
我一直认为const表示一个常量,常量就是一个无法被修改的值,但是没有深入理解const的实现,甚至不知道mutable和volatile的存在,最近在书中看到了这一部分的知识,所以本文将详细解析这几 ...
- appium+python自动化☞appium python api大全
整理了一些常用的appium python api,供学习使用...
- CentOS 6.8 安装JDK8
JDK安装 1.查看环境是否有默认jdk,输入命令: rpm -qa | grep jdk 如果有默认jdk,可以使用 yum remove 删除 2.进入系统根目录,创建developer文件夹 3 ...
- 搭建RTSP服务器时nginx的nginx.conf文件配置
worker_processes 1; events { worker_connections 1024;} http { include mime.types; default_type appli ...
- Spark之编程模型RDD
前言:Spark编程模型两个主要抽象,一个是弹性分布式数据集RDD,它是一种特殊集合,支持多种数据源,可支持并行计算,可缓存:另一个是两种共享变量,支持并行计算的广播变量和累加器. 1.RDD介绍 S ...
- Jenkins 自动化测试
学习 Jenkins 自动化测试的系列文章 Robot Framework 概念 Robot Framework 安装 Pycharm + Robot Framework 环境搭建 Robot Fra ...
- springMVC 第一章
springMVC 第一章 一.分层结构的项目 组成方式: 表示层:页面,Servlet 业务层:业务逻辑类(service) 持久层:与数据库交互的类(dao) 程序执行的过程:表示层->se ...
- POJ 3579 Median 二分加判断
Median Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12453 Accepted: 4357 Descripti ...
- python打印图形大全(详解)
,): shixin=chr() print(shixin) -------------------结果:2) for i in range(0,10): shixin=chr(9679) print ...
- eclipse技巧-快捷键
ctrl + 1,快速修复 ctrl + d, 快捷删除行 shift + Enter,快速移动光标到下一行 ctrl + F11,运行代码 alt + ↑/↓,快速移动行 ctrl + alt + ...