Exemple de partage de base de données de développement js-js tutoriel-php.cn

Le front-end a souvent besoin de sauvegarder certaines données, et la sauvegarde ici fait 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-les simplement 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 &#39;react-native&#39;;

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

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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();

Copier après la connexion

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(&#39;t_users&#39;, {
    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,
});

Copier après la connexion

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 un sous-tableau 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();
    }

Copier après la connexion

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;
    }

Copier après la connexion

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);
}

Copier après la connexion

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;
}

Copier après la connexion

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);
}

Copier après la connexion

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()

Copier après la connexion

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.

Mettez l'objet dans le pool et réinitialisez-le en objet vide lorsque la page est détruite. Vous n’êtes pas obligé d’en créer un nouveau la prochaine fois que vous en demanderez un. Vous pouvez l'utiliser en attribuant directement le nom de la table ou de la bibliothèque. Le souvenir est inchangé et me fait un peu rire.

Optimiser la requête

Il est toujours très difficile de lire Stroage pour chaque requête, d'autant plus que cette opération est une opération asynchrone et nécessite l'envoi d'un message au côté natif.

Nous pouvons stocker les dernières données lues dans une variable. Si nous devons utiliser cette ligne de données la prochaine fois, il n'est pas nécessaire de la relire. Cela peut facilement fournir une vitesse de lecture.

Cette méthode peut continuer à être optimisée. Limitez la quantité de données enregistrées dans les variables pour éviter que la quantité ne dépasse la limite de l'APP. Vous pouvez également porter un jugement logique sur la limite de durée de stockage, y placer les données fréquemment utilisées et trouver des opportunités de supprimer les données qui ne sont pas couramment utilisées.

L'utilisation de cette méthode peut également optimiser l'efficacité des données dans les variables et réduire la taille de la mémoire occupée par les variables. Cependant, essayez de ne pas utiliser de minuterie dans la méthode d'implémentation. Vous pouvez envisager d'utiliser un type de déclencheur. L'action de suppression est déclenchée lorsque les conditions sont remplies.

Optimiser l'écriture

Comme mentionné ci-dessus, des variables doivent être saisies lors de la lecture pour augmenter la vitesse de lecture. Au fait, nous avons pensé : la vitesse d’écriture peut-elle également être améliorée ?

Nous mettons les données à sauvegarder dans une variable temporaire. Si l'heure que nous avons définie est vérifiée ou si la longueur des données est vérifiée et la quantité que nous avons définie est vérifiée, une opération de sauvegarde sera déclenchée.

Il convient de noter ici que les variables utilisées pour sauvegarder les données et les variables utilisées lors de la sauvegarde doivent être utilisées de manière interchangeable pour éviter la perte de données.

Par exemple : utilisez la variable 1 lors de la sauvegarde. Avant d'écrire dans la base de données, modifiez l'objet à enregistrer en variable 2, puis lisez les données de la variable 1 et stockez-les dans la base de données. Il s’agit d’une écriture à double tampon.

Bien sûr, vous devez toujours déterminer l'événement de sortie de l'APP. Si l'APP se ferme, assurez-vous de sauvegarder le contenu dans la variable une fois, sinon tout votre travail sera perdu.

D'accord, une base de données simple est complétée. Si vous souhaitez l'utiliser, vous pouvez d'abord rechercher react-native-jsdb cette bibliothèque sur npm. J'ai mis la première partie de l'implémentation sur npm, et les optimisations ultérieures seront entièrement open source.

Adresse de l'entrepôt npm

Adresse de l'article

Le front-end doit encore sauvegarder certaines données dans de nombreux cas, et le stockage ici fait 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.

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 &#39;react-native&#39;;

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

Copier après la connexion

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;
}

Copier après la connexion

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

Copier après la connexion

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();

Copier après la connexion

Optimisation sous-jacente

//用户对象const users = db.define(&#39;t_users&#39;, {
    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,
});

Copier après la connexion

Implémentation du stockage

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

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

Copier après la connexion

将它们分开存储在当前对象内部，在创建对象的时候就可以根据不同的库、表创建不同的操作方法。这里使用的是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;
    }

Copier après la connexion

在获取的时候单独提供了一个根据id获取的方式。这里考虑的是通过id获取非常的简单方便，对于某些数据完全可以快速读取，没必要一行一行的去查询。

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

Copier après la connexion

相对于根据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;
}

Copier après la connexion

最后把删除和清空的方法加上，这样一个简单的删除库就完成了。

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

Copier après la connexion

使用的时候只需要创建对象，然后在需要的地方调用即可。使用起来简单又方便，再加上优化之后的情况甚至可以当成客户端的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()

Copier après la connexion