Javascript: Как понять все рамки и философию дизайна?

Я некоторое время был пользователем jQuery (и некоторых его небольших плагинов). Код Javascript, который я разработал на протяжении многих лет, можно описать как... беспорядочный. Он использовал тонну глобальных переменных и функций здесь и там, не использовал стандартные способы организации кода и любые шаблоны проектирования.

В настоящее время я создаю новую версию веб-сайта, и я завершил создание бэкэнд с PEAR:: MDB2 и Smarty. Остальное - просто доморощенный PHP с некоторыми классами.

Теперь я нахожусь в точке, где я добавлю слой Javascript поверх веб-сайта, чтобы улучшить удобство использования некоторых функций. (при том, что все грамотно ухудшается). Я хочу писать лучше, более чистый, более организованный Javascript, чем раньше, поэтому я сделал небольшое исследование. Я прочитал Stefanov Объектно-ориентированный Javascript, чтобы лучше понять некоторые понятия, которые я знал только относительно (прототипы, конструкторы и т.д.). Теперь я застрял в точке, где мне интересно, какие рамки Javascript я должен использовать, и как организовать все это.

После проведения моего исследования я понял Cappuccino и Objective-J, а Sproutcore не был что я искал. Чтобы процитировать Cappucino о странице:

Cappuccino не предназначен для создания веб-сайтов или делает существующие сайты более "динамичными". Мы считаем, что эти цели слишком далеки от тех, которые разрабатываются при разработке приложений, чтобы они были удовлетворены единой структурой. Такие проекты, как Prototype и jQuery, отлично подходят для этих задач.

Так вот что. Затем я узнал о Coffee Script, который больше похож на один "компилятор" и не поможет мне с фактической организацией моего кода,

Я также наткнулся на некоторые статьи, которые дают рекомендации:

Я также узнал о Backbone.js, Shoestring, JavaScriptMVC, Google Loader, jQuery Tools, jQuery UI. Я не знаю, что делать со всем этим... То, что я знаю:

Я не хочу вкладывать слишком много времени в изучение чего-то слишком сложного, я хочу как можно больше держать вещи простыми и гибкими (поэтому я не использую Symfony на бэкэнд, например), но чистые и организованные.
Я хочу использовать jQuery, вопрос в том, что я должен использовать с ним? (это тоже совместимо)

В настоящее время я использую jQuery и jQuery Tools и "организую" все это в простом литерале пространства/объекта с простыми свойствами и методами, а также, поскольку сайт локализован, я просто планирую использовать простой vsprintf (как это делается на бэкэнд) с парами ключ: значение, загружаемыми из литерала объекта, предоставленного бэкэнд. JavaScriptMVC кажется интересным, но я боюсь, что это принесет слишком много сложности для проекта, который довольно мал. Вот где мне нужен ваш совет! Большое вам спасибо заранее.

Ответ 1

Хорошо, моя попытка ответить:

Нет никакого "лучшего" способа сделать это. Теперь вы знаете, что там, и я думаю, что вы, возможно, предпочитаете себя за то, что хотите. В этом случае выберите структуру и узнайте ее наизнанку. (извините, что вы вскрыли свой пузырь, но в каждой структуре есть кривая обучения, некоторые крутые, некоторые очень легкие, но в конце концов, чтобы использовать ее хорошо, вам нужно инвестировать в нее. Просто сделайте это, вы не пожалеете).

Конечно, вы предпочитаете чистый код, поэтому вы можете принять во внимание некоторые соображения. Вы также говорите, что у вас есть предпочтение jQuery, что хорошо, но есть некоторые ограничения (как также указано в ссылке, предоставленной eskimoblood).

Есть несколько хороших лекций и учебников с советами о том, как структурировать свой код в jQuery:

Некоторые руководства по стилям:

Инструменты для проверки кода

Стандартные работы (javascript)

Там может быть больше.. возможно, больше людей могут внести свой вклад, но я также думаю, что вы почти достигли конца того, что вы можете узнать, прежде чем руки будут грязными. Многие из этих руководств написаны очень общим образом, но интересно то, что javascript вызван во многих конкретных ситуациях. Возможно, было бы полезно просто опубликовать некоторый код, который вы считаете "грязным", и мы можем помочь вам разобраться, как это сделать лучше. Удачи!

Ответ 2

Вы должны смотреть видео и читать ссылки в этой статье, а затем вы должны снова спросить себя, если jquery - правильный инструмент. Возможно, вы будете использовать dojo, что намного лучше для крупных проектов, или вы посмотрите на основу и где вы можете оставаться с jquery. В конце концов, оба они более "javascriptish", затем что-то вроде sproutcore, cappuciono или даже GWT. А также гораздо легче понять, когда вы пришли из jquery.

Ответ 3

Один фреймворк, который следует рассмотреть, определенно ReactJS из Facebook. Эта структура довольно гладкая во многих отношениях.

Прежде всего вы должны знать, что это структура представления. Его можно использовать на стороне сервера для предварительной обработки страниц, но он действительно светит на стороне клиента. Так как это ракурс представления, его можно использовать с основой или любой другой "back-front" -end framework.

Одним из главных моментов Реагента является его быстрота. Он хранит виртуальный DOM в памяти и виртуализирует все события веб-страниц. Таким образом, событие virtuals используется для сохранения агностиков браузера событий.

Виртуальный тип DOM позволяет программировать динамический сайт, как если бы вы программировали старый статический веб-сайт. Вы можете просто снять весь HTML-код для рендеринга в механизм просмотра (как если бы вы перерисовывали всю страницу), и он будет управлять операциями DOM. Он выполняет разницу между новым виртуальным DOM и текущим виртуальным DOM и только вставляет узлы, которые необходимо вставить. Таким образом, вы уменьшаете количество операций DOM и тем самым увеличиваете скорость рендеринга на много.

Хорошее место для начала - этот учебник, в котором показано, как использовать "Flux" (веб-поток, разработанный Facebook для своего сайта) в чтобы реализовать приложение Todo!

Ответ 4

Создаете ли вы сайт, который будет использовать AJAX? Затем вы можете использовать Backbone.js для организации вашей клиентской стороны JS.

Прочтите эту статью для справки: http://www.codethinked.com/building-epic-win-with-backbone-js