# ui-data

**Repository Path**: magicodex/ui-data

## Basic Information

- **Project Name**: ui-data
- **Description**: 提供简洁的方式读取/修改 UI 绑定的数据。(不定期从 https://github.com/magicodex/ui-data 同步代码)
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-19
- **Last Updated**: 2024-04-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ui-data

## 安装依赖
```
npm install ui-data
```

## 添加依赖

ui-data 没依赖第三方库，只要在 HTML 的 <script> 标签中引用它:
```
<script src="ui-data.js"></script>
```

## 代码示例

比如有这么一段 HTML 代码
```
<!-- 姓名输入框 -->
<input data-name="user.name" type="text" />
<!-- 密码输入框 -->
<input data-name="user.password" type="password" />
```
*标签中的 data-name 属性相当于变量名，是获取/修改元素的值的标识符。*

```
var model = uiData.model(document);

//
// 获取/修改指定的单个元素的值
//

// 修改变量名是 "user.name" 的元素的值
model.setData('user.name', '张三');

// 获取变量名是 "user.name" 的元素的值
var data = model.getData('user.name'); 
==> "张三"

//
// 获取/修改指定的多个元素的值
//

// 修改变量名是 "user.name"、"user.password" 的元素的值
model.setData(['user.name', 'user.password'], {
  'user.name': '张三',
  'user.password': '123456'
});

// 获取变量名是 "user.name"、"user.password" 的元素的值
var data = model.getData(['user.name', 'user.password']);
==> {"user.userName":"张三","user.password":"123456"}

// 修改变量名前缀是 "user." 的元素的值
model.setData('user.*', {
  'user.name': '张三',
  'user.password': '123456'
});

// 获取变量名前缀是 "user." 的元素的值
var data = model.getData('user.*');
==> {"user.userName":"张三","user.password":"123456"}

//
// 获取/修改全部元素的值
//

// 修改全部元素的值
model.setData('*', {
  'user.name': '张三',
  'user.password': '123456'
});

// 获取全部元素的值
var data = model.getData('*');
==> {"user.userName":"张三","user.password":"123456"}
```

上述获取/修改元素值的方法描述
```
/**
 * @description 获取指定表达式对应元素的数据
 * @param {(string|string[])} expression 表达式
 * @param {function} [skipFn] 判断是否跳过值,
                              比如 (targetValue) => (targetValue == null)
 * @returns {*} 值
 */
function getData(expression, skipFn);

/**
 * @description 设置指定表达式对应元素的数据
 * @param {string|string[]} expression 表达式
 * @param {*} value 值
 * @param {boolean} [notSkipSetIfValueAbsent=false] 是否跳过没有指定值的元素,
 *                                                  默认 false 跳过没有指定值的元素
 */
function setData(expression, value, notSkipSetIfValueAbsent);
```

提供工具类方法用于添加/移除属性名称的指定前缀
```
1. uiData.utils.prefix(obj, prefix) 给对象的所有属性添加指定的前缀，比如：
uiData.utils.prefix({
  name: '张三',
  password: '123456'
}, 'user.');
==> {"user.name":"张三", "user.password": "123456"}

2. uiData.utils.unprefix(obj, prefix) 给对象的所有指定前缀的属性移除指定前缀，比如：
uiData.utils.unprefix({
  'user.name': '张三',
  'user.password': '123456'
}, 'user.');
==> {"name":"张三", "password": "123456"}
```

## 开源协议

MIT