2014年9月17日星期三

CGGeometry.h 文件详解 - 小郝的伟业

本邮件内容由第三方提供,如果您不想继续收到该邮件,可 点此退订
CGGeometry.h 文件详解 - 小郝的伟业  阅读原文»

【摘要】这些是在CGGeometry.h里的 CGPoint、CGSize、CGRect、CGRectEdge实际上都是结构体struct CGPoint { CGFloat x; CGFloat y;};typedef struct CGPoint CGPoint;struct CGSize { CGFl... 阅读全文

迷你MVVM框架 avalonjs 学习教程8、属性操作 - 司徒正美  阅读原文»

属性操作是DOM操作很大的一块,它包括类名操作,表单元素的value属性操作,元素固有属性的管理,元素自定义属性的管理,某些元素的一些布尔属性的操作。大多数情况下,元素属性的值是字符串类型,我们称之为字符串属性,但有一些属性的是布尔,也存在是数字类型、节点引用的情况。当前jQuery处理它们就是搞了N个钩子对象,才摆平它们。avalon为了收拾它们也设置N多绑定,其中类名部分交由ms-classms-hoverms-active处理,这些其他章节介绍;表单元素的value属性之前也说过,可以用ms-value、*ms-duplex*;剩下还有ms-checkedms-selectedms-readonlyms-disabledms-enabledms-valuems-titlems-altms-hrefms-srcms-attr-☆ 11个。其他前五个为布尔属性绑定,后五个为字符串属性绑定,最后一个为通用属性绑定。不过 后来, 随着如何判定固有属性的技术的发掘,它们最终全部由ms-attr-☆实现。

在IE下,需要对属性进行区分,如果是固有属性使用elem[name] = value赋值;是自定义属性,则直接使用elem.setAttribute(name, value);标准浏览器没有这么麻烦,全部使用elem.setAttribute(name, value),比如elem.setAttribute("value", "xxx")会自动同步到elee.value = "xxx"。

下面是其源码:



if (boolMap[attrName]) {
var bool = boolMap[attrName]
if (typeof elem === "boolean") {
return elem = !!val //处理布尔属性
}
}
if (!W3C && propMap[attrName]) {//旧式IE下需要进行名字映射
attrName = propMap[attrName]
var isInnate = true
}
if (val === false) || (val === null) || (val === void 0) {
return elem.removeAttribute(attrName)
}
if (window.VBArray && !isInnate) {
//IE下需要区分固有属性与自定义属性
//固有属性及VML元素必须使用中括号方式赋值
//SVG元素必须用setAttribute赋值
if (isVML(elem)) {
isInnate = true
} else if(window.SVGElement && !(elem instanceof SVGElement)) {
var attrs = elem.attributes || {}
var attr = attrs[attrName]
isInnate = attr ? attr.expando === false : attr === null
}
}
if (isInnate) {
elem[attrName] = val
} else {
elem.setAttribute(attrName, val)
}

有关如何判定自定义属性或固有属性,及其详细推导过程,可以看我的书《javascript框架设计》的第十章。

<!DOCTYPE html>
<html>
<head>
<title>ms-attr-*</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>

<script>
avalon.define("ms-attr-*", function(vm) {
vm.aaa = true
vm.click = function() {
vm.aaa = !vm.aaa
}
vm.bbb = "@@@"
vm.ccc = "&&&"
vm.active = "active"
})

</script>
<style>
.active {
background: goldenrod;
}
.readonly{
border:1px solid blueviolet;
}
</style>

</head>
<body>
<form method="get" action="aaa.html" ms-controller="ms-attr-*">
<input ms-enabled="aaa" name="a1" value="12345"/>
<input ms-disabled="aaa" name="a2" value="67890"/>
<input ms-readonly="aaa" name="a3" ms-class="readonly: aaa" value="readonly" />

<input ms-checked="aaa" type="checkbox" value="checkbox" name="a4"/>
<select name="a5">
<option>222</option>
<option ms-selected="aaa">555</option>
</select>
<p>
<input ms-attr-value="其他内容 {{ccc}}" name="a6" value="改"/>
<input ms-attr-value="'其他内容 '+ccc" name="a7" value="改" />
<input ms-value="其他内容 {{ccc}}" name="a8" value="改"/>
</p>
<button type="button" ms-click="click" ms-attr-class="active">
点我
</button>
<input type="submit" value="提交" />
<svg width="100" height="100">
<circle ms-attr-cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</form>
</body>
</html>

ms-enabled是ms-disabled的相反面,它根据表达式的值是否为真移除disabled属性。

avalon的ms-attr绑定无比强大,不用像jQuery那么需要用户判定是使用attr还是prop方法,使用自行处理。


本文链接:迷你MVVM框架 avalonjs 学习教程8、属性操作,转载请注明。

阅读更多内容

没有评论:

发表评论