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

18

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

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

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

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

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

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

6 ответов

25

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

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

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

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

    
ответ дан levik 28.08.2009 в 05:13
источник
  • Я забыл об пространствах имен. Это отличный ответ. Вы также можете использовать частные и защищенные переменные, но не все должно быть общедоступным. –  James Black 28.08.2009 в 20:27
  • @JamesBlack Не всегда практично в JS. Методы, определенные с помощью прототипирования, не могут получить доступ к частным переменным, поскольку они должны быть определены как локальные переменные в функции конструктора, а затем доступны через закрытие с помощью методов, определенных там. –  Asaf 19.05.2012 в 17:42
  • Я недавно занимался чтением и исследованиями, чтобы попытаться выяснить, как получить доступ к моей организации JavaScript. Это, безусловно, мой любимый способ сделать это. –  theblang 19.12.2012 в 18:36
8

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

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

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

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

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

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

    
ответ дан James Black 28.08.2009 в 03:41
источник
  • Это правильно, я просто хотел бы добавить, что это проще выполнить с помощью jQuery или Prototype. –  David 28.08.2009 в 03:43
  • Приятно, мне нравится идея иметь Javascript-файлы, похожие на HTML-страницы (я делаю это тоже для больших приложений). Мне нравится ненавязчивый код. Это заставляет мою кровь закипеть, чтобы увидеть событие onclick прямо на теге HTML. –  Dhana 28.08.2009 в 03:45
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
источник
  • Я создал систему depandency, которая позволяет мне вызвать нагрузку («уровень»), и Javascript запросит «javascript.php? jquery; jqueryui; level». PHP добавляет все файлы, запрошенные в один ответ (и будет оптимально минимизировать и кэшировать его). Это означает, что я могу разделить свой Javascript и почти всегда более эффективен, чем загрузка одного большого файла (потому что я не загружаю то, что мне не нужно). –  strager 28.08.2009 в 03:59
  • Тем не менее, мне нравится твоя идея создания отдельных функций, чтобы ... делать определенные вещи ... Эй, теперь это звучит очевидно, но это не было, когда я писал свой код! XD –  strager 28.08.2009 в 04:00
  • @strager, повторите свой второй комментарий. Да, одна из ловушек лямбда. –  Ionuț G. Stan 28.08.2009 в 05:18
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
источник
  • Мне нравится идея плагинов jQuery, но вы говорите, что в вашем приложении много событий, как вы разбиваете часть обработки событий? Любой код, который вы хотите поделиться? Мне нравится смотреть на код другого человека, чтобы увидеть, что я могу сделать, чтобы улучшить себя. –  Dhana 28.08.2009 в 03:49
  • Вы можете найти пару моих плагинов в моем блоге: farm-fresh-code.blogspot.com. –  tvanfosson 28.08.2009 в 03:57
0

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

    
ответ дан David 28.08.2009 в 03:47
источник
  • Дэвид, На данный момент я женат на jQuery, когда я представил его моей нынешней команде веб-разработчиков и моему будущему через 5 дней. Но я обязательно это проверю. –  Dhana 28.08.2009 в 03:54
  • Да, нет, это хороший брак :) jQuery потрясающий. –  David 28.08.2009 в 04:43
0

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

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

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

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