迷你MVVM框架 avalonjs 学习教程8、属性操作
属性操作是DOM操作很大的一块,它包括类名操作,表单元素的value属性操作,元素固有属性的管理,元素自定义属性的管理,某些元素的一些布尔属性的操作。大多数情况下,元素属性的值是字符串类型,我们称之为字符串属性,但有一些属性的是布尔,也存在是数字类型、节点引用的情况。当前jQuery处理它们就是搞了N个钩子对象,才摆平它们。avalon为了收拾它们也设置N多绑定,其中类名部分交由ms-class、 ms-hover、 ms-active处理,这些其他章节介绍;表单元素的value属性之前也说过,可以用ms-value、ms-duplex;剩下还有ms-checked、 ms-selected、 ms-readonly、 ms-disabled、 ms-enabled、 ms-value、 ms-title、 ms-alt、 ms-href、 ms-src、 ms-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[bool] === "boolean") {
return elem[bool] = !!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、属性操作的更多相关文章
- 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制
在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...
- 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾
avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...
- 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC
大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...
- 迷你MVVM框架 avalonjs 学习教程1、引入avalon
avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...
- 迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信
avalon的ViewModel对象从其内部EventManager里继承了三个方法,$watch.$unwatch.$fire三个方法,它们就是我们本节的主题. 词如其名,非常直白,一看就知道做什么 ...
- 迷你MVVM框架 avalonjs 学习教程20、路由系统
SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...
- 迷你MVVM框架 avalonjs 学习教程11、循环操作
avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...
- 迷你MVVM框架 avalonjs 学习教程4、数据填充
MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...
- 迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域
一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery ...
随机推荐
- SGU 132. Another Chocolate Maniac 状压dp 难度:1
132. Another Chocolate Maniac time limit per test: 0.25 sec. memory limit per test: 4096 KB Bob real ...
- 如何从MTK机器的NVRAM中获取WIFI mac地址
在MTK的机器中,如果不用特定的工具烧写MAC地址,在开机后打开WIFI后会显示: "NVRAM WARNING: Err=0x10" 这就是没有烧写mac地址的原因,所以每次打开 ...
- IOS NSBundle的使用,注意mainBundle和Custom Bundle的区别
1.[NSBundle mainBundle],文件夹其实是Group,如左侧的树形文件管理器 Build之后,文件直接就复制到了根目录下,于是读取的方法,应该是这样: NSString *earth ...
- 小谈python装饰器及numba的基本使用
1. 预热知识 要理解python中的装饰器,就要明白在python中,函数是一种特殊类型的变量,可以作为参数传递给函数,也可以作为返回值返回.比如下面的代码,就是 str_1 作为参数传递给 str ...
- Jmeter-Critical Section Controller(临界区控制器)
The Critical Section Controller ensures that its children elements (samplers/controllers, etc.) will ...
- BZOJ3211: 花神游历各国(线段树)
3211: 花神游历各国 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 5692 Solved: 2114[Submit][Status][Discu ...
- CH3201 Hankson的趣味题
题意 3201 Hankson的趣味题 0x30「数学知识」例题 描述 Hanks博士是BT(Bio-Tech,生物技术)领域的知名专家,他的儿子名叫Hankson.现在,刚刚放学回家的Hankson ...
- 【转】在Visual Studio中怎样快速添加代码段
原文网址:http://blog.csdn.net/yl2isoft/article/details/9735527 以前一直只知道,键入prop,再按两次tab键,会生成自动属性代码. 今天闲着无事 ...
- Hive之 hive与rdbms对比
对比图 总结: Hive并非为联机事务处理而设计,Hive并不提供实时的查询和基于行级的数据更新操作.Hive是建立在Hadoop之上的数据仓库软件工具,它提供了一系列的工具,帮助用户对大规模的数据进 ...
- APN与VPDN的主要区别
VPDN APN 安全性 二次认证,加密 一次认证,没有加密 企业成本 高 低 对GGSN要求 可接受动态配置LNS参数信息,对GGSN性能影响小. 静态配置GRE隧道参数,性能影响较大,部分厂家对G ...