Yepnope or Modernizr.load() with bundling in ASP.NET MVC 4

С времето и натрупването на опит при писането на различни проекти – за зареждането на Javascript файлове съм обособил няколко основни стъпки, които следвам.

В <head> винаги зареждам само AMD файла и (в повечето от случаите) този за анализаторите.

А преди тагът </body> зареждам инициализиращия файл, като в него са „namespace“ с дефинициите на глобалните променливи, window променливите и методи и логиката за асинхронното зареждане за останалите Javascript файлове. Най-често го наименувам Init.js.

За асинхронното зареждане използвам основно Yepnope. Разбира се, ако сте ASP.NET MVC разработчик, най-вероятно използвате Modernizr.load() (по разбираеми причини :о), което реално пак е Yepnope, но вкаран в контекста на Modernizr.

Новото в ASP.NET 4 е BundleConfig файла, където може окажете вашите bundle колекции от Javascript и/или CSS файлове.

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/Init/Js").Include("~/UI/Scripts/Global/Init.js"));

    ...

    BundleTable.EnableOptimizations = true;
}

Това е съвсем нормално описание. Нищо, което да е различно или да изисква специално внимание. Естествено извикването във view-то (почти винаги е в _Layout) също е „по-учебник“:

@section scripts {
    @Scripts.Render("~/Init/Js")  
}

Интересното идва, когато се опитате реферирате bundle вътре в Init.js. Разбира се може да го направите динамичен, като Razor View, но… може да го реферирате и директно като…

В BundleConfig файла:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/Init/Js").Include("~/UI/Scripts/Global/Init.js"));
    bundles.Add(new ScriptBundle("~/Actions/Js").Include("~/UI/Scripts/Fn/Actions.js"));

    ...

    BundleTable.EnableOptimizations = true;
}

В Init.js файла

Modernizr.load({
    load: ['/Actions/Js'],
    complete: function () { ... }
});

Трябва да внимавате за имената на реалните и виртуалните пътища. Също така, ако го ползвате в CSS фаилове с @import (макар да не го препоръчвам), трябва да внимавате при релативните отстъпи на пътищитата за катинките.

Вашият коментар

This site uses Akismet to reduce spam. Learn how your comment data is processed.