Pengenalan komprehensif kepada JavaScript berorientasikan objek

Keperluan:

Hampir semua aplikasi web perlu menyimpan beberapa data secara setempat, jadi mari kita buat storan data.

Keperluan terperinci:

Apabila terdapat data yang disimpan secara setempat, data tempatan digunakan, dan apabila tiada data, data lalai digunakan
Tentukan sama ada data setempat sudah lapuk Jika ia sudah lapuk, jangan gunakannya
Secara lalai, localStorage digunakan, tetapi kaedah storan lain disokong dan storan berbilang pihak serta bacaan berbilang pihak disokong

Objek abstrak

Berdasarkan kata kunci dalam keperluan, kami mengabstrak tiga objek: akses data, data dan storan
Pengurus storan data bertanggungjawab mengurus data dan mendedahkan antara muka kepada luar
Objek data bertanggungjawab untuk mengendalikan data
Memori bertanggungjawab untuk mengekalkan data dan membaca data

Objek storan

DataStorageManagerBase mendedahkan dua antara muka save() dan load(), mensimulasikan kelas abstrak dan memberitahu subkelas untuk melaksanakan kedua-dua kaedah ini.
Contoh berikut melaksanakan subkelas menggunakan LocalStorage Sudah tentu, anda juga boleh melaksanakannya menggunakan kuki atau kaedah lain.
Mengapakah LocalStorage perlu dikapsulkan semula? Tidak bolehkah saya menggunakannya secara langsung?
Oleh kerana API pelbagai ingatan adalah berbeza, selepas enkapsulasi sekunder, kami boleh memastikan bahawa tidak kira apa memori yang terdedah kepada dunia luar, antara muka adalah save() dan 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;
    }
}

Objek Data

Operasi pada data: menyimpan, membaca, menentukan versi, dll.

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>Objek capaian data</strong></div>
<p>Untuk pengurusan objek data, tiga antara muka getData(), setData(), dan config() didedahkan kepada dunia luar Pengguna menggunakan modul ini melalui tiga antara muka ini</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;
    }
}

Gunakan

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

Atas ialah kandungan terperinci Pengenalan komprehensif kepada JavaScript berorientasikan objek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!