Как вы упорядочиваете свой Javascript-код?

17

Когда я только начинал с Javascript, я обычно просто добавлял все, что мне нужно, в функции и называл их, когда мне это нужно. Что было тогда.

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

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

Кроме того, чтобы сделать его доступным для чтения, каковы ваши шаги в том, чтобы отделить HTML от логики кода? Предположим, вам нужно создать динамические строки таблицы с данными. Вы включаете это в свой Javascript-код, добавляя элемент td в строку или делаете что-либо еще. Я ищу решения и идеи реального мира , а не некоторые теоретические идеи, высказанные каким-то экспертом.

Итак, если вы не поняли выше, используете ли вы методы ООП. Если вы не используете то, что используете?     

задан Dhana 28.08.2009 в 03:34
источник

6 ответов

24

Для действительно JS-тяжелых приложений вы должны попытаться имитировать Java.

  • Как можно меньше JS в вашем HTML (желательно - просто вызов функции бутстрапа)
  • Разбить код на логические единицы, сохранить их в отдельных файлах
  • Используйте сценарий для объединения / минимизации файлов в один пакет, который вы будете выполнять как часть вашего приложения.
  • Используйте пространства имен JS, чтобы избежать загромождения глобального пространства имен:

var myapp = {}; 
myapp.FirstClass = function() { ... }; 
myapp.FirstClass.prototype.method = function() { ... }; 
myapp.SecondClass = function() { ... }; 

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

    
ответ дан levik 28.08.2009 в 05:13
источник
8

Я использую ненавязчивый javascript, поэтому вне тегов скрипта я не сохраняю javascript в html.

Эти два полностью разделены.

Функция javascript запустится, когда дерево DOM будет завершено, которое пройдет через html и добавит события javascript, и все, что еще нужно изменить.

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

Итак, например, если у меня есть функции пользовательского интерфейса, я могу назвать их: myapp_ui_functions.js

Я пытаюсь поместить имя приложения в имя файла, если только не существует javascript, который является общим для нескольких проектов, таких как strings.js.

    
ответ дан James Black 28.08.2009 в 03:41
источник
6

У меня есть (обычно) один файл, содержащий кучу функций и все. Это включено в каждую страницу, использующую Javascript. На самих страницах я вызову следующие функции:

$(function() {
  $("#delete").click(delete_user);
  $("#new").click(new_user);
});

, где delete_user() и new_user() определены во внешнем файле.

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

Вам не нужен отдельный файл для каждой страницы. Это просто означает более ненужные внешние HTTP-запросы. С одним файлом - если вы его кэшировали эффективно - он будет загружен один раз, и все (пока оно не изменится).

Если у меня есть большое количество Javascript или сайт эффективно разделен на несколько областей, тогда я могу разбить Javascript, но это не так часто.

Кроме того, с точки зрения моего исходного кода, у меня может быть несколько JS-файлов, но я часто объединяю их в одну загрузку для клиента (для сокращения HTTP-запросов).

Подробнее в Несколько файлов javascript / css: лучшие практики? и < a href="http://www.cforcoding.com/2009/05/supercharging-javascript.html"> Надстройка Javascript в PHP .

    
ответ дан cletus 28.08.2009 в 03:48
источник
2

Я переписывал много своего многоразового кода в качестве плагинов jQuery. Когда я начал делать ASP.NET MVC, я перешел в jQuery из Prototype. Сверхурочная работа. Я переместил много своего многоразового кода или, по крайней мере, идеи, из OO-прототипов в плагины jQuery. Большинство из них хранятся в своих JS-файлах (в основном, в интрасети, поэтому скорость загрузки страниц довольно высока, несмотря на дополнительные запросы). Я полагаю, что я мог бы добавить шаг сборки, который объединяет их, если мне нужно.

Я также остановился на подходе MasterPage, который использует ContentPlaceHolder для скриптов, который находится непосредственно перед закрывающим тегом body. Стандартный пользовательский интерфейс jQuery / jQuery загружается, и любые другие распространенные JS идут прямо перед заполнителем сценария в MasterPage. У меня крошечный бит JS в верхней части MasterPage, который определяет массив, который содержит любые функции, которые частичные представления должны запускаться при загрузке страницы. Эти функции запускаются из базовой функции document.ready () в MasterPage.

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

    
ответ дан tvanfosson 28.08.2009 в 03:44
источник
0

Кроме того, если вы хотите перейти на OO heavy, проверьте mochikit: Ссылка

    
ответ дан David 28.08.2009 в 03:47
источник
0

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

Самый чистый формат для записи объектов javascript

И получил некоторые фантастические ответы о том, как хорошо писать код javascript. Если вы будете следовать этим основным принципам, вы можете легко использовать практически любую библиотеку, такую ​​как yui, jquery и prototype.

    
ответ дан Zoidberg 28.08.2009 в 03:56
источник