前端要革命？看我在 JS 里寫 SQL

作者：佚名 2017-10-14 22:45:55

新聞前端

在日新月異的前端領域中，前端工程師能做的事情越來越多，自從nodejs出現后，前端越來越有革了傳統后端命的趨勢，本文就再補一刀，詳細解讀如何在js代碼中執行標準的SQL語句

為什么要在JS里寫SQL？

隨著業務復雜度的增長，前端頁面可能出現一些數據邏輯復雜的頁面，傳統的js邏輯處理起來比較復雜，我們先看兩個例子：

比如多規格多庫存商品界面，難點在于顏色分類、尺碼、價格、庫存、限購數量以及對應的圖片展示之間有復雜的邏輯關系，用戶進行不同的選擇時，js要經過多次復雜的查詢才能算出結果

比如地區聯動查詢界面，難點在于：

如何在本地存儲地區數據，顯然每次拉接口是不現實的，如果存儲在storage里，每次使用時，需要有類似JSON.parse類的字符串轉化為數組或對象的過程，這個操作在數據量大的時候，會造成頁面卡頓，性能極差
三級地區聯動查詢復雜，如果要從一個縣級地區查詢到所屬的城市和省份，邏輯會比較復雜

上面兩個例子，如果用傳統js邏輯來寫，大家頭腦中必定已經設計好了算法，免不了用forEach、filter、some、find等各種ES678新方法，筆者開始也是用了各種酷炫的新方法寫出來發現有兩個問題：

寫完之后邏輯很復雜，似乎沒有100行代碼實現不了（當然有大神比我活兒好）
即使寫了一大堆注釋，同事們看起來還是一頭霧水（因為邏輯確實很復雜。。。）

筆者做過一段時間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);

var msg;

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誕生了：

筆者以業務當中的一個需求舉例：轉轉游戲業務列表頁篩選菜單是一個三級聯動菜單，每個菜單變動都會影響其他菜單數據，如圖：

[[206332]]

原始JSON數據結構

可以看出是3級嵌套結構，筆者處理成了扁平化的數據結構（過程略），并分別存入三個數據庫，分別存儲游戲名稱、游戲平臺、商品類型，如下圖：

舉例游戲名稱數據結構如下圖：

通過chrome控制臺Application面板可以直接看到數據庫，結構、數據清晰可見

核心代碼如下：

/**

* 打開數據庫

* @returns {Promise.<void>}

openDataBase(){

//打開數據庫，沒有則創建

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

//檢測數據庫是否存在

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

//數據庫已經存在，直接使用,將數據交付給頁面UI組件

this.setSelectData()

}).catch(e=>{

//數據庫不存在，請求接口并處理數據，然后存入數據庫

this.getData()

})

}).catch(e=>{

console.err(e)

})

/**

* 獲取分類數據并存儲到數據庫

* @returns {Promise.<void>}

async getData(){

//接口請求數據并處理成三個扁平數組

let data = await this.getMenuData()

for(let i in data){

//創建表并存儲數據

db.create(i,data[i])

}

//將數據交付給頁面UI組件

this.setSelectData()

當任意菜單選擇變更時，三列數據將重新查詢，核心代碼如下：

/**

* 重新查詢數據

* @param data 點擊菜單攜帶的數據

* @param index 點擊菜單的序號

* @param all 三個菜單當前選中數據

async onSelect(data,index,all){

let target = [],condition = {}

//業務邏輯：處理查詢條件

if(all['0'] && all['0']['name']!=defaultData[0].default.name)condition['gameName'] =all['0']['name']

if(all['1'] && all['1']['name']!=defaultData[1].default.name)condition['platName'] =all['1']['name']

if(all['2'] && all['2']['name']!=defaultData[2].default.name)condition['typeName'] =all['2']['name']

//創建三個查詢任務

let tasks = ['game','plat','type'].map((v,k)=>{

//使用db.select方法查詢

return db.select(v,this.formatCondition(v,condition),'name,value','rowid desc','name').then((res)=>{

target.push({

options:res.data,

defaultOption:defaultData[k].default,

clickHandle:this.onSelect

})

//執行查詢

await Promise.all(tasks)

//將數據交付給聯動菜單組件使用

this.selectData = target

}

以上代碼即可完成聯動菜單所需要的數據管理工作，看起來是不是比較清晰？

使用Database.js的優勢

1.將數據結構化存儲于Storage中，避免了以文本形式存入Storage或cookie中再解析的性能消耗流程。

2.將復雜數據清晰的在前端進行管理和使用，代碼邏輯更清晰，數據查詢更簡潔！

Database.js使用文檔

openDatabase

功能：打開數據庫，不存在則創建
語法：openDatabase(dbName,dbVersion,dbDescription,dbSize,callback)
參數：
- dbName：數據庫名
- dbVersion：數據庫版本（打開已存在數據庫時，版本號必須一致，否則會報錯）
- dbDescription：數據庫描述
- dbSize：數據庫預設大小，默認1M
- callback：回調函數

query

功能：執行sql語句，支持多表查詢
語法：query(sqlStr,args = [],callback,errorCallback)
參數：
- sqlStr：sql語句
- args（Array）：傳入的數據，替換sql中的?符號
- callback:成功回調
- errorCallback：失敗回調
示例：

//插入數據

db.query('INSERT INTO testTable(id,title) VALUES (?,?)',[1,'這是title'])

//多表查詢

db.query('select game.*,plat.* from game left join plat on game.name = plat.gameName')

isExists

功能：檢測表是否存在
語法：isExists(tableName)
參數：
- tableName：表名

createTable

功能：創建一張表
語法：createTable(tableName,fields)
參數：
- tableName：表名
- fields：表結構(需指定字段類型)
示例：

db.createTable('testTable',{

name:'varchar(200)',

price:'int(100)'

})

insert

功能：插入一條或多條數據
語法：insert(tableName,data)
參數：
- tableName：表名
- data（Object or Array）：插入的數據，多條數據請傳入數組類型
示例：

//插入單條

db.insert('testTable',{

name:'商品1',

price:10

})

//插入多條

db.insert('testTable',[

{name:'商品1',price:10},

{name:'商品2',price:20},

{name:'商品3',price:30},

])

將數據存入數據庫的常規流程是先createTable，然后再insert，如果你覺得這樣麻煩，可以試一下create方法：

create

功能：直接創建數據庫并存入數據
注意：類庫會根據傳入的數據類型自動設置數據庫的字段類型，這樣可以覆蓋大多數需求，但如果你的數據中，同一個字段中有不同的數據類型，有可能不能兼容，建議還是使用常規流程手動設置類型
語法：create(tableName,data)
參數：
- tableName：表名
- data（Object or Array）：插入的數據，多條數據請傳入數組類型
示例：

//直接創建表并存儲

db.create('testTable',[

{name:'商品1',price:10},

{name:'商品2',price:20},

{name:'商品3',price:30},

])

delete

功能：刪除數據
語法：delete(tableName,condition)
參數：
- tableName：表名
- condition（String or Obejct）：查詢條件
示例：

//刪除一條數據

db.delete('testTable',{name:'商品1'})

關于condition： 1、傳入array形式時，默認查詢條件連接方式是AND，如果需要用OR等方式，可以在condition中傳入 logic設定，例如{ logic：'OR'} 2、如果查詢條件有AND、OR等多種方式，建議使用string方式傳入

select

功能：查詢數據
注意：如果需要多表查詢，可參照query方法
語法：select(tableName,condition = '',fields = '*',order = '',group = '',limit = '')
參數：
- tableName：表名
- condition（String or Obejct）：查詢條件
- fields（String or Array）：返回字段，默認*，支持distinct
- order（String or Array）：排序規則
- group（String or Array）：分組規則
- limit（String or Array）：分頁規則
示例：

//查詢name=商品1的數據，并按照price倒序

db.select('testTable',{

name:'商品1'

},'*','price desc')

//查詢價格大于0的商品，并用distinct關鍵字去重