Umfassende Einführung in objektorientiertes JavaScript

Anforderungen:

Fast alle Webanwendungen müssen einige Daten lokal speichern, also erstellen wir einen Datenspeicher.

Detaillierte Anforderungen:

Wenn Daten lokal gespeichert sind, werden die lokalen Daten verwendet, und wenn keine Daten vorhanden sind, werden die Standarddaten verwendet
Stellen Sie fest, ob die lokalen Daten veraltet sind. Wenn sie veraltet sind, verwenden Sie sie nicht Standardmäßig wird localStorage verwendet, es werden jedoch auch andere Speichermethoden sowie Mehrparteienspeicherung und Mehrparteienlesung unterstützt

Abstrakte Objekte

Basierend auf den Schlüsselwörtern in den Anforderungen haben wir drei Objekte abstrahiert: Datenzugriff, Daten und Speicherung

Der Datenspeichermanager ist für die Datenverwaltung und die Offenlegung von Schnittstellen nach außen verantwortlich
Datenobjekte sind für Betriebsdaten verantwortlich
Der Speicher ist für das Speichern von Daten und das Lesen von Daten verantwortlich

Speicherobjekt

DataStorageManagerBase stellt zwei Schnittstellen save() und load() bereit, simuliert abstrakte Klassen und weist Unterklassen an, diese beiden Methoden zu implementieren.

Das folgende Beispiel implementiert eine Unterklasse mit LocalStorage. Natürlich können Sie sie auch mit Cookies oder anderen Methoden implementieren.
Warum sollte LocalStorage neu gekapselt werden? Kann ich es nicht einfach direkt verwenden?
Da die APIs verschiedener Speichergeräte unterschiedlich sind, können wir nach der sekundären Kapselung sicherstellen, dass die Schnittstellen, die jedes Speichergerät der Außenwelt zugänglich macht, save() und load() sind.

/*模拟数据储存器抽象类，其实这个类不要也可以*/
class DataStorageManagerBase {
    static getIns() {
        /* 储存器在整个应用的生命周期里应该只有一个实例 */
        if (!this._ins) this._ins = new this();
        return this._ins;
    }
    constructor() {
        this.name = null;
    }
    save(name/* string */, data/* any */) {
        throw '"' + this.constructor.name + "'类没有save()方法";
    }
    load(name/* string */) {
        throw '"' + this.constructor.name + "'类没有load()方法";
    }
}
class LocalStorageManager extends DataStorageManagerBase {
    static getIns() {
        /* 静态方法不能继承 */
        if (!this._ins) this._ins = new this();
        return this._ins;
    }
    constructor() {
        super();
        this.name = 'localStorage';
    }
    save(name/* string */, data/* any */) {
        console.log(name,data)
        if (!window.localStorage) return this;//判断这个储存器可用不可用，你也可以在这里抛出错误
        window.localStorage[name] = JSON.stringify(data);
        return this;
    }
    load(name/* string */) {
        //如果储存器不可用，返回false
        if (!window.localStorage) return false;
        //如果没有这个数据，返回false
        if (!window.localStorage[name]) return false;
        let dataLoaded = JSON.parse(window.localStorage[name]);
        return dataLoaded;
    }
}

Datenobjekt

Vorgänge an Daten: Speichern, Lesen, Versionsbestimmung usw.

class GlobalData {
    static addStorage(storage/* DataStorageManagerBase */) {
        /*动态添加储存器*/
        this._storages.push();
    }
    static getStorages() {
        return this._storages;
    }
    constructor(name, data, version) {
        this.name = name;
        this.data = data;
        this.version = version || 1;
        this._loadData();
        //初始化的该对象的时候，读取localStorage里的数据，看有没有已储存的数据，有就用该数据
    }
    getData() {
        return this._copy(this.data);
    }
    setData(data, notSave) {
        this.data = this._copy(data);
        if (!!notSave) return this;
        let dataToSave = {
            name: this.name,
            version: this.version,
            data: this.data
        };
        let storages = GlobalData.getStorages();
        for (let i = 0, l = storages.length; i 
<div style="font-size: 14pt; color: white; background-color: black; border-left: red 10px solid; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;">Datenzugriffsobjekt<strong></strong>
</div>Für die Datenobjektverwaltung werden drei Schnittstellen getData(), setData() und config() der Außenwelt zugänglich gemacht. Benutzer verwenden dieses Modul über diese drei Schnittstellen
<pre class="brush:php;toolbar:false">class GlobalDataDao {
    static getIns() {
        if (!this._ins) this._ins = new this();
        return this._ins;
    }
    constructor() {
        this.GlobalDataClass = GlobalData;
        this._dataList = [];
    }
    getData(name/* string */) {
        let dataIns = this.getDataIns(name);
        if (!!dataIns) {
            return dataIns.getData();
        } else {
            return null;
        }
    }
    setData(name/* string */, data/* any */, notSave = false/* ?boolean */) {
        let dataIns = this.getDataIns(name);
        dataIns.setData(data, notSave);
        return this;
    }
    config(configs/* Array */) {
        /* 初始化数据
        interface Config {
            name: string;
            data； any;
            version?: number;
        }
        */
        for (let i in configs) {
            let de = configs[i];
            if (!!this.getDataIns(de.name)) {
                /* 如果数据名重复，抛出错误 */
                throw new Error('data name "' + de.name + '" is exist');
            };
            let dataIns = new GlobalData(de.name, de.data, de.version);
            this._dataList.push(dataIns);
        }
        return this;
    }
    getDataIns(name/* string */) {
        for (let i in this._dataList) {
            if (this._dataList[i].name === name) {
                return this._dataList[i];
            }
        }
        return false;
    }
}

Verwenden

/*用法*/
let globalDataManeger = GlobalDataDao.getIns();

let configs = [
    {
        name: 'languageUsing',
        version: 1,
        data: {
            name: '简体中文',
            value: 'zh-cn'
        }
    }, {
        name: 'userPreference',
        version: 1,
        data: {
            theme: 'blue',
            menu: 'side_bar'
        }
    }
];
globalDataManeger.config(configs);
console.log(globalDataManeger);
let languageUsing = globalDataManeger.getData('languageUsing');
console.log(languageUsing);
languageUsing.name = 'English';
languageUsing.value = 'en';
globalDataManeger.setData('languageUsing', languageUsing);

Das obige ist der detaillierte Inhalt vonUmfassende Einführung in objektorientiertes JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!