Создание объектов, которые можно наблюдать

Question

В последнее время я искал рамки JavaScript, такие как Angular и Meteor, и мне было интересно, как они узнают, когда изменилось свойство объекта, чтобы они могли обновлять DOM.

Я был немного удивлен тем, что Angular использовал простые старые объекты JS, вместо того, чтобы требовать от вас вызова какого-то приемника/сеттера, чтобы он мог подключаться и выполнять необходимые обновления. Я понимаю, что они просто регулярно проверяют объекты на предмет изменений.

Но с появлением геттеров и сеттеров в JS 1.8.5 мы можем сделать лучше, не так ли?

Как немного проверки концепции, я соединял этот скрипт:

(Edit: обновленного кода для добавления зависимого-свойства/метод поддержка)

function dependentProperty(callback, deps) { 
    callback.__dependencies__ = deps; 
    return callback; 
} 

var person = { 
    firstName: 'Ryan', 
    lastName: 'Gosling', 
    fullName: dependentProperty(function() { 
     return person.firstName + ' ' + person.lastName; 
    }, ['firstName','lastName']) 
}; 

function observable(obj) { 
    if (!obj.__properties__) Object.defineProperty(obj, '__properties__', { 
     __proto__: null, 
     configurable: false, 
     enumerable: false, 
     value: {}, 
     writable: false 
    }); 
    for (var prop in obj) { 
     if (obj.hasOwnProperty(prop)) { 
      if(!obj.__properties__[prop]) obj.__properties__[prop] = { 
       value: null, 
       dependents: {}, 
       listeners: [] 
      }; 
      if(obj[prop].__dependencies__) { 
       for(var i=0; i<obj[prop].__dependencies__.length; ++i) { 
        obj.__properties__[obj[prop].__dependencies__[i]].dependents[prop] = true; 
       } 
       delete obj[prop].__dependencies__; 
      } 
      obj.__properties__[prop].value = obj[prop]; 
      delete obj[prop]; 
      (function (prop) { 
       Object.defineProperty(obj, prop, { 
        get: function() { 
         return obj.__properties__[prop].value; 
        }, 
        set: function (newValue) { 
         var oldValue = obj.__properties__[prop].value; 
         if(oldValue !== newValue) { 
          var oldDepValues = {}; 
          for(var dep in obj.__properties__[prop].dependents) { 
           if(obj.__properties__[prop].dependents.hasOwnProperty(dep)) { 
            oldDepValues[dep] = obj.__properties__[dep].value(); 
           } 
          } 
          obj.__properties__[prop].value = newValue; 
          for(var i=0; i<obj.__properties__[prop].listeners.length; ++i) { 
           obj.__properties__[prop].listeners[i](oldValue, newValue); 
          } 
          for(dep in obj.__properties__[prop].dependents) { 
           if(obj.__properties__[prop].dependents.hasOwnProperty(dep)) { 
            var newDepValue = obj.__properties__[dep].value(); 
            for(i=0; i<obj.__properties__[dep].listeners.length; ++i) { 
             obj.__properties__[dep].listeners[i](oldDepValues[dep], newDepValue); 
            } 
           } 
          } 
         } 
        } 
       }); 
      })(prop); 
     } 
    } 
    return obj; 
} 

function listen(obj, prop, callback) { 
    if(!obj.__properties__) throw 'object is not observable'; 
    obj.__properties__[prop].listeners.push(callback); 
} 

observable(person); 

listen(person, 'fullName', function(oldValue, newValue) { 
    console.log('Name changed from "'+oldValue+'" to "'+newValue+'"'); 
}); 

person.lastName = 'Reynolds'; 

каких журналы:

имя изменено с "Райан Гослинг" в "Райан Рейнольдс"

Единственная проблема, которую я вижу, заключается в определении методов, таких как fullName() на объекте человека, который будет зависеть от двух других свойств. Для этого требуется небольшая дополнительная разметка для объекта, чтобы разработчики могли указать зависимость.

Помимо этого, существуют ли какие-либо недостатки этого подхода?

JsFiddle

Answer 1

Появление добытчиками и сеттеров в JS 1.8.5 - есть ли минусы такого подхода?

• Вы не улавливаете никаких изменений свойств помимо наблюдаемых. Конечно, этого достаточно для моделируемых объектов сущности, и для чего-либо еще мы могли бы использовать Proxies.
• Он ограничен браузерами, которые поддерживают геттеры/сеттеры и, возможно, даже прокси. Но эй, кто заботится об устаревших браузерах? :-) И в ограниченных средах (Node.js) это вообще не выполняется.
• Свойства аксессуаров (с геттером и сеттером) намного медленнее, чем реальные методы get/set. Конечно, я не ожидаю, что они будут использоваться в критических разделах, и они могут сделать код очень привлекательным. Но вы должны держать это в глубине своего разума. Кроме того, причудливый код может привести к неправильным представлениям - обычно вы ожидаете, что присвоение/доступ к ресурсам будет короткой (O(1)), в то время как с геттерами/сеттерами может быть намного больше. Вам нужно будет не забывать об этом, и использование реальных методов могло бы помочь.

Так что если мы знаем, что мы делаем, да, мы, , можем сделать лучше.

Тем не менее, есть одна огромная точка, которую нам нужно запомнить: синхронность/асинхронность (также посмотрите на this excellent answer). Грязная проверка углового позволяет вам сразу менять набор свойств, до событие срабатывает в следующем повороте цикла события. Это помогает избежать (распространения) семантически недействительных состояний.

Тем не менее, я вижу синхронные геттеры/сеттеры как шанс. Они позволяют нам объявить зависимости между свойствами и определить правильные состояния. Он автоматически обеспечит правильность модели, в то время как нам нужно только изменить одно свойство за раз (вместо того, чтобы менять firstName и fullName все время, firstName достаточно). Тем не менее, во время урегулирования зависимостей это может быть недействительным, поэтому нам нужно позаботиться об этом.

Таким образом, слушатели, не связанные с управлением зависимостями, должны запускаться асинхронно. Просто setImmediate их петля.