• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

domdata: domdata 通过简单的方式获取/修改UI,在解决问题的同时力求少产生新问题。 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

domdata

开源软件地址:

https://gitee.com/garbagecode/domdata

开源软件介绍:

domdata — 用简单的方式获取/修改UI

domdata 通过简单的方式获取/修改UI,在解决问题的同时力求少产生新问题。特别说明 domdata 不提供大而全的功能,只是提供提升前端开发体验的思路,比如可以通过拓展 domdata 实现 mock 来测试代码或者注册自定义类型来封装常见的 UI 操作。

支持的浏览器

不支持 IE8 及其更早的版本

把 domdata 添加到您的网页

domdata 没依赖第三方库,只要在 HTML 的 <script> 标签中引用它:

<head><script src="domdata.js"></script></head>

如何使用 domdata

比如有这么一段 HTML 代码

<!-- 姓名输入框 --><input data-name="user.name" type="text" /><!-- 年龄输入框 --><input data-name="user.age" type="text" />

标签中的 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 属性相当于变量类型

<input data-name="user.age" data-type="number" type="text" />

注册自定义类型的处理方法

// "_" 是 "$$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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap