MVC .NET 3 - Поддерживаемые, дружественные к рефакторингу файлы Javascript

Question

У меня в настоящее время есть специфичные для страницы файлы javascript, которые выглядят примерно так:

$(document).ready(function () 
{
  namespace.home.list = {}; 

  namespace.home.list.Update = function ()
  {
    var element = $(namespace.ElementIds.LIST);
    //some code that pulls a list from the server and dumps the data into our element
  });
};

По моему собственному соглашению, этот файл .js должен принадлежать Controller Home / List (и соответственно View Home /List.cshtml).

Кроме того, namespace.ElementIds содержит список идентификаторов, которые вручную синхронизируются с (почти) идентичным файлом .cs, так что созданный сервером html создает элементы с теми же идентификаторами, которыеЯ ссылаюсь в моих файлах js.

Я недоволен этим как решением для поддержания моего пространства имен elementId и js удобным для рефакторинга.Есть ли способ лучше?

В настоящее время мой javascript загружается через теги сценария с атрибутами src, но я рассмотрел возможность их размещения в файлах .cshtml, в которых нет ничего, кроме тега сценария с некоторой разметкой бритвы, которая позволила бы мне определять пространства имен + elementIds, используя толькомои классы C #.У меня такое чувство, что это не очень хорошая идея, но я не знаю почему.Это расширило бы мои возможности по рефакторингу и привязке кода моего сервера к моему клиентскому коду, но каковы недостатки?Недостаток кеширования?Снижение производительности?

Answer 1

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

Что вам нужно сделать, это создать / использовать систему, которая собирает все ваши файлы JS в вашем проекте и объединяет их в один уменьшенный файл js (или 2-3, если вам нужны более легкие грузы на местах).Это гарантирует, что они загружаются быстро и за один раз.

Затем вы связываете один файл в вашем документе, и не имеет значения, на что вы переименовываете исходный файл js.Или где он живет.

Что касается пространства имен, то вы должны заметить:

Вы, вероятно, должны обернуть большинство своих модулей в область видимости, чтобы не загрязнять ваше глобальное пространство имен, к ним добавленоПреимущество предоставления вам ярлыка для вашего механизма пространства имен:

;(function($, $namespace) {

    var $module = $namespace.list = {};

    $module.Update = function ()
    {
       var element = $($namespace.ElementIds.LIST);
       //some code that pulls a list from the server and dumps the data into our element
    };

})(jQuery, namespace.home);

Это позволяет вам иметь частные вспомогательные функции с полезными (общими) именами.Поскольку они доступны только из этой области и не будут конфликтовать с другими модулями.Кроме того, это гарантирует, что ваш jQuery никогда не конфликтует с другой библиотекой js, которая может принимать идентификатор $ в глобальном пространстве имен.