# domdata
**Repository Path**: magicodex/domdata
## Basic Information
- **Project Name**: domdata
- **Description**: domdata 通过简单的方式获取/修改UI，在解决问题的同时力求少产生新问题。在仓库 https://github.com/magicodex/ui-data重写该项目。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 69
- **Forks**: 10
- **Created**: 2017-05-06
- **Last Updated**: 2025-05-09
## Categories & Tags
**Categories**: javascript-toolkits
**Tags**: None
## README
domdata — 用简单的方式获取/修改UI
==================================================
**domdata** 通过简单的方式获取/修改UI，在解决问题的同时力求少产生新问题。特别说明 domdata 不提供大而全的功能，只是提供提升前端开发体验的思路，比如可以通过拓展 domdata 实现 mock 来测试代码或者注册自定义类型来封装常见的 UI 操作。
### 支持的浏览器 ###
```
不支持 IE8 及其更早的版本
```
### 把 domdata 添加到您的网页 ###
domdata 没依赖第三方库，只要在 HTML 的 `
```
### 如何使用 domdata ###
比如有这么一段 HTML 代码
```
```
标签中的 data-name 属性相当于变量名，是 domdata 获取/修改元素的值的标识符。
```
/**
* 获取/设置单个元素的值
*/
// 修改变量名是 "user.name" 的元素的值
_('user.name', '小强');
// 获取变量名是 "user.name" 的元素的值
_('user.name'); => "小强"
/**
* 获取/设置多个元素的值
*/
// 修改变量名是 "user." 开头的元素的值
_('user.*', {'user.name': '小强', 'user.age': 11});
// 获取变量名是 "user." 开头的元素的值
_('user.*'); => {"user.name": "小强", "user.age": "11"}
// 修改变量名是 "user.name"、"user.age" 的元素的值
_(['user.name', 'user.age'], {'user.name': '小强', 'user.age': 11});
// 获取变量名是 "user.name"、"user.age" 的元素的值
_(['user.name', 'user.age']); => {"user.name": "小强", "user.age": "11"}
// 修改所有的元素的值
_('*', {'user.name': '小强', 'user.age': 11});
// 获取所有的元素的值
_('*'); => {"user.name": "小强", "user.age": "11"}
// 修改指定的元素的值，没指定值的元素的值不变
_('user.*', {'user.name': '小强'});
// 修改指定的元素的值，没指定值的元素的值用给定的默认值
_('user.*', {'user.name': '小强'}, null);
```
### 有用的方法 ###
```
// 对象的每个属性名加上前缀 "user."
var user = _.prefix({name: '小强', age: 11}, 'user.');
alert(JSON.stringify(user)); => {"user.name":"小强","user.age":11}
// 对象的每个属性名去掉前缀 "user."
var user = _.unprefix({"user.name":"小强","user.age":11}, 'user.');
alert(JSON.stringify(user)); => {"name":"小强","age":11}
```
### 扩展插件 ###
比如有这么一个 HTML 标签，其中 data-type 属性相当于变量类型
```
```
注册自定义类型的处理方法
```
// "_" 是 "$$data" 的别名，$$data.plugins 是自定义类型的地方，
// 上面标签的 "data-type" 属性值是 "number"， 那么获取/设置
// 这个标签的值，就会调用 $$data.plugins['number'] 中对应的方法，若没有
// 找到对应的方法，会抛出异常。
$$data.plugins['number'] = {
getValue: function(element) {
return Number(element.value);
},
setValue: function(element, value) {
element.value = value;
}
}
// 这时候获取到的返回值的类型是数字
_('user.age'); => 23
```