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

Question

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

Я решил, что должен улучшить свой JavaScript, программируя навыки, а также мои навыки OO. Я в настоящее время прочитываю некоторые книги, но иногда трудно сжать теорию, не видя некоторых практических примеров сначала. Так, у меня есть теоретический вопрос о "лучших практиках" для следующего сценария...

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

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

Я принимаю JSON-закодированный список записей searchtag с сервера. Это похоже на это:

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

Я вывожу JSON непосредственно в jTemplates для создания соответствующего HTML, как так:

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

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

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

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

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

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

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

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

Спасибо,

Travis

6

javascript jquery oop

задан Travis 15 February 2010 в 10:10

2 ответа

Другие вопросы по тегам:

javascript jquery oop

Похожие вопросы:

score 1 · Answer 1

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

В соответствии с этим шаблоном определение 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.

Подробнее о шаблоне модуля можно прочитать здесь .

score 2 · Answer 2

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

Процедурным было бы что-то вроде:

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-подобный объект node для обхвата DOM HTMLElements, а затем другой объект nodeList в стиле OO, чтобы позволить вам пакетную обработку узлов. По моему скромному мнению, это хороший шаблон проектирования.