将json当数据库一样操作的javascript lib


Posted in Javascript onOctober 28, 2013

前段时间工作中用到Json数据,希望将一些简单的增删改查放到客户端来做,这样也能减少服务器端的压力。分别查找了几个可以对Json进行操作的javascript 类库,最终选定了TAFFY DB。原因如下:
1、使用的是BSD开源协议,不用担心商业使用限制。
2、一直在有人进行更新,并且不和其他框架(如Jquery,YUI,Dojo等)冲突
3、功能齐全——增删改查、排序等等都有了。
4、小巧,压缩后只有17k大小。
所以,工作完后,将这篇文章写出来,并推荐这个类库给大家,希望能够帮助到那些正在寻找Json 查询修改的Coder们一些帮主,并和大家一起交流学习。

TAFFY DB 基本信息
项目主页:http://taffydb.com/
托管地址:https://github.com/typicaljoe/taffydb

使用方法:

<script type="text/javascript" charset="utf-8" src="taffy-min.js"></script>

// 创建空白数据库 
var db = TAFFY(); 
//创建包含一条数据的数据库 
var db = TAFFY({record:1,text:"example"}) 
 //通过数组创建数据库,数组的元素为json格式的object(可多条) 
var db = TAFFY([{record:1,text:"example"}])      
// 通过json格式字符串创建数据(可多条)    
var db = TAFFY('[{"record":1,"text":"example"}]')

查询数据:
首先构建一个数据库,以后的示例,都以这个数据库为准。
var db = TAFFY([//构建一个城市的数据库,字段分别代表 省份、城市名、邮政编码、排序
    { province:"北京", cityName:"北京", zipCode:"10001", orderNum:1},
    { province:"河北", cityName:"石家庄", zipCode:"10002", orderNum:2},
    { province:"河北", cityName:"保定", zipCode:"10003", orderNum:3},
    { province:"河北", cityName:"承德", zipCode:"10004", orderNum:4},
]);

1、根据字段值进行查询
var cities = db({province:"河北"});  //查询所有province 值为"河北"的数据,并返回TAFFY格式的object
//console.log这个函数,只要在有控制台的浏览器中,都可以用,比如火狐的firebug,还有谷歌浏览器的开发人员工具(按F12可呼出)
for(var i = 0; i< cities().count(); i++){
    //get()这个TAFFY的函数,可以将TAFFY的object数据转化为json格式
    console.log("城市名", cities().get()[i].cityName);
}
console.log("第一条数据为:", cities().first()); // first()这个函数可以返回json格式的第一条数据

2、根据条件查询 (具体条件请查阅 http://www.taffydb.com/writingqueries 的“Comparison Operators”小节

//单条件查询
//查询 排序大于 2 的所有数据
db({ orderNum:{'>':2}});
//范围查询
//查询排序大于2 并且 小于 4 的所有数据
db({ orderNum:{'>':2, '<':4}});
//多条件"与" 查询
//查询大于2,并且 小于4 ,并且 省份为 河北省 的数据
db({ orderNum:{'>':2, '<':4}, province:"河北"});
//多条件"或"查询
// 查询 排序  大于2 或者 小于 4 的数据
db({ orderNum:{'>':2}}, { orderNum : {'<':4}});
//指定数据内查询(where in)
// 查询 城市为  保定、石家庄 的数据
db({ cityName:['保定','石家庄']});

3、排序

//单条件排序
db().order("orderNum desc");    // 根据orderNum 倒序
db().order("orderNum"); //正序
//多字段排序
db().order("orderNum desc, zipCode asc"); //先按照orderNum倒序,然后按照 zipCode正序

4、计算

//求最大值
db().max("orderNum"); //得到orderNum的最大值,并返回
//求最小值
db().min("orderNum"); //得到最小的 orderNum
//求和
db().sum("orderNum"); //得到所有orderNum的和
//得到第一条数据
db().first();  //取第一条数据,并返回json格式
//得到最后一条数据
db().last(); //取最后一条,并返回json格式
//这个可以用来分页 哈哈
db().start(15).limit(20); //从第15条数据开始,往后取20条

5、内置函数查询,有些数据,需要在查询的时候,就做一些计算,稍显复杂,可以通过内置函数来查询

db().filter(function(){
    return this.cityName.length > 2;
});

添加数据

//添加一条数据
db.insert({province:"湖南", cityName:"长沙", zipCode:"10005", orderNum:5});

删除数据

//删除全部数据
db().remove();
//删除所有orderNum 大于5的数据
db({orderNum:{'>':5}}).remove();

修改数据

//将所有数据 的 orderNum修改为1
db().update({orderNum:1});
//将城市名为北京的 邮政编码修改为 100000
db({cityName:"北京"}).update({zipCode:"100000"})
//将所有的orderNum 都加1
db().update(function(){
    this.orderNum = this.orderNum + 1;
    return this;
});
/*
特别说明:在有的时候,增删查都没有问题,唯独修改的时候,会碰到报错:找不到字段
这应该是TAFFY的一个小bug,遇到这个情况,重新初始化一下就好,需要用到一个函数
stringify(),这个是将TAFFY DB 的所有数据,变成字符串,所以遇到这种情况,就可以这样做了:
*/
db = TAFFY(db().stringify()); //将内容重新初始化
db().update({column:value});

写到这里,我想这个简单的教程也就算是可以了,已经方便小菜们快速上手这个类库了。
当然,其中还有很多是我没有去提及,需要自己去查询的,比如模糊查询等等,更加复杂的操作。大家可以去项目的官方主页去看。(英文)

Javascript 相关文章推荐
kmock javascript 单元测试代码
Feb 06 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
javascript实现简易聊天室
Jul 12 Javascript
一个JavaScript变量声明的知识点
Oct 28 #Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 #Javascript
javascript中简单的进制转换代码实例
Oct 26 #Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 #Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 #Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 #Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 #Javascript
You might like
PHP常用代码
2006/11/23 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
2014年清明节寄语
2014/04/03 职场文书
校友回访母校寄语
2015/02/26 职场文书
针对吵架老公保证书
2015/05/08 职场文书