Как организовать все JS, CSS, PHP и HTML-код?

Question

Теперь я знаю, что вы можете использовать ООП и MVC для организации, но это только для PHP.

Допустим, я добавляю новое окно, которое появляется, когда пользователь нажимает на ссылку, и оно отображает форму с проверками JS и в стиле CSS.

Здесь мы получили 4 кода: JS, CSS, PHP и HTML (с некоторыми фрагментами PHP).

Как бы вы организовали все эти коды? Потому что, когда я получил 50 окон, коды распространились повсюду, и для того, чтобы изменить поведение удаления окна, я должен играть детектива. Я хрущу каждый раз, когда мне нужно добавить новое окно с JS, CSS и т. Д.

Я думал о структуре. не было бы лучше, если бы у вас был отдельный «модуль» для каждого окна. Например. папка для каждого окна. На этой карте вы размещаете один CSS-, один JS-, один PHP- и один HTML-файл? Тогда у вас получилась очень хорошая структура, которая не беспорядочная, и вы не смешиваете все окна друг с другом в одном большом файле JS и CSS.

Что ты думаешь? И я был бы признателен за предложения о том, как организовать эти 4 вида кодов.

Answer 1

Мне нравится Django способ организации папок.Давайте попробуем представить и адаптировать его к вашему php-проекту:

Корневая папка - это папка Project, скажем, название веб-сайта.Он содержит

• общие общие настройки и значения (т. Е. Значения доступа к базе данных, пути и т. Д.), Возможно вспомогательные функции (не объектно-ориентированные), называют их settings.php и / или utils.php или любая другая папка
• media , которая также имеет свою собственную структуру:
  • папка css для общего css (т.е. сброс.css и common.css, для определения общего макета)
  • папка с изображениями, для общих общих изображений * папка с 1020 *
  • js, для общего общего кода javascript
• a template папка со статическими общими страницами, не относящимися к определенным категориям веб-сайта

Каждая корневая подпапка является выражением приложения вашего проекта(т.е. регистрация, новости, объявления, часто задаваемые вопросы, контакты, форум, ...) и содержит:

• a модель папку, в которую вы помещаете свои модели в PHP (MVCшаблон)
• контроллер папка, в которой вы реализуете Conтроллеры в шаблоне MVC
• папка view , в которую вы помещаете представления вашего шаблона MVC (т. е. весьма статических php-страниц, отвечающих только за представление результатов, переданныхПредставления)
• папка media структурирована точно так же, как папка для корневой папки.В эту папку вы помещаете элементы, относящиеся только к определенной части веб-сайта, который вы разрабатываете.

Для соединения компонентов вы можете напрямую вызывать / включать их на основе ихпути, или вы можете реализовать php-файл внутри корневого каталога и каждой подпапки, которая отвечает за отображение URL-адресов и перенаправление запросов.Назовите его index.php или urls.php или connector.php, как угодно.

Может показаться избыточным, но это не так, и обеспечивает высокое качество разделения проблем .

Answer 2

У меня обычно есть PHP-страницы в одной папке (возможно, 10 файлов, если это сайт среднего размера), а затем подпапка там, называемая media, в которую я помещаю папку css, папку js, папку img, папку swf и т.д.

У меня есть 2 файла css, один - сброс, другой - стиль для всего сайта, написанный кусками. Я использую класс в теге body для нацеливания на разные макеты страниц.

В папке js есть jquery, файл, который запускается на каждой странице, а затем файлы для отдельных страниц.

На самом деле все довольно просто.

Answer 3

Если вы ожидаете, что один и тот же пользователь откроет несколько из этих разных всплывающих окон во время одного посещения, ради них вам необходимо объединить ваши файлы, чтобы они были кэшированы и конечным пользователям не нужно было загружать все CSS / JS снова в каждом всплывающем окне.

Подход с папками подходит для изображений и JS. Если все всплывающие окна не отличаются друг от друга, я бы предложил один файл CSS для вашего собственного здравомыслия. Таким образом, структура вашей папки может выглядеть следующим образом:

css/
* layout.css
popups/
* add_new
   - add_new.js
   - logo.png
   - add_new.php
* delete
   - delete.js
   - other_logo.png
   - delete.php

Теперь, перед развертыванием, вы можете решить, имеет ли смысл скомпилировать ваш JS в один файл или лучше использовать отдельные файлы. (Например, если пользователь открывает 30 из 50 окон при каждом посещении, используйте один файл)

Answer 4

Если вам нужно / нужно, я бы создал папки верхнего уровня для JS, CSS, PHP и т. Д., Которые содержали бы код, который можно было бы использовать в разных окнах. Нет необходимости иметь 50 копий одного и того же файла CSS, если они все одинаковые или даже в основном один и тот же код.

Затем создайте папку для каждого «окна», в котором есть отдельные папки css, js и т. Д. Здесь вы можете поместить файлы, относящиеся к этому конкретному окну. Таким образом, если вы меняете только 1 правило CSS или функцию JS, которая используется каждым окном, вы можете изменить его в 1 месте.

Если вам когда-либо понадобится изменить правило только для одного окна, поместите правило в папку «local css» для этого окна, и оно заменит ваше значение по умолчанию. (То есть, если ваши HTML-ссылки это после "global css")

Answer 5

Если вы ищете примеры того, как разрабатывать приложения, то вам стоит взглянуть на множество фреймворков.Даже просто их файловая структура даст вам представление.Как правило, они организуют свой код в модули, в которых также находятся и код PHP, и шаблоны HTML.Ни на одном из них лучше посмотреть, но попробуйте: CakePHP, Symfony, CodeIgniter или Agavi.

Однако они не сделают большую работу, предложив способ организации файлов JavaScript и CSS.Когда я делаю приложение, у меня обычно есть только несколько CSS-файлов.Я удивлен, что вам, кажется, нужен по одному на страницу, но если вы это сделаете, вставьте их.Преимущество внешних таблиц стилей полностью теряется, если в их оформлении нет ничего повторно используемого.И снова, файлы JavaScript, если они не могут быть использованы повторно, просто вставьте их.Меньшее количество HTTP-запросов на загрузку страницы делает всех счастливыми.

Когда вы обнаруживаете, что отыскиваете определенный файл, который упрямо не появится, grep - бесценный инструмент. Вот случайная статья , которая иллюстрирует ее использование.

Answer 6

Если вы имеете дело только с упомянутыми типами файлов, мой лучший опыт заключается в том, чтобы папки и файлы разделяли все, и он также упорядочивал их по всему Очень легко найти по мере роста и расширения вашего сайта!

ОК, так что для папок вам нужны все ваши основные HTML , PHP файлы в:

/ public_html / (или как бы он ни вызывался у вас на хосте. т. е. основная область с cgi-bin внутри, которая видна как ваша основная веб-папка).

например -:

• public_html / index.html
• public_html / контакт-нас-по-email.php
• public_html / main.html
• public_html / archives.php

NEXT - это CSS и Javascript (JS) , они будут иметь свои собственные папки внутри вашей папки / public_html /. и каждый файл, оканчивающийся на .css или .js, помещается в эти конкретные папки, очевидно ...

например -:

• public_html / CSS / style.css
• public_html / CSS / dark.css
• public_html / CSS / mobile.css
• public_html / JS / colorpicker.js
• public_html / JS / main.js

---

И это То! Как легко вспомнить, и если вы достаточно продвинулись в кодировании, это лучший способ сделать что-то. Чем более вы продвинулись, тем больше типов файлов, а также тем более «аккуратно» вы хотите, чтобы он выглядел = организованным, вы можете добавить папку / includes / перед / css / / js / / templates / / images / & так далее!

Надеюсь, это сработает для вас или одного из них!

ЭТО МОЙ 1-й ВОПРОС ОТВЕТИЛ, ПОЭТОМУ Я САМ СЕБЯ И НАДЕЖДА ПОСТЕРУ, КАК МОЕ РЕШЕНИЕ, УДАЧИ!