使用js開發資料庫

瘋狂紫蕭2018發表於2018-03-30
JS資料庫

前端很多時候還是需要儲存一些資料的，這裡的儲存指的是長久的儲存。以前的思想是把資料儲存在cookie中，或者將key儲存在cookie中，將其他資料儲存在伺服器上。

這幾個場景用處很多，也非常的成熟好用。但是我還是想要一種能夠長久的儲存在本地的資料，類似資料庫或者類似web sql。

新一代瀏覽器基本都支援了本地資料庫，需要用的時候直接使用就好了。實在不行還可以使用Storage將就一下。

假如我需要的是一個資料庫那種功能並且沒有相容的儲存方式呢？加入我還要加密儲存這些東西在本地呢？加入我要存的東西非常多呢？

目前我在使用ReactNative的時候確實遇到了這種情況。我需要將非常多的資料存在本地。有人說了，直接使用sqlite不就好了麼？

好啊，完全可以啊。我這裡僅僅是本著前端的態度去開發而已。假如有的同學不需要sqlite呢，只需要一個簡單的，能夠儲存一些大量資料的方式呢？

使用場景可能有很多，實現的底層也可以隨便替換，甚至實現方式都可以隨便寫寫。這裡我本著前端創造世界的態度來做一個非正式的、前端好使的資料儲存庫。

底層儲存

這裡的使用場景是ReactNative，所以我使用的是RN的AsyncStorage。

將所有要儲存的資料轉成物件，並轉化為字串。這裡的核心思想就是序列化。將所有資料當成字串來存。

import { AsyncStorage } from 'react-native';

exports.setItem = async (key, value) => {
    let item = JSON.stringify({
        v: value
    });
    return await AsyncStorage.setItem(key, item);
}
複製程式碼

當讀取的時候也需要做一次轉化，將字串轉成當初存入的資料。

exports.getItem = async (key) => {
    let item = await AsyncStorage.getItem(key);
    if (!item) {
        return null;
    }
    return JSON.parse(item).v || null;
}
複製程式碼

需要特殊處理的是列表的獲取。RN有一個根據多個key返回多條資料的api。它返回的是一個陣列物件，陣列序號0是資料儲存的key值，序號1才是資料儲存的具體字串。

exports.getlist = async (keys) => {
    let list = await AsyncStorage.multiGet(keys);
    list = list.map(item => JSON.parse(item[1]).v || null);
    return list;
}
複製程式碼

其他用到的幾個方法也順便拿出來吧。這裡多巢狀一層，跟上面的保持隊形。

exports.removeItem = async (key) => await AsyncStorage.removeItem(key);

exports.removeItems = async (keys) => await AsyncStorage.multiRemove(keys);

exports.allKeys = async () => await AsyncStorage.getAllKeys();
複製程式碼

底層優化

上面只是簡單的實現，如果沒有特殊需求也就差不多了。但是，想要更進一步的可以考慮開始優化了。

比如，優化json轉化的速度。我們使用JSON物件的方法去轉化的時候其實還有一個判斷數值型別的過程。如果我們把資料的型別提前定義好。再轉化的時候就不需要再判斷了。

可以定義一個model物件，將這個表需要的欄位預先定義好。可以檢視一下Sequelize的定義方式。按照關係行資料庫的方式來搞這個事情就很簡單了。

//使用者物件
const users = db.define('t_users', {
    id: {
        type: Sequelize.INTEGER,
        primaryKey: true,
    },
    //使用者名稱
    username: {
        type: Sequelize.STRING
    },
    //密碼
    pwd: {
        type: Sequelize.STRING
    },
    //狀態
    status: {
        type: Sequelize.INTEGER
    },
    //暱稱
    nickname: {
        type: Sequelize.STRING
    },
    //token
    token: {
        type: Sequelize.STRING
    },
    create_time: {
        type: Sequelize.TIME
    }
}, {
    freezeTableName: true,
    timestamps: false,
});
複製程式碼

實現儲存

我們這裡參考一下關係型資料庫的實現。

首先需要分表和分庫。這樣在存入資料的時候可以更少的關注這方面的資訊，將主要精力放在資料操作上。

constructor(tableName = "table", db = "db") {
        //檢查庫,表是否存在
        //初始化索引表
        this.db = db;
        this.tableName = tableName;
        this.tableKey = db + "_" + tableName;
        this.init();
    }
複製程式碼

將它們分開儲存在當前物件內部，在建立物件的時候就可以根據不同的庫、表建立不同的操作方法。這裡使用的是class，每個表都對應一個單獨的物件。

由於我們使用的是RN提供的儲存方法，所以這裡的新增和更新其實是一個方法。在新增的時候會根據當前時間戳建立一個唯一id，使用這個id作為key儲存在資料庫中。所以在使用的時候不需要再單獨存入id，不過如果你覺得這個id跟你需要的有差別也可以自己定義一個id來作為key值儲存。

//新增和更新
    async add(data = {}) {
        if (data.constructor !== Object) return;
        if (!data._id)data._id = uuid();
        await setItem(this.tableKey + "_" + data._id, data);
        return data;
    }
複製程式碼

在獲取的時候單獨提供了一個根據id獲取的方式。這裡考慮的是通過id獲取非常的簡單方便，對於某些資料完全可以快速讀取，沒必要一行一行的去查詢。

/**
 * 通過id查詢
 * @param {*} id 
 */
async getById(id) {
    if (!id) return {};
    return await getItem(this.tableKey + "_" + id);
}
複製程式碼

相對於根據id查詢來說，模糊查詢確實很慢，如果不是真實需要，還是不要使用這種模糊查詢的好。這裡提供了一個自定義查詢的方法，可以根據返回的物件判斷是否需要這行資料。同時也可以新增top引數來限制返回的數量。使用這個引數也可以在資料很多的時候提高效能。

/**
 * 通過過濾方法查詢
 * @param {*} fn 
 */
async get(fn, top = 0) {
    let keys = await allKeys();
    if (keys.length == 0) return [];
    if (top > 0 && keys.length > top) keys.length = top;
    const listkey = keys.filter(item => item.indexOf(this.tableKey + "_") === 0);
    if (listkey.length == 0) return [];
    let list = await getlist(listkey);
    list = list.filter(item => fn(item));
    return list;
}
複製程式碼

最後把刪除和清空的方法加上，這樣一個簡單的刪除庫就完成了。

 /**
 * 刪除
 * @param {*} id 
 */
async delete(id) {
    if (!id) return {};
    await removeItem(this.tableKey + "_" + id);
}
/**
 * 清空表
 */
async clear() {
    let keys = await allKeys();
    const listkey = keys.filter(item => item.indexOf(this.tableKey + "_") === 0);
    if (listkey.length == 0) return;
    removeItems(listkey);
}
複製程式碼

使用的時候只需要建立物件，然後在需要的地方呼叫即可。使用起來簡單又方便，再加上優化之後的情況甚至可以當成客戶端的redis來使用。

//初始化資料庫
let db=new JSDB();
 
//新增一個自定義資料
db.add({name:"test",key:"abc"});
 
//根據id獲取資料
db.getById("1223467890");
 
//根據條件查詢資料
db.get(d=>d.name==="test");
 
//刪除對應的資料
db.delete("1223467890");
 
//情況所有資料
db.clear()
複製程式碼

優化建立

首先要優化的就是物件的建立。每個物件建立其實都是一個很大的消耗，如果能把這個消耗降低豈不是美滋滋！

這裡我們借鑑資料庫池的概念，實現一個物件池的方法。在物件建立之後並沒有直接返回，要在經過池的操作。

將物件放入池內，並在頁面銷燬的時候重置為一個空物件。下次請求建立的時候就不必再建立新的了。直接賦值表、庫的名稱就可以使用了。記憶體毫無變化，並且有點想笑。

優化查詢

每次查詢都需要去讀Stroage還是很麻煩的，尤其這個操作是非同步操作，是需要發訊息到native端的。

我們可以將上次讀取的資料先存在一個變數中，如果下次還需要使用這行資料，就完全不需要再去讀取了。這樣就可以很簡單的提供讀取速度。

這個方式還可以繼續優化。將變數中儲存的資料限制數量，防止數量太多超過了APP的限制。還可以將這個儲存的時限做一個邏輯判斷，常使用的資料放在裡面，不常用的就找機會刪除。

使用這種方式也可以優化變數中資料的有效性，減少變數佔用記憶體的大小。不過實現的方式儘量不要使用定時器的形式，可以考慮使用觸發式的。在條件滿足的時候再觸發刪除動作。

優化寫入

上面提到讀取的時候需要放入變數來提高讀取速度。我們順便想到寫入的速度是不是也可以提高啊？

我們將要存的資料放在臨時的變數裡，如果查過我們設定的時間或者資料長度查過我們設定的數量就觸發一次儲存操作。

這裡要注意，儲存資料的變數和存入時候使用的變數要交替使用，防止出現丟資料的情況。

比如：存的時候使用變數1，在寫到資料庫之前，將要存的物件改成變數2，然後讀取變數1的資料並存入資料庫中。這就是雙快取寫入。

當然還是要判斷一次APP的退出事件的，如果APP退出了，請一定要把變數中的內容儲存一次，不然你的心血就全丟了。

好了，一個簡單的資料庫就完成了。想要使用的可以先在npm上搜尋react-native-jsdb這個庫。我已經將第一部分實現放在了npm上，後續的優化也會滿滿的開源出來的。

npm倉庫地址

文章地址

相關文章