Собственный JavaScript реализует шаблон наблюдателя

JavaScript

Что такое шаблон наблюдателя

ВикипедияШаблон наблюдателя определяется следующим образом:

Паттерн Наблюдатель — это один из паттернов проектирования программного обеспечения. В этом шаблоне целевой объект управляет всеми зависимыми от него объектами-наблюдателями и активно уведомляется об изменении своего состояния. Обычно это достигается путем вызова методов, предоставляемых каждым наблюдателем. Этот шаблон часто используется в системах обработки событий в реальном времени.

Проще говоря, при изменении данных автоматически выполняется соответствующая функция обработки. Определение вики включает в себя активное уведомление, Таким образом, трансляция событий в angularJS более удовлетворительна, но ее недостаток заключается в плохой ремонтопригодности кода. Тот же эффект может быть достигнут, если соответствующая функция обработки вызывается при установке значения атрибута объекта вместо активного уведомления. Подробный код смотрите ниже.

Реализация под ES5

В ES5 в основном черезObject.definePropertyМетод определяет настройку и получение свойств объекта, а также выполняет соответствующие функции обработки при настройке.Пример кода следующий:

// 创建对象
var targetObj = {
    age: 1
}
// 定义值改变时的处理函数
function observer(oldVal, newVal) {
    // 其他处理逻辑...
    console.info('name属性的值从 '+ oldVal +' 改变为 ' + newVal);
}

// 定义name属性及其set和get方法
Object.defineProperty(targetObj, 'name', {
    enumerable: true,
    configurable: true,
    get: function() {
        return name;
    },
    set: function(val) {
        //调用处理函数
        observer(name, val)
        name = val;
    }
});

targetObj.name = 'Martin';
targetObj.name = 'Lucas';
console.info('targetObj:', targetObj)

Выход

...
name属性的值从 Martin 改变为 Lucas
targetObj: {age: 1, name: 'Lucas'}
...

Внедрение ES6

Используйте метод set для достижения

class TargetObj {
    constructor(age, name) {
        this.name = name;
        this.age = age;
    }
    set name(val) {
        observer(name, val);
        name = val;
    }
}

let targetObj = new TargetObj(1, 'Martin');

// 定义值改变时的处理函数
function observer(oldVal, newVal) {
    // 其他处理逻辑...
    console.info('name属性的值从 '+ oldVal +' 改变为 ' + newVal);
}
targetObj.name = 'Lucas';
console.info(targetObj)

Выход

...
name属性的值从 Martin 改变为 Lucas
targetObj: {age: 1, name: 'Lucas'}
...

Реализовано с использованием Reflect и Proxy

Новый Proxy Api в ES6 имеет множество применений. В сочетании с Reflect Api он может легко реализовать множество мощных логических функций. Подробнее см.«Введение в ECMAScript 6» — Руан Ифэнвведение в . Код реализации выглядит следующим образом:

class TargetObj {
    constructor(age, name) {
        this.name = name;
        this.age = age;
    }
}

let targetObj = new TargetObj(1, 'Martin');

let observerProxy = new Proxy(targetObj, {
    set(target, property, value, reciever) {
        if (property === 'name') {
            observer(target[property], value);
        }

        Reflect.set(target, property, value, reciever);
    }
});
// 定义值改变时的处理函数
function observer(oldVal, newVal) {
    // 其他处理逻辑...
    console.info(`name属性的值从 ${oldVal} 改变为 ${newVal}`);
}

observerProxy.name = 'Lucas';
console.info(targetObj);

Выход

...
name属性的值从 Martin 改变为 Lucas
targetObj: {age: 1, name: 'Lucas'}
...

Суммировать

  1. ES6 Многие новые функции, эффективны для повышения эффективности и самой рациональности JS
  2. Хотя многие базовые методы и концепции редко используются в бизнес-реализации, понимание их концепций оказывает большое влияние на идеи кодирования.
  3. Шаблон наблюдателя вполне может завершить взаимодействие между данными.Хотя он часто используется, он обеспечивает более глубокое понимание общей структуры и принципов после детального понимания.
  4. Прокси действительно хороший и мощный
Категории