Beispiel für die gemeinsame Nutzung einer js-Entwicklungsdatenbank-js-Tutorial-php.cn

Das Front-End muss häufig einige Daten speichern, und das Speichern bezieht sich hier auf die Langzeitspeicherung. Die vorherige Idee bestand darin, die Daten im Cookie zu speichern oder den Schlüssel im Cookie zu speichern und andere Daten auf dem Server zu speichern. Diese Szenen haben viele Verwendungsmöglichkeiten und sind sehr ausgereift und einfach zu verwenden. Ich möchte aber trotzdem Daten, die über einen langen Zeitraum lokal gespeichert werden können, ähnlich einer Datenbank oder Web-SQL.

Die neue Generation von Browsern unterstützt grundsätzlich lokale Datenbanken. Verwenden Sie sie einfach direkt, wenn Sie sie benötigen. Wenn es nicht funktioniert, können Sie immer noch Storage verwenden, um es zu bewerkstelligen.

Was passiert, wenn ich die Funktionalität einer Datenbank benötige und es keine kompatible Speichermethode gibt? Muss ich diese Dinge verschlüsseln und lokal speichern? Ich möchte viel sparen?

Aktuell ist diese Situation bei der Verwendung von ReactNative aufgetreten. Ich muss viele Daten lokal speichern. Jemand sagte, wäre es nicht besser, SQLite direkt zu verwenden?

Okay, absolut in Ordnung. Ich entwickle es hier nur aus einer Front-End-Perspektive. Was ist, wenn einige Schüler kein SQLite benötigen, sondern lediglich eine einfache Möglichkeit zum Speichern einer großen Datenmenge benötigen?

Es kann viele Nutzungsszenarien geben, die unterste Ebene der Implementierung kann nach Belieben ersetzt werden und sogar die Implementierungsmethode kann nach Belieben geschrieben werden. Hier baue ich ein informelles, Front-End-freundliches Datenrepository auf, das auf der Einstellung des Front-Ends basiert, das die Welt erschafft.

Zugrundeliegender Speicher

Das Nutzungsszenario hier ist ReactNative, daher verwende ich AsyncStorage von RN.

Konvertieren Sie alle zu speichernden Daten in Objekte und in Strings. Der Kerngedanke hierbei ist die Serialisierung. Speichern Sie alle Daten als Zeichenfolgen.

import { AsyncStorage } from &#39;react-native&#39;;

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

Nach dem Login kopieren

Beim Lesen ist auch eine Konvertierung erforderlich, um den String in die ursprünglich gespeicherten Daten umzuwandeln.

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

Nach dem Login kopieren

Was einer besonderen Verarbeitung bedarf, ist die Erfassung der Liste. RN verfügt über eine API, die mehrere Daten basierend auf mehreren Schlüsseln zurückgibt. Es gibt ein Array-Objekt zurück. Array-Nummer 0 ist der Schlüsselwert der Datenspeicherung und Sequenznummer 1 ist die spezifische Zeichenfolge der Datenspeicherung.

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

Nach dem Login kopieren

Lassen Sie uns auch einige andere verwendete Methoden hervorheben. Legen Sie hier eine weitere Schicht ein und behalten Sie dabei die gleiche Anordnung wie oben bei.

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

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

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

Nach dem Login kopieren

Grundlegende Optimierung

Das Obige ist nur eine einfache Implementierung. Wenn keine besonderen Anforderungen vorliegen, ist es fast dasselbe. Wer jedoch noch weiter gehen möchte, kann darüber nachdenken, mit der Optimierung zu beginnen.

Optimieren Sie beispielsweise die Geschwindigkeit der JSON-Konvertierung. Wenn wir zum Konvertieren die JSON-Objektmethode verwenden, gibt es tatsächlich einen Prozess zur Bestimmung des numerischen Typs. Wenn wir den Datentyp im Voraus definieren. Bei der Konvertierung ist keine erneute Beurteilung erforderlich.

Sie können ein Modellobjekt definieren und die für diese Tabelle erforderlichen Felder vordefinieren. Sie können überprüfen, wie Sequelize definiert ist. Dies lässt sich sehr einfach mit der Methode einer relationalen Zeilendatenbank bewerkstelligen.

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

Nach dem Login kopieren

Speicher implementieren

Hier beziehen wir uns auf die Implementierung einer relationalen Datenbank.

Zuerst müssen Sie eine Untertabelle und eine Unterdatenbank erstellen. Auf diese Weise können Sie diesen Informationen beim Speichern von Daten weniger Aufmerksamkeit schenken und sich auf Datenoperationen konzentrieren.

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

Nach dem Login kopieren

Speichern Sie sie separat im aktuellen Objekt. Beim Erstellen des Objekts können Sie verschiedene Operationsmethoden basierend auf verschiedenen Bibliotheken und Tabellen erstellen. Hier wird eine Klasse verwendet, und jede Tabelle entspricht einem separaten Objekt.

Da wir die von RN bereitgestellte Speichermethode verwenden, handelt es sich beim Hinzufügen und Aktualisieren hier tatsächlich um dieselbe Methode. Beim Hinzufügen wird eine eindeutige ID basierend auf dem aktuellen Zeitstempel erstellt und diese ID wird als Schlüssel zum Speichern in der Datenbank verwendet. Daher ist es nicht erforderlich, die ID bei der Verwendung separat zu speichern. Wenn Sie jedoch der Meinung sind, dass die ID von der benötigten abweicht, können Sie auch selbst eine ID zum Speichern des Schlüsselwerts definieren.

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

Nach dem Login kopieren

bietet eine separate Methode zum Abrufen basierend auf der ID beim Abrufen. Hier wird berücksichtigt, dass es sehr einfach und bequem ist, einige Daten schnell zu lesen und keine Zeile für Zeile abzufragen.

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

Nach dem Login kopieren

Im Vergleich zur ID-basierten Abfrage ist die Fuzzy-Abfrage tatsächlich sehr langsam. Wenn sie nicht wirklich benötigt wird, ist es besser, diese Art von Fuzzy-Abfrage nicht zu verwenden. Hier wird eine benutzerdefinierte Abfragemethode bereitgestellt, mit der anhand des zurückgegebenen Objekts ermittelt werden kann, ob diese Datenzeile benötigt wird. Sie können auch den oberen Parameter hinzufügen, um die zurückgegebene Anzahl zu begrenzen. Die Verwendung dieses Parameters kann auch die Leistung verbessern, wenn viele Daten vorhanden sind.

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

Nach dem Login kopieren

Fügen Sie abschließend die Lösch- und Löschmethoden hinzu, und eine einfache Löschbibliothek ist fertig.

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

Nach dem Login kopieren

Wenn Sie es verwenden, müssen Sie nur das Objekt erstellen und es dann bei Bedarf aufrufen. Es ist einfach und bequem zu verwenden und kann nach der Optimierung sogar als clientseitiges Redis verwendet werden.

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

Nach dem Login kopieren

Erstellung optimieren

Das erste, was optimiert werden muss, ist die Erstellung von Objekten. Tatsächlich verbraucht jede Objekterstellung viel Geld. Wäre es nicht großartig, wenn dieser Verbrauch reduziert werden könnte?

Hier greifen wir auf das Konzept des Datenbankpools zurück, um eine Objektpoolmethode zu implementieren. Nach der Erstellung des Objekts gibt es keine direkte Rückkehr, es muss den Poolvorgang durchlaufen.

Legen Sie das Objekt in den Pool und setzen Sie es auf ein leeres Objekt zurück, wenn die Seite zerstört wird. Sie müssen bei Ihrer nächsten Anfrage kein neues Konto erstellen. Sie können es verwenden, indem Sie den Namen der Tabelle oder Bibliothek direkt zuweisen. Die Erinnerung ist unverändert und bringt mich ein wenig zum Lachen.

Abfrage optimieren

Es ist immer noch sehr mühsam, Stroage bei jeder Abfrage zu lesen, insbesondere ist dieser Vorgang ein asynchroner Vorgang und erfordert das Senden einer Nachricht an die native Seite.

Wir können die zuletzt gelesenen Daten in einer Variablen speichern. Wenn wir diese Datenzeile das nächste Mal verwenden müssen, ist es nicht erforderlich, sie erneut zu lesen. Dies kann leicht für Lesegeschwindigkeit sorgen.

Diese Methode kann weiter optimiert werden. Begrenzen Sie die in Variablen gespeicherte Datenmenge, um zu verhindern, dass die Menge das APP-Limit überschreitet. Sie können auch die Speicherzeitbegrenzung logisch beurteilen, häufig verwendete Daten darin ablegen und Möglichkeiten finden, nicht häufig verwendete Daten zu löschen.

Die Verwendung dieser Methode kann auch die Effektivität von Daten in Variablen optimieren und die von Variablen belegte Speichergröße reduzieren. Versuchen Sie jedoch, in der Implementierungsmethode keinen Timer zu verwenden. Sie können die Verwendung eines Triggertyps in Betracht ziehen. Die Löschaktion wird ausgelöst, wenn die Bedingungen erfüllt sind.

Schreiben optimieren

Wie oben erwähnt, müssen beim Lesen Variablen eingefügt werden, um die Lesegeschwindigkeit zu erhöhen. Übrigens, dachten wir, lässt sich auch die Schreibgeschwindigkeit verbessern?

Wir legen die zu speichernden Daten in einer temporären Variablen ab. Wenn die von uns festgelegte Zeit oder die Datenlänge und die von uns festgelegte Menge überprüft werden, wird ein Speichervorgang ausgelöst.

Hier ist zu beachten, dass die zum Speichern von Daten verwendeten Variablen und die beim Speichern verwendeten Variablen austauschbar verwendet werden sollten, um Datenverlust zu verhindern.

Zum Beispiel: Verwenden Sie beim Speichern die Variable 1, ändern Sie das zu speichernde Objekt in Variable 2, lesen Sie dann die Daten der Variablen 1 und speichern Sie sie in der Datenbank. Dies ist doppelt gepuffertes Schreiben.

Natürlich müssen Sie immer noch das Exit-Ereignis der APP bestimmen. Wenn die APP beendet wird, achten Sie bitte darauf, den Inhalt in der Variablen einmal zu speichern, sonst geht Ihre ganze harte Arbeit verloren.

Okay, eine einfache Datenbank ist fertig. Wenn Sie es verwenden möchten, können Sie zunächst auf npm nach react-native-jsdb dieser Bibliothek suchen. Ich habe den ersten Teil der Implementierung auf npm gestellt und nachfolgende Optimierungen werden vollständig Open Source sein.

npm-Lageradresse

Artikeladresse

Das Frontend muss in vielen Fällen noch einige Daten speichern, und die Speicherung bezieht sich hier auf die Langzeitspeicherung. Die vorherige Idee bestand darin, die Daten im Cookie zu speichern oder den Schlüssel im Cookie zu speichern und andere Daten auf dem Server zu speichern.

Diese Szenen haben viele Verwendungsmöglichkeiten und sind sehr ausgereift und einfach zu verwenden. Ich möchte aber trotzdem Daten, die über einen langen Zeitraum lokal gespeichert werden können, ähnlich einer Datenbank oder Web-SQL.

Was passiert, wenn ich die Funktionalität einer Datenbank benötige und es keine kompatible Speichermethode gibt? Muss ich diese Dinge verschlüsseln und lokal speichern? Ich möchte viel sparen?

Aktuell ist diese Situation bei der Verwendung von ReactNative aufgetreten. Ich muss viele Daten lokal speichern. Jemand sagte, wäre es nicht besser, SQLite direkt zu verwenden?

Zugrundeliegender Speicher

Das Nutzungsszenario hier ist ReactNative, daher verwende ich AsyncStorage von RN.

Konvertieren Sie alle zu speichernden Daten in Objekte und in Strings. Der Kerngedanke hierbei ist die Serialisierung. Speichern Sie alle Daten als Zeichenfolgen.

import { AsyncStorage } from &#39;react-native&#39;;

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

Nach dem Login kopieren

Beim Lesen ist auch eine Konvertierung erforderlich, um den String in die ursprünglich gespeicherten Daten umzuwandeln.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Lassen Sie uns auch einige andere verwendete Methoden hervorheben. Legen Sie hier eine weitere Schicht ein und behalten Sie dabei die gleiche Anordnung wie oben bei.

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

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

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

Nach dem Login kopieren

Grundlegende Optimierung

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

Nach dem Login kopieren

Speicher implementieren

Hier beziehen wir uns auf die Implementierung einer relationalen Datenbank.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

优化创建

首先要优化的就是对象的创建。每个对象创建其实都是一个很大的消耗，如果能把这个消耗降低岂不是美滋滋！

这里我们借鉴数据库池的概念，实现一个对象池的方法。在对象创建之后并没有直接返回，要在经过池的操作。

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

优化查询

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

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

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

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

优化写入

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

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

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

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

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

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

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung einer js-Entwicklungsdatenbank. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!