Développer une base de données en utilisant js

Le front-end a souvent besoin de sauvegarder certaines données. Le stockage ici fait référence au stockage à long terme. Cet article vous expliquera comment utiliser js pour développer des bases de données.

Le front-end a souvent encore besoin de sauvegarder certaines données, et la sauvegarde fait ici référence au stockage à long terme. L'idée précédente était de sauvegarder les données dans le cookie, ou de sauvegarder la clé dans le cookie, et de sauvegarder d'autres données sur le serveur.

Ces scènes ont de nombreuses utilisations et sont très matures et faciles à utiliser. Mais je veux toujours des données qui peuvent être stockées localement pendant une longue période, comme une base de données ou un Web SQL.

La nouvelle génération de navigateurs prend essentiellement en charge les bases de données locales. Utilisez-la simplement directement lorsque vous en avez besoin. Si cela ne fonctionne pas, vous pouvez toujours utiliser le stockage pour vous débrouiller.

Que faire si j'ai besoin des fonctionnalités d'une base de données et qu'il n'existe aucune méthode de stockage compatible ? Dois-je chiffrer et stocker ces éléments localement ? Je veux sauvegarder beaucoup de choses ?

Actuellement, j'ai rencontré cette situation lors de l'utilisation de ReactNative. J'ai besoin de stocker beaucoup de données localement. Quelqu'un a dit, ne serait-il pas préférable d'utiliser SQLite directement ?

D'accord, tout à fait bien. Je le développe simplement à partir d'une attitude frontale ici. Que se passe-t-il si certains étudiants n’ont pas besoin de SQLite, mais ont simplement besoin d’un moyen simple de stocker une grande quantité de données ?

Il peut y avoir de nombreux scénarios d'utilisation, la couche inférieure de l'implémentation peut être remplacée à volonté, et même la méthode d'implémentation peut être écrite à volonté. Ici, je construis un référentiel de données informel et convivial, basé sur l'attitude du front-end créant le monde.

Stockage sous-jacent

Le scénario d'utilisation ici est ReactNative, j'utilise donc AsyncStorage de RN.

Convertissez toutes les données à enregistrer en objets et en chaînes. L'idée centrale ici est la sérialisation. Stockez toutes les données sous forme de chaînes.

import { AsyncStorage } from 'react-native';

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

Lors de la lecture, une conversion est également nécessaire pour convertir la chaîne en données initialement stockées.

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

Ce qui nécessite un traitement spécial, c'est l'acquisition de la liste. RN dispose d'une API qui renvoie plusieurs éléments de données basés sur plusieurs clés. Il renvoie un objet tableau. Le numéro de tableau 0 est la valeur clé du stockage de données et le numéro de séquence 1 est la chaîne spécifique du stockage de données.

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

Supprimons également quelques autres méthodes utilisées. Imbibez une couche supplémentaire ici, en gardant la même formation que ci-dessus.

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

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

exports.allKeys = async () => await AsyncStorage.getAllKeys();

Optimisation sous-jacente

Ce qui précède n'est qu'une simple implémentation S'il n'y a pas d'exigences particulières, ce sera presque la même chose. Cependant, ceux qui souhaitent aller plus loin peuvent envisager de commencer à optimiser.

Par exemple, optimisez la vitesse de conversion json. Lorsque nous utilisons la méthode objet JSON pour convertir, il existe en fait un processus de détermination du type numérique. Si nous définissons le type de données à l'avance. Il n'est pas nécessaire de juger à nouveau lors de la conversion.

Vous pouvez définir un objet modèle et prédéfinir les champs requis par cette table. Vous pouvez vérifier comment Sequelize est défini. Il est très simple de le faire selon la méthode d'une base de données de lignes relationnelles.

//用户对象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,
});

Implémentation du stockage

Nous faisons ici référence à la mise en œuvre d'une base de données relationnelle.

Tout d'abord, vous devez créer une sous-table et une sous-base de données. De cette façon, vous pouvez accorder moins d’attention à ces informations lors du stockage des données et vous concentrer sur les opérations sur les données.

constructor(tableName = "table", db = "db") {        //检查库,表是否存在
        //初始化索引表
        this.db = db;        this.tableName = tableName;        this.tableKey = db + "_" + tableName;        this.init();
    }

Stockez-les séparément dans l'objet actuel lors de la création de l'objet, vous pouvez créer différentes méthodes de fonctionnement basées sur différentes bibliothèques et tables. La classe est utilisée ici et chaque table correspond à un objet distinct.

Puisque nous utilisons la méthode de stockage fournie par RN, l'ajout et la mise à jour ici sont en fait la même méthode. Lors de l'ajout, un identifiant unique sera créé en fonction de l'horodatage actuel, et cet identifiant sera utilisé comme clé pour le stocker dans la base de données. Par conséquent, il n'est pas nécessaire de stocker l'ID séparément lors de son utilisation. Cependant, si vous estimez que l'ID est différent de ce dont vous avez besoin, vous pouvez également définir vous-même un ID pour stocker la valeur de la clé.

//添加和更新
    async add(data = {}) {        if (data.constructor !== Object) return;        if (!data._id)data._id = uuid();
        await setItem(this.tableKey + "_" + data._id, data);        return data;
    }

fournit une méthode distincte pour obtenir en fonction de l'identité lors de l'obtention. Ce qui est considéré ici, c'est qu'il est très simple et pratique d'obtenir par ID Certaines données peuvent être lues rapidement et il n'est pas nécessaire d'interroger ligne par ligne.

/**
 * 通过id查询
 * @param {*} id 
 */async getById(id) {    if (!id) return {};    return await getItem(this.tableKey + "_" + id);
}

Par rapport aux requêtes basées sur l'ID, les requêtes floues sont en effet très lentes. Si elles ne sont pas vraiment nécessaires, il vaut mieux ne pas utiliser ce genre de requête floue. Une méthode de requête personnalisée est fournie ici, qui peut déterminer si cette ligne de données est nécessaire en fonction de l'objet renvoyé. Vous pouvez également ajouter le paramètre top pour limiter le nombre renvoyé. L'utilisation de ce paramètre peut également améliorer les performances lorsqu'il y a beaucoup de données.

/**
 * 通过过滤方法查询
 * @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;
}

Enfin, ajoutez les méthodes de suppression et d'effacement, et une simple bibliothèque de suppression est complétée.

 /**
 * 删除
 * @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);
}

Lors de son utilisation, il vous suffit de créer l'objet puis de l'appeler si nécessaire. Il est simple et pratique à utiliser, et après optimisation, il peut même être utilisé comme Redis côté client.

//初始化数据库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()

Optimiser la création

La première chose à optimiser est la création d'objets. Chaque création d'objet consomme en réalité beaucoup d'argent. Ne serait-il pas formidable que cette consommation puisse être réduite ?

Nous nous appuyons ici sur le concept de pool de bases de données pour implémenter une méthode de pool d'objets. Il n'y a pas de retour direct après la création de l'objet, il doit passer par l'opération pool.

将对象放入池内，并在页面销毁的时候重置为一个空对象。下次请求创建的时候就不必再创建新的了。直接赋值表、库的名称就可以使用了。内存毫无变化，并且有点想笑。

优化查询

每次查询都需要去读Stroage还是很麻烦的，尤其这个操作是异步操作，是需要发消息到native端的。

我们可以将上次读取的数据先存在一个变量中，如果下次还需要使用这行数据，就完全不需要再去读取了。这样就可以很简单的提供读取速度。

这个方式还可以继续优化。将变量中保存的数据限制数量，防止数量太多超过了APP的限制。还可以将这个保存的时限做一个逻辑判断，常使用的数据放在里面，不常用的就找机会删除。

使用这种方式也可以优化变量中数据的有效性，减少变量占用内存的大小。不过实现的方式尽量不要使用定时器的形式，可以考虑使用触发式的。在条件满足的时候再触发删除动作。

优化写入

上面提到读取的时候需要放入变量来提高读取速度。我们顺便想到写入的速度是不是也可以提高啊？

我们将要存的数据放在临时的变量里，如果查过我们设置的时间或者数据长度查过我们设置的数量就触发一次保存操作。

这里要注意，保存数据的变量和存入时候使用的变量要交替使用，防止出现丢数据的情况。

比如：存的时候使用变量1，在写到数据库之前，将要存的对象改成变量2，然后读取变量1的数据并存入数据库中。这就是双缓存写入。

当然还是要判断一次APP的退出事件的，如果APP退出了，请一定要把变量中的内容保存一次，不然你的心血就全丢了。

---

好了，一个简单的数据库就完成了。想要使用的可以先在npm上搜索react-native-jsdb这个库。我已经将第一部分实现放在了npm上，后续的优化也会满满的开源出来的。

npm仓库地址

文章地址

前端很多时候还是需要保存一些数据的，这里的保存指的是长久的保存。以前的思想是把数据保存在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仓库地址

文章地址

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!