私信发送成功
检测到您已登录利发国际官方网,是否 一键登录码云
Watch Star Fork

cc.z / datajsJavaScriptMIT

datajs 是一个用于进行页面数据交互的插件,避免在业务逻辑中操作 DOM。以一种简单的方式更新/获取页面的数据,让使用者享受到便利的同时,也最大程度的降低学习的成本和使用的代价。
克隆/下载
zhuangmaohui@163.com 最后提交于 2017-07-22 14:30 . 添加函数的依赖关系图
2017-05-05 23:34
Loading...
README.md 3.08 KB

datajs — 简单的页面数据交互插件

datajs 只关心如何获取/修改页面数据,没提供其它过多的功能,自然学起来简单,用起来问题少。

支持的浏览器

不支持 IE8 及其更早的版本

把 datajs 添加到您的网页

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

如何使用 datajs

比如有这么一段 HTML 代码
<!-- 姓名输入框 --> <input data-name="user.name" type="text" /> <!-- 年龄输入框 --> <input data-name="user.age" type="text" />
标签中的 data-name 属性相当于变量名,是 data.js 获取/修改页面数据的标识符。
/** * 获取/设置单个页面数据 */ // 修改变量名是 "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

项目点评 (3)

你可以在登录后,对此项目发表评论
利发国际官方网