为什么要在JS里写SQL？

跟着营业复杂度的增长，前端页面可能出现一些数据逻辑复杂的页面，传统的js逻辑处理起来比较复杂，我们先看两个例子：

比如多规格多库存商品界面，可贵在于色彩分类、尺码、价格、库存、限购数量以及对应的图片展示之间有复杂的逻辑关系，用户进行不合的选择时，js要经由多次复杂的萌芽才能算出结不雅

比如地区联动萌芽界面，可贵在于：

1. 三级地区联动萌芽复杂，如不雅要年腋荷琐县级地区萌芽到所属的城市和省份，逻辑会比较复杂

膳绫擎两个例子，如不雅用传统js逻辑来写，大年夜家脑筋中必定已经设计好了算法，免不了用forEach、filter、some、find等各类ES678新办法，笔者开端也是用了各类酷炫的新办法写出来发明有两个问题：

1. 即使写了一大年夜堆注释，同事们看起来照样一头雾水（因为逻辑确切很复杂。。。）

笔者做过一段时光php开辟（还做过PM、UI、QA等）溘然想能不克不及用SQL的方法实现呢？经由一番研究，笔者写了如许一个库：

Database.js

Database.js基于Web SQL Database，那么Web SQL Database又是啥？

Web SQL Database是WHATWG(Web 超文本应用技巧工作组，HTML5草案提出方)在2008 年 1 月提出的第一份正式草案，但并未包含在 HTML 5 规范之中，它是一个自力的规范，它惹人了一套应用 SQL 操作客户端数据库的 API。因为提出时光较早，尽管 W3C 官方在 2011 年 11 月声明已经不再保护 Web SQL Database 规范，但这些 API 已经被广泛的实如今了不合的浏览器里，尤其是手机端浏览器。

兼容情况

Web SQL Database 和 Indexed Database有啥差别？

Indexed Database 更类似于 NoSQL 的情势来操作数据库 , 个中最重要的是 Indexed Database 不应用 SQL 作为萌芽说话。

笔者为了实如今js琅绫擎写SQL的需求，不雅断采取了前者作为底层技巧。

Web SQL Database 三个核心办法：

• openDatabase：这个办法应用现稀有据库或新建数据库来创建数据库对象

• transaction：这个办法许可我们根据情况控制事务提交或回滚

• executeSql：这个办法用于履行SQL 萌芽

代码示例：

 var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);

 db.transaction(function (context) {

    context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');

    context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');

    context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');

    context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');

  });

`对于没有SQL经验的前端同窗来讲，膳绫擎代码看起来显然有点陌生，也不太友爱，于是Database.js出生了：

笔者以营业傍边的一个需求举例： 转转游戏营业列表页 筛选菜单是一个三级联动菜单，每个菜单更改都邑影响其他菜单数据，如图：

dbSize：数据库预设大年夜小，默认1M

原始JSON数据构造

2.将复杂数据清楚的在前端进行治理和应用，代码逻辑更清楚，数据萌芽更简洁！

可以看出是3级嵌套构造，笔者处理成了扁平化的数据构造（过程略），并分别存入三个数据库，分别存储游戏名称、游戏平台、商品类型，如下图：

举例游戏名称数据构造如下图：

经由过程chrome控制台Application面板可以直接看到数据库，构造、数据清楚可见

核心代码如下：

  /**

    * 打开数据库

    * @returns {Promise.<void>}

    */

   openDataBase(){

     //打开数据库，没有则创建

data（Object or Array）：插入的数据，多条数据请传入数组类型

     db.openDatabase('GameMenu',1,'zzOpenGameMenu').then(res=>{

       //检测数据库是否存在

       db.isExists('game').then(res=>{

         //数据库已经存在，直接应用,将数据交付给页面UI组件

         this.setSelectData()

       }).catch(e=>{

condition（String or Obejct）：萌芽前提

         //数据库不存在，请求接口并处理数据，然后存入数据库

　　推荐阅读

　　关键词搜索已经过时了 构图感知搜索引擎问世

找到一张知足的图有多灾?起首第一步当然是输入关键词，不过往往会显示出很多的结不雅，我们须要选择不合色彩、尺寸来进一步精确搜刮范围。很多图片网站供给了更具体的筛选前提，来赞助用户快速找到合适>>>详细阅读

本文标题：前端要革命？看我在 JS 里写 SQL

地址：http://www.17bianji.com/lsqh/37905.html

 1/2    1