Утилиты для работы с объектами JavaScript

В библиотеке Base имеются три утилиты, упрощающие выполнение операций, которые обычно выполняются над объектами: mixin, extend и clone.

Классы-смеси
Язык JavaScript позволяет создавать нечто, напоминающее классы, помещая совокупности свойств и методов внутрь функцииконструктора. После этого вы можете создавать экземпляры таких классов, вызывая функциюконструктор с оператором new. Как можно предположить, иногда бывает очень удобно иметь возможность добавлять к объектам дополнительные свойства – либо в ответ на происходящие события, либо как часть хорошо продуманного дизайна, с целью максимально повысить возможность многократного использования программного кода. В любом из этих случаев функция mixin принимает на себя основные сложности реализации.

Функция mixin принимает неопределенное число объектов, первый из которых служит объектом, к которому примешиваются остальные объекты:
dojo.mixin(/*Object*/ o, /*Object*/ o, ...) //Возвращает Object
Ниже приводится пример использования функции mixin:
function Man() {
this.x = 10;
}
function Myth() {
this.y = 20;
}
function Legend() {
this.z = 30;
}
var theMan = new Man;
var theMyth = new Myth;
var theLegend = new Legend;
function ManMythLegend() {}
var theManTheMythTheLegend = new ManMythLegend;
//видоизменить объект theManTheMythTheLegend, смешав в нем три других объекта
dojo.mixin(theManTheMythTheLegend, theMan, theMyth, theLegend);

Расширение прототипов объектов
Функция extend из библиотеки Base работает точно так же, как функция mixin, но, в отличие от последней, она добавляет все свойства и методы смеси к прототипу функции!конструктора.


Вследствие этого все последующие экземпляры, созданные с помощью такого конструктора, автоматически будут приобретать все эти новые свойства и методы:
dojo.extend(/*Function*/constructor, /*Object*/props, ... )
//Возвращает Function
Ниже приводится пример использования функции extend:
function Man() {
this.x = 10;
}
function Myth() {
this.y = 20;
}
function Legend() {
this.z = 30;
}
var theMan = new Man;
var theMyth = new Myth;
var theLegend = new Legend;
function ManMythLegend() {}
var theManTheMythTheLegend = new ManMythLegend;
dojo.extend(ManMythLegend, theMan, theMyth, theLegend);
var theTheManTheMythTheLegend = new ManMythLegend;

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

Еще одна важная область применения функции extend – обеспечение более простой возможности создавать классы, чем обычно; когда все, что необходимо, реализуется через свойство prototype объекта.


Использование функции extend таким способом – это, скорее, вопрос вкуса, хотя конечный результат при этом обычно получается более компактным. Ниже с целью демонстрации приводится переделанная версия нашего волшебного сценария из примера 2.6:
dojo.provide("dtdg.Genie");
//определить объект
dtdg.Genie = function() {}
//и расширить его
dojo.extend(dtdg.Genie, {
_predictions : [
"As I see it, yet",
"Ask again later",
"Better not tell you now",
"Cannot predict now",
"Concentrate and ask again",
"Don't count on it",
"It is certain",
"It is decidedly so",
"Most likely",
"My reply is no",
"My sources say no",
"Outlook good",
"Outlook not so good",
"Reply hazy, try again",
"Signs point to yes",
"Very doubtful",
"Without a doubt",
"Yes",
"Yes - definitely",
"You may rely on it"
],
initialize : function() {
var label = document.createElement("p");
label.innerHTML = "Ask a question. The genie knows the answer...";
var question = document.createElement("input");
question.size = 50;
var button = document.createElement("button");
button.innerHTML = "Ask!";
button.onclick = function() {
alert(dtdg.Genie.prototype._getPrediction());
question.value = "";
}
var container = document.createElement("div");
container.appendChild(label);
container.appendChild(question);
container.appendChild(button);
dojo.body().appendChild(container);
},
getPrediction : function() {
//получить псевдослучайное число в диапазоне от 0 до 19,
//которое будет играть роль индекса предсказания
var idx = Math.round(Math.random()*19)
return this._predictions[idx];
}

Клонирование объектов
Язык JavaScript предусматривает создание лишь поверхностных копий, поэтому, когда в операциях присваивания участвуют объекты JavaScript и узлы DOM, часто возникает необходимость в клонировании, или создании полных копий иерархий объектов.


В библиотеке Base имеется функция clone, которая обеспечивает высокоэффективный способ копирования. Взгляните на следующий простой пример:
function foo() {
this.bar = "baz";
}
var foo1 = new foo;
var foo2 = foo1; //shallow copy
console.log(foo1.bar);
console.log(foo2.bar);
foo1.bar = "qux"; //изменение foo1 приводит к изменению foo2
console.log(foo1.bar); // qux
console.log(foo2.bar); // qux
foo3 = new foo
foo4 = dojo.clone(foo3); //полная копия
foo3.bar = "qux";
console.log(foo3.bar); // qux
console.log(foo4.bar); // baz

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
Аргументы «функции в виде строк»
Блочная модель
Грубое определение типа
Добавление узлов
Зачем управлять беспорядком

Вернуться в раздел: Dojo / Утилиты броузера