2009-05-20 3 views
8

Я использую ASP.NET MVC в течение шести месяцев или около того и проверял пример Nerd Dinner, созданный этими ребятами из Microsoft. Одна вещь, которую я заметил, что они делали при включении AJAX в RSVP для обеда, помещает ссылки JavaScript в User Control, используемые для RSVPing.
(FILE: RSVPStatus.ascx)Связывание библиотек JavaScript в элементах управления пользователями

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NerdDinner.Models.Dinner>" %> 

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>  

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

Итак, я спрашиваю, правильное ли мое мышление, и эти ссылки должны находиться в более центральном месте, таком как главная страница?

Пожалуйста, дайте мне знать, что такое лучшая практика для этого и для профессионалов и против, если они есть.

+1

Я положил их туда, потому что я был только используя частичный один раз. Если бы я использовал его дважды, я бы поднял его. Нет необходимости строить для многократного использования, если я не использую его несколько раз. –

+1

@Scott, куда бы вы их перевезли? Наверное, это действительно вопрос. Если они вам не нужны на всех страницах просмотра, то представляется бесполезным включать их на главную страницу. –

ответ

7

Я определенно советовал положить их в партиалов для именно причина, о которой вы говорите. Существует высокая вероятность того, что один вид может вывести две частичные части, которые имеют ссылки на один и тот же файл js. Вы также получили удар по загрузке js перед загрузкой остальной части html.

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

Вот пример главной страницы - это очень понятно.

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> 
<head runat="server"> 
    ... BLAH ... 
    <asp:ContentPlaceHolder ID="AdditionalHead" runat="server" /> 
    ... BLAH ... 
    <%= Html.CSSBlock("/styles/site.css") %> 
    <%= Html.CSSBlock("/styles/ie6.css", 6) %> 
    <%= Html.CSSBlock("/styles/ie7.css", 7) %> 
    <asp:ContentPlaceHolder ID="AdditionalCSS" runat="server" /> 
</head> 
<body> 
    ... BLAH ... 
    <%= Html.JSBlock("/scripts/jquery-1.3.2.js", "/scripts/jquery-1.3.2.min.js") %> 
    <%= Html.JSBlock("/scripts/global.js", "/scripts/global.min.js") %> 
    <asp:ContentPlaceHolder ID="AdditionalJS" runat="server" /> 
</body> 

Html.CSSBlock & Html.JSBlock, очевидно, мои собственные расширения, но опять же, они сами за себя в том, что они делают.

Тогда, скажем, с точки зрения SignUp.aspx я бы

<asp:Content ID="signUpContent" ContentPlaceHolderID="AdditionalJS" runat="server"> 
    <%= Html.JSBlock("/scripts/pages/account.signup.js", "/scripts/pages/account.signup.min.js") %> 
</asp:Content> 

HTHS, Чарльз

Пс. Я согласен с Андреем в том, что любая общая JS, которая определена непосредственно на главной странице, должна быть объединена и минимизирована.

EDIT: Моя реализация .JSBlock (а, б) в соответствии с просьбой

public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName) 
{ 
    return html.JSBlock(fileName, string.Empty); 
} 

public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName, string releaseFileName) 
{ 
    if (string.IsNullOrEmpty(fileName)) 
     throw new ArgumentNullException("fileName"); 

    string jsTag = string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>", 
           html.MEDebugReleaseString(fileName, releaseFileName)); 

    return MvcHtmlString.Create(jsTag); 
} 

А потом, где магия происходит ...

public static MvcHtmlString MEDebugReleaseString(this HtmlHelper html, string debugString, string releaseString) 
    { 
     string toReturn = debugString; 
#if DEBUG 
#else 
     if (!string.IsNullOrEmpty(releaseString)) 
      toReturn = releaseString; 
#endif 
     return MvcHtmlString.Create(toReturn); 
    } 
+0

Отлично, спасибо за ответ, что является хорошим подходом к минимизации js-файлов в мире ASP.NET MVC? – Brettski

+0

Хороший вопрос ... Я немного ленив в данный момент, и я просто запускаю bat-файл как часть сборки, которая минимизирует все мои js. Jsmin.exe можно найти здесь http://www.crockford.com/javascript/jsmin.html - там есть код C#, поэтому вы можете свернуть свое приложение minifiy. Мне было бы интересно услышать, как кто-то объединяет AND/OR, или их минимизирует на лету ИЛИ во время сборки. – Charlino

+0

Я только что открыл еще один вопрос, чтобы ответить на то, что является хорошим подходом к конкатенации и минимизации файлов JS (& CSS) - http://stackoverflow.com/questions/890561/concatenate-minify-js-on-the-fly- or-at-build-time-asp-net-mvc – Charlino

0

На моем веб-сайте www.trailbehind.com у нас есть набор файлов javascript, которые принадлежат всем страницам. А затем некоторые страницы содержат дополнительные библиотеки.

Для файлов JS, которые используют все страницы (есть несколько десятков файлов), мы объединяем их и минимизируем их при сборке.

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

Вот наш питон код для объединения и преуменьшать:

 
import os 
import thetrailbehind.lib.jsmin as jsmin 

JS_FILES = [ 'lib/json2.js', 
       'lib/markermanager.js', 
       'lib/labeledmarker.js', 
       'lib/rsh/rsh.js', 
       'lib/showdown.js', 
       'lib/yui.js', 
       'lib/dragzoom.js', 
       'gen/attribute_data.js', 
       'gen/national-parks.js', 
       'Widgets/CommentsWidget.js', 
       'Widgets/Search.js', 
       'Widgets/MenuWidget.js', 
       'Widgets/PhotoWidget.js', 
       'Widgets/ReportList.js', 
       'Widgets/help.js', 
       'attributes.js', 
       'rsh.js', 
       'map.js', 
       'mapcontrols.js', 
       'markers.js', 
       'amazon.js', 
       'plan_trip.js', 
       'init.js',] 


def concat(files, base_path, all_file, all_file_min): 
    if os.path.exists(base_path + all_file): 
    lasttime = os.path.getmtime(base_path + all_file) 
    else: 
    lasttime = 0 
    out_of_date = False 
    for file in files: 
    if os.path.getmtime(base_path + file) > lasttime: 
     out_of_date = True 
     break 
    if out_of_date: 
    outfile = open(base_path + all_file, 'w') 
    for file in files: 
     outfile.write(open(base_path + file).read()) 
     outfile.write("\n") 
    outfile.close() 

    alljs = open(base_path + all_file) 
    allminjs = open(base_path + all_file_min, "w+") 
    jsmin.JavascriptMinify().minify(alljs, allminjs) 
    alljs.close() 
    allminjs.close() 



def main(): 
    concat(JS_FILES, '/home/wibge/thetrailbehind/media/javascript/', 'gen/all.js', 'gen/all.min.js') 


if __name__ == "__main__": 
    main() 

А вот шаблон/HTML Джанго, где мы включаем:

 
{% if use_all_js %} 
    script type=text/javascript src=/site_media/javascript/gen/all.min.js> 
{% else %} 
    script type="text/javascript" src="/site_media/javascript/rsh.js"> 
    script type="text/javascript" src="/site_media/javascript/amazon.js"> 
    script type="text/javascript" src="/site_media/javascript/map.js"> 
    A BUNCH OF SEPARATE INCLUDES...etc 
{% endif %} 
Смежные вопросы