将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 相关文章推荐
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 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代码
2007/03/08 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
用python实现刷点击率的示例代码
2019/02/21 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
500行python代码实现飞机大战
2020/04/24 Python
Python如何测试stdout输出
2020/08/10 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
大学新闻系自荐书
2014/05/31 职场文书
课外访万家心得体会
2014/09/03 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js