对avalon的类名操作进行升级
在对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的类名操作进行升级的更多相关文章
- 哈雷监控设备的操作及升级NSG9k6G
哈雷监控设备的操作及升级NSG9k6G 一.下载升级包: http://pan.baidu.com/s/1kTmw9sr 如连接不可以用可以直接私聊我.QQ1841031740 二.升级: 下载完后, ...
- 迷你MVVM框架 avalonjs 学习教程9、类名操作
ms-class是avalon用得最多的几个绑定之一,也正因为如此其功能一直在扩充中.根据时期的不同,分为旧风格与新风格两种. 旧风格是指ms-class-xxx=”expr”,*ms-class-a ...
- CentOS操作系统内核升级
一.升级内核(带aufs模块,记住一定要升级,要不然会出现很多莫名奇怪的问题,建议用yum安装) 1.yum安装带aufs模块的3.10内核(或到这里下载kernel手动安装:http://down. ...
- win10预览版9926升级10049操作步骤
文章转自:豆豆系统收藏备用 win10预览版系统安装的用户非常多,现在最新版本已经到了10049,但是之前很多装了9926版本或者10041版本的同学在通过系统自动更新的时候,且发现,微软官方提供的速 ...
- 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命令 ...
- avalon学习笔记
背景: 刚刚到一家新的公司,我新接手的项目采用的mvvm框架是avalon,当然我以前没有学过angular,但是用过react,所以对于这类框架应该不算陌生.但毕竟是一个新的框架,所以还是先学起来, ...
- 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾
avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...
- 迷你MVVM框架 avalonjs 学习教程8、属性操作
属性操作是DOM操作很大的一块,它包括类名操作,表单元素的value属性操作,元素固有属性的管理,元素自定义属性的管理,某些元素的一些布尔属性的操作.大多数情况下,元素属性的值是字符串类型,我们称之为 ...
- Avalon探索之旅
avalon2是一款基于虚拟DOM与属性劫持的 迷你. 易用. 高性能 的 前端MVVM框架, 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开 ...
随机推荐
- 《免费前端教程不会告诉你这些》知乎LIVE读后感
这个是昨天偶然间在知乎上看到的一个知乎LIVE,答题就是音频在线直播吧,我试听了一下觉得分享的还不错,就买了完整的.主讲人叫方应杭,貌似是个挺牛逼的程序猿,之前没有听过,但这是个典型的科班出生的程序员 ...
- 哈理工OJ 1328
感觉其实可以不水的. //好像是一道特别水的小学数学题.但是我确实看了很久有试了几个样例才懂得.T_T // 先判断是不是素数.如果是素数的话.An-1一定不等于An.否则的话. // 继续找如果有一 ...
- 【javascript基础】之【__lookupSetter__ 跟 __lookupSetter__】
描述: 返回getter setter所定义的函数 语法: obj.__lookupGetter__(sprop) 参数: getter setter中定义的字符串属性 注意:这不是标准的方法,ecm ...
- 对象存储在什么地方(java编程思想)
用引用操作对象.创建了一个引用,需要进行初始化(与事物进行关联),才能正常使用.new将引用于对象进行关联 对象存储到什么地方? 程序运行时,对象是怎么进行放置安排的呢?特别是内存是怎么分配的呢?对这 ...
- 第十课 C++异常简介
异常不是错误,异常是程序中可预料到的另一条执行分支,是可预见的.错误是不可预料的. C++内置了异常处理的语法元素try...catch...,如下: C++通过throw语句抛出异常信息: 上图中t ...
- POJ1651 Multiplication Puzzle【区间DP】
LINK 每次删除一个数,代价是左右两边相邻的数的当前数的积 第一个和最后一个数不能删除 问最后只剩下第一个数的最后一个数的最小代价 思路 很简单的DP 正着考虑没有办法确定两边的数 那么就把每个区间 ...
- 7-31 The World's Richest(25 分)
Forbes magazine publishes every year its list of billionaires based on the annual ranking of the wor ...
- 浅谈闭包(Closure)
一.闭包 好长时间对于闭包都知道与函数和其环境变量有关系,但是一直没有一个清晰的认识.今天查看了一下维基百科,顺便写下来. 二.闭包的定义 在编程语言中,闭包(语义闭包或函数闭包)是指哪些可以将语义范 ...
- Python协程 Gevent Eventlet Greenlet
https://zh.wikipedia.org/zh-cn/%E5%8D%8F%E7%A8%8B 协程可以理解为线程中的微线程,通过手动挂起函数的执行状态,在合适的时机再次激活继续运行,而不需要上下 ...
- 基于http协议的加密传输方案
最近公司需要通过公网与其它平台完成接口对接,但是基于开发时间和其它因素的考虑,本次对接无法采用https协议实现.既然不能用https协议,那就退而求其次采用http协议吧! 那么问题来了!在对接的过 ...