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

Question

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

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

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

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

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

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

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

• Использование шаблонов наследования для организации больших приложений jQuery
• Шаблон модуля JavaScript

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

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

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

Answer 1

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

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

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

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

• Как управлять большими приложениями jquery
• В больших приложениях jQuery
• Основные шаблоны Javascript и JQuery (бесплатная электронная книга)

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

• Пользовательский интерфейс ядра JQuery Styleguide
• Руководство по стилю Javascript для Google Closure

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

• JSLint
• JSHint (более щадящая / практичная вилка)
• Закрытие Линтер (еще не пробовал, но намерен)

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

• Все от Дугласа Крокфорда
• Quirksmode

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

Answer 2

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

Answer 3

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

Первое, что вы должны знать, это то, что это структура представления. Он может использоваться на стороне сервера для предварительного рендеринга страниц, но он действительно сияет на стороне клиента. Поскольку это каркас представления, его можно использовать с каркасом или любым другим каркасом с «задним фронтом».

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

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

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

Answer 4

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

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