在对SVG元素进行类名操作时,发现有一个坑爹的事情,它的className竟然是一个对象,因此报一系列BUG。第一次想到的方法是添加setClasses, getClasses两个更底层的方法。于是相应代码变成:

    var rclass = /\s+/g
function getClasses(node) {
if (node && node.className) {
var classes = node.className//SVG元素是返回一个SVGAnimatedString对象
if ("baseVal" in classes) {
classes = classes.baseVal
}
return classes.split(rclass)
}
return []
}
function setClasses(node, cls) {
if (node && node.nodeType === 1) {
if ("baseVal" in node.className) {
node.setAttribute("class", cls)
} else {
node.className = cls
}
}
} avalon.fn.mix({
hasClass: function(cls) {
var classList = getClasses(this[0])
if (classList.length) {
return (" " + classList.join(" ") + " ").indexOf(" " + cls + " ") > -1
}
return false
},
addClass: function(cls) {
var node = this[0]
if (cls && node && node.nodeType === 1) {
var arr = getClasses(node)
cls.replace(/\S+/g, function(c) {
if (arr.indexOf(c) === -1) {
arr.push(c)
}
})
setClasses(node, arr.join(" "))
}
return this
},
removeClass: function(cls) {
var node = this[0], classList = getClasses(node)
if (cls && classList.length) {
var set = " " + classList.join(" ") + " "
cls.replace(/\S+/g, function(c) {
set = set.replace(" " + c + " ", " ")
})
setClasses(node, set.slice(1, set.length - 1))
}
return this
},
toggleClass: function(value, stateVal) {
var state = stateVal,
className, i = 0
var classNames = value.split(rclass)
var isBool = typeof stateVal === "boolean"
while ((className = classNames[i++])) {
state = isBool ? state : !this.hasClass(className)
this[state ? "addClass" : "removeClass"](className)
}
return this
}
})

这里的麻烦处是,IE6,IE7不能直接通过getAttribute("class")得到className,而SVG如果直接用className又没有用,于是抽取出getClasses方法,赋值也一样。

在高级浏览器,classList在SVG中是没有兼容问题。看avalon.mobile的相关实现是多么简洁:

    "add,remove".replace(rword, function(method) {
avalon.fn[method + "Class"] = function(cls) {
var el = this[0]
//https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/26
if (cls && typeof cls === "string" && el && el.nodeType == 1) {
cls.replace(/\S+/g, function(c) {
el.classList[method](c)
})
}
return this
}
}) avalon.fn.mix({
hasClass: function(cls) {
var el = this[0] || {} //IE10+, chrome8+, firefox3.6+, safari5.1+,opera11.5+支持classList,chrome24+,firefox26+支持classList2.0
return el.nodeType === 1 && el.classList.contains(cls)
},
toggleClass: function(value, stateVal) {
var state = stateVal,
className, i = 0
var classNames = value.split(/\s+/)
var isBool = typeof stateVal === "boolean"
var node = this[0] || {}, classList
if (classList = node.classList) {
while ((className = classNames[i++])) {
state = isBool ? state : !classList.contains(className)
classList[state ? "add" : "remove"](className)
}
}
return this
}
})

因此新的思路来了,为IE6-9等实现一个classList,通过它来屏蔽底层,再在classList的基础上构建avalon的addClass, removeClass, toggleClass,hasClass

    function ClassList(node) {
if (!("classList" in node)) {
node.classList = {
node: node,
toString: function() {
var node = this.node
return (node.hasAttribute ? node.getAttribute("class") || "" : node.className).split(/\s+/).join(" ")
},
contains: function(cls) {
return (" " + this + " ").indexOf(" " + cls + " ") > -1
},
_set: function(cls) {
var node = this.node
if (typeof node.className == "string") {
node.className = cls
} else {
node.setAttribute("class", cls)
}
},
add: function(cls) {
if (!this.contains(cls)) {
this._set(this + " " + cls)
}
},
remove: function(cls) {
this._set((" " + this + " ").replace(" " + cls + " ", " ").trim())
}
}
}
return node.classList
}
"add,remove".replace(rword, function(method) {
avalon.fn[method + "Class"] = function(cls) {
var el = this[0]
//https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/26
if (cls && typeof cls === "string" && el && el.nodeType == 1) {
cls.replace(/\S+/, function(c) {
ClassList(el)[method](c)
})
}
return this
}
})
avalon.fn.mix({
hasClass: function(cls) {
var el = this[0] || {}
return el.nodeType === 1 && ClassList(el).contains(cls)
return false
},
toggleClass: function(value, stateVal) {
var state = stateVal,
className, i = 0
var classNames = value.split(/\s+/)
var isBool = typeof stateVal === "boolean"
while ((className = classNames[i++])) {
state = isBool ? state : !this.hasClass(className)
this[state ? "addClass" : "removeClass"](className)
}
return this
}
})

http://baike.baidu.com/view/957693.htm

对avalon的类名操作进行升级的更多相关文章

  1. 哈雷监控设备的操作及升级NSG9k6G

    哈雷监控设备的操作及升级NSG9k6G 一.下载升级包: http://pan.baidu.com/s/1kTmw9sr 如连接不可以用可以直接私聊我.QQ1841031740 二.升级: 下载完后, ...

  2. 迷你MVVM框架 avalonjs 学习教程9、类名操作

    ms-class是avalon用得最多的几个绑定之一,也正因为如此其功能一直在扩充中.根据时期的不同,分为旧风格与新风格两种. 旧风格是指ms-class-xxx=”expr”,*ms-class-a ...

  3. CentOS操作系统内核升级

    一.升级内核(带aufs模块,记住一定要升级,要不然会出现很多莫名奇怪的问题,建议用yum安装) 1.yum安装带aufs模块的3.10内核(或到这里下载kernel手动安装:http://down. ...

  4. win10预览版9926升级10049操作步骤

    文章转自:豆豆系统收藏备用 win10预览版系统安装的用户非常多,现在最新版本已经到了10049,但是之前很多装了9926版本或者10041版本的同学在通过系统自动更新的时候,且发现,微软官方提供的速 ...

  5. oracle数据库升级dbua操作阻塞解决方法(解决ORA-32004报错)

    操作环境 1.SuSE11sp3操作系统 2.oracle 11.2.0.3版本升级到11.2.0.4版本 问题现象   oracle 11.2.0.3版本升级到11.2.0.4版本时执行dbua命令 ...

  6. avalon学习笔记

    背景: 刚刚到一家新的公司,我新接手的项目采用的mvvm框架是avalon,当然我以前没有学过angular,但是用过react,所以对于这类框架应该不算陌生.但毕竟是一个新的框架,所以还是先学起来, ...

  7. 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾

    avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...

  8. 迷你MVVM框架 avalonjs 学习教程8、属性操作

    属性操作是DOM操作很大的一块,它包括类名操作,表单元素的value属性操作,元素固有属性的管理,元素自定义属性的管理,某些元素的一些布尔属性的操作.大多数情况下,元素属性的值是字符串类型,我们称之为 ...

  9. Avalon探索之旅

    avalon2是一款基于虚拟DOM与属性劫持的 迷你. 易用. 高性能 的 前端MVVM框架, 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开 ...

随机推荐

  1. 002——数组(二)each() list() implode() explode() in_array()

    <?php /** * 数组(二)each() list() implode() explode() in_array() */ /*implode() 把数组拆分成字符串 * explode( ...

  2. mac下安装apache tomcat

    目录 一. 默认版: 二. 自定义下载配置版: ———————————————————————正文—————————————————————————— 一. 默认版: ##一.mac 自带了apach ...

  3. -webkit新属性 image-set和srcset

    响应式图片的作用: 为使用不同分辨率的不同浏览器用户提供适合其浏览环境的图片大小的解决方案. 之前的解决方法是使用@media 但是-webkit新提出的image-set和srcset同样可以解决问 ...

  4. EasyNVR H5无插件RTSP直播方案在Windows server 2012上修复无法定位GetNumaNodeProcessorMaskEx的问题

    今天遇到一个客户在使用EasyNVR无插件安防直播解决方案的时候,在Windows Server 2012上出现一个问题提示: 经过反复的查找,虽然提示上显示问题出在KERNEL32.dll上,但是已 ...

  5. 【Keras学习】Sequential模型

    序贯(Sequential)模型 序贯模型是多个网络层的线性堆叠,也就是“一条路走到黑”. 可以通过向Sequential模型传递一个layer的list来构造该模型: from keras.mode ...

  6. c#TextBox输入框自动提示、自动完成、自动补全功能

    功能概览 相关属性 TextBox.AutoCompleteCustomSource 属性 获取或设置当 TextBox.AutoCompleteSource 属性设置为 [CustomSource] ...

  7. INET_ADDRSTRLEN 和 INET6_ADDRSTRLEN 长度

    在<netinet/in.h>中有这两个宏的定义 #define INET_ADDRSTRLEN 16 #define INET6_ADDRSTRLEN 46 INET_ADDRSTRLE ...

  8. kudu 虚拟机环境使用

      安装 curl -s https://raw.githubusercontent.com/cloudera/kudu-examples/master/demo-vm-setup/bootstrap ...

  9. Trie树学习1

    Trie树.也称为字典数,前缀树,每一个单词的每一个字母依照顺序相应一个节点.有重合的前缀就共享节点. 理想情况下(满的情况).假若全部的单词都是N长,则树共同拥有N层,每层都是26个子节点. 在程序 ...

  10. sorting--codility

    lesson 6: sorting 1. Distinct 2. Triangle 2. MaxProductOfThree 4. NumberOfDiscIntersections lesson 6 ...