Разработка больших JavaScript-решений: 1 файл = 1 класс

В наши дни JavaScript-кода писать приходится все больше и больше. Единственный способ справляться с большим количеством кода – это разбивать его, структурировать, дробить на небольшие и понятные кусочки. Я лично в этом отношении использую два простых правила:

1. 1 класс = 1 файл
2. В 1 файле – не более 300 строк

Эти правила отлично работают и для серверного кода, и для клиентского. Но если серверный код автоматически, средствами Visual Studio, компилируется в единственный dll-файл, то JavaScript приходится склеивать в один кусок “вручную”.

В этом посте я хочу рассказать, как это можно сделать.


А сделать это можно разными способами... Например, это можно сделать с помощью свойства CompositeScript объекта ScriptManager. Но ScriptManager частично не работает в SharePoint Sandbox, и к тому же этот вариант не позволяет произвести минификацию итогового JavaScript.

Поэтому я использую для склейки примитивное T4-преобразование. Например, давайте предположим, что в корневой папке проекта у вас лежат файлы Script1.js и Script2.js:

Чтобы их склеить, T4-шаблон будет следующим:

<#@ template debug="false" hostspecific="true" language="C#" #>
<#@ output extension=".js" #>
<#@ Import Namespace="System.IO" #>

Type.registerNamespace("MyCompany.MyNamespace");

<#= GetFileContents(@"Script1.js") #>
<#= GetFileContents(@"Script2.js") #>

<#+

    private string GetFileContents(string filename)
    {
        var path = Path.GetDirectoryName(this.Host.TemplateFile);
        return File.ReadAllText(Path.Combine(path, filename));
    }

#>

Этот код нужно добавить в файл типа “Text Template”:



Как только вы скопипастите код в файл и сохраните его, в подчиненном js-файле обнаружится склеенное содержимое Script1.js и Script2.js:




Что ж, файлы склеили – получили “debug”-версию скрипта. Но для отгрузки на продакшн использовать такую склейку, конечно, не годится – надо бы её минифицировать. Это можно сделать очень легко с помощью утилиты Microsoft Ajax Minifier, доступной на Codeplex.

После установки Ajax Minifier, вам потребуется прописать строку его вызова в Pre-Built Event проекта. Для нашего случая строка будет выглядеть примерно так:

"C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\AjaxMin.exe" -JS $(ProjectDir)\CompositeScript.debug.js -out $(ProjectDir)\CompositeScript.js -CLOBBER

(опция -CLOBBER позволяет Minifier’у перезаписывать файлы).

После первого билда можно включить сгенерированный файл CompositeScript.js в состав проекта.

Таким образом, получаем две версии полного JavaScript-файла. Впоследствии обе версии можно каким-нибудь способом задеплоить в SharePoint. Контрол ScriptLink автоматически будет подключать debug- или release-версию скрипта в зависимости от текущей настройки параметра debug в файле web.config.

P.S. Также о минификации можно почитать у Wictor Wilen.