Introduction complète au JavaScript orienté objet

Exigences :

Presque toutes les applications Web doivent enregistrer certaines données localement, créons donc un stockage de données.

Exigences détaillées :

Lorsqu'il y a des données stockées localement, les données locales sont utilisées, et lorsqu'il n'y a pas de données, les données par défaut sont utilisées
Déterminez si les données locales sont obsolètes. Si elles sont obsolètes, ne les utilisez pas
. Par défaut, localStorage est utilisé, mais d'autres méthodes de stockage sont prises en charge, ainsi que le stockage multi-parties et la lecture multi-parties sont pris en charge

Objets abstraits

Sur la base des mots-clés des exigences, nous avons extrait trois objets : accès aux données, données et stockage
Le gestionnaire de stockage de données est chargé de gérer les données et d'exposer les interfaces vers l'extérieur
Les objets de données sont responsables des données d'exploitation
La mémoire est responsable de la conservation des données et de la lecture des données

Objet de stockage

DataStorageManagerBase expose deux interfaces save() et load(), simule des classes abstraites et indique aux sous-classes d'implémenter ces deux méthodes.
L'exemple suivant implémente une sous-classe en utilisant LocalStorage. Bien entendu, vous pouvez également l'implémenter en utilisant des cookies ou d'autres méthodes.
Pourquoi LocalStorage devrait-il être réencapsulé ? Je ne peux pas l'utiliser directement ?
Étant donné que les API des différents périphériques de stockage sont différentes, après encapsulation secondaire, nous pouvons garantir que les interfaces exposées au monde extérieur par n'importe quel périphérique de stockage sont save() et load().

/*模拟数据储存器抽象类，其实这个类不要也可以*/
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;
    }
}

Objet de données

Opérations sur les données : sauvegarde, lecture, détermination de version, etc.

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;"><strong>Objet d'accès aux données</strong></div>
<p>Pour la gestion des objets de données, trois interfaces getData(), setData() et config() sont exposées au monde extérieur. Les utilisateurs utilisent ce module via ces trois interfaces</p>.
<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;
    }
}

Utilisation

/*用法*/
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);

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!