Вопрос наилучшей практики объектно-ориентированного JavaScript: как мне настроить мои объекты для следующих целей?

Question

Я решил, что мне нужно улучшить свои навыки программирования на javascript, а также навыки OO. В настоящее время я читаю некоторые книги, но иногда трудно понять теорию, не увидев сначала практических примеров. Итак, у меня есть теоретический вопрос о «лучших практиках» для следующего сценария ...

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

В настоящее время я делаю это процедурно с небольшой помощью из библиотеки jQuery:

Я принимаю список записей тегов поиска с сервера в формате JSON. Это выглядит так:

[
   { "searchTagName" : "tagOne", "searchTagID" : "1" },
   { "searchTagName" : "tagTwo", "searchTagID" : "2" },
   { "searchTagName" : "tagThree", "searchTagID" : "3" },
   etc...
]

Я выгружаю JSON непосредственно в jTemplates, чтобы создать соответствующий HTML, например так:

$("#searchTagList")
   .setTemplateElement("template_searchTagList")
   .processTemplate(searchTagData);

Наконец, я хочу, чтобы была возможность изменить каждый тег поиска с помощью метода редактирования на месте, поэтому я присоединяю предварительно созданный метод редактирования на месте к каждому элементу HTML:

$(".searchTag").editInPlace();

Это очень хорошо работает процедурно. И, возможно, самым разумным было бы оставить достаточно хорошо одного. :) Но, ради аргумента, как лучше написать что-то подобное с точки зрения ОО.

Должен ли я иметь один объект "searchTagList", который имеет методы для каждого из шагов, описанных выше?

var searchTagList = 
{
    searchTagData: JSONdata,
    renderList: function () { /*send to jTemplates */ }
    bindEdit: function() { /* attach edit-in-place */ }
}

Или это неправильно? (Кажется, что все, что я делаю, это оборачиваю свои процедурные функции в объект.) Должен ли я каким-то образом анализировать данные JSON в экземплярах каждого тега поиска, а затем прикреплять отдельные методы к каждому тегу поиска? (Это похоже на большие накладные расходы, без выгоды.)

Заранее извиняюсь, если кажется, что я ковыряюсь в волосах. Но я очень хочу, чтобы все было в голове.

Спасибо

Travis

Answer 1

На самом деле, примеры jQuery, которые вы разместили, не являются процедурными, они OO.В частности, они являются реализацией цепочечных объектов, которая пришла из школы программирования на основе флюидов. OO design.

Процедура будет выглядеть примерно так:

var el = cssQuery("#searchTagList");
var templateObject = makeTemplate(el,"template_searchTagList");
processTemplate(templateObject,searchTagData);

Функциональность будет выглядеть примерно так:

processTemplate(
    makeTemplate(
        cssQuery("#searchTagList"),
        "template_searchTagList"
    ),
    searchTagData
);

jQuery проделали довольно хорошую работу по объективизации DOM API.Можно использовать его как источник вдохновения для вашей собственной библиотеки OO DOM.Еще один, на который я бы порекомендовал вам обратить внимание - это YUI3 (YUI2 очень процедурный).

В частности, общий шаблон jQuery и YUI3:

nodeListConstructor(query_string).nodeMethods();

Где они определяютOO-подобный объект узла, чтобы обернуть вокруг DOM HTMLElements, а затем другой объект OO стиля nodeList, чтобы позволить вам пакетировать узлы процесса.По моему скромному мнению, это хороший шаблон дизайна.

Answer 2

Вы можете использовать шаблон Javascript Module для хорошего эффекта здесь.

В соответствии с этим шаблоном определение searchTagList изменится на:

var searchTagList = function() {
    searchTagData: JSONdata;
    return {
    renderList: function () { /*send to jTemplates */ },
    bindEdit: function() { /* attach edit-in-place */ }
   };
}();

Две функции renderList и bindEdit по-прежнему будут иметь доступ к searchTagData, но останутся недоступными для кодирования вне модуля searchTagList.

Обратите внимание, что анонимная функция выполняется немедленно и возвращает объект, содержащий два открытых метода (renderList и bindEdit), которые образуют замыкание для закрытого члена searchTagData.

Вы можете узнать больше о шаблоне модуля здесь .