Что такое лучшая практика для обработки файлов JavaScript и CSS

Question

Как вы управляете всеми своими файлами .js и .css в проекте asp.net. Особенно, когда они сильно зависят друг от друга?

Я объединил все сценарии в одном. Но это стало весомым, и 90% из них не были использованы на определенных страницах. Мне нужен инструмент или руководство для управления всеми этими сценариями, простое управление зависимостями, которые помогают включать на страницу только те JS и CSS, которые нужны на этой странице.

Также используется гайка ScriptManager, когда вы используете много элементов управления, это очень удобно .... возможно, я использую это неправильно.

Answer 1

В наших проектах мы помечаем скрипты и CSS как ресурсы для класса, а затем регистрируем их в течение жизненного цикла страницы, обычно в PreRender ().

Например:

// Css
[assembly: WebResource("Assembly.Class.MyClass.css", "text/css")]
// Javascript
[assembly: WebResource("Assembly.Class.MyClass.js", "text/javascript")]
namespace OurNamespace
{
   public class MyClass...

Затем мы устанавливаем свойства каждого из наших сценариев и файлов CSS в качестве встроенных ресурсов.

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

Затем мы написали класс на уровне обработчика HTTP, который обрабатывает сжатие всех ресурсов CSS в один файл перед его потоковой передачей, чтобы убедиться, что мы не достигли предела в 32 файла CSS для IE6. Он также удаляет пробелы, комментарии и т. Д. Из наших сценариев для оптимизации вывода JavaScript.

Answer 2

Вот как я обычно это делаю:

CSS: 5 файлов изначально. reset.css (из YUI), struct.css, general.css (границы, фоны, z-index и т. д.), typography.css и base.css, которые импортируют 4 других файла css.

Javascript: Я взял код, лежащий в основе идеи ASP.NET, и применил его к моим JS-файлам с точки зрения именования. Пример: специфичный для страницы JS-файл для home.aspx называется home.aspx.js. Затем у меня будут отдельные JS-файлы, основанные на плагине или функциональности, и, вероятно, common.js, который будет содержать все глобальные переменные.

Возможно, это не все чаепитие, но я надеюсь, что это даст вам некоторые идеи!

Answer 3

Я делю файлы JS по функциональности.

Наиболее распространенные функции, которые используются почти везде, относятся к одному файлу,

Другие классы и методы отправляются в свои файлы.

Для Css у меня есть один общий файл для всего сайта.

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

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

Answer 4

Я предпочитаю разделять мои JS-файлы в зависимости от их функции - например, у меня может быть один JS-файл для всех взаимодействий на основе AJAX, один для всех валидаций и общая JS-библиотека для всех функций, общих для всего Интернета приложение. Наличие одного файла, объединяющего все JS-скрипты в один, определенно замедлит работу приложения, поскольку каждая страница будет загружать весь файл, даже если только небольшая часть может быть релевантной.

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

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