قم بتضمين ملف JavaScript في وجهات النظر الجزئية

https://stackoverflow.com/questions/912755

06-09-2019
|

سؤال

أنا أتساءل ما هي أفضل الممارسات لتضمين ملفات جافا سكريبت داخل طرق عرض جزئية. بمجرد تقديم هذا، سينتهي بك الأمر إلى أن JS تتضمن علامة HTML في منتصف صفحتي. من وجهة نظري هذه ليست طريقة لطيفة للقيام بذلك. إنهم ينتمون إلى علامة الرأس وعلى هذا النحو لا ينبغي أن يمنع المتصفح من تقديم HTML في إحدى المرء.

مثال:أنا أستخدم مسافة JQuery PictureGallery Plugin داخل عرض "PictureGallery" الجزئي حيث سيتم استخدام هذه الرأي الجزئي في عدة صفحات. يحتاج هذا البرنامج المساعد فقط إلى تحميله عند استخدام هذا العرض و لا أريد أن أحتاج إلى معرفة الإضافات التي تستخدم كل طريقة عرض جزئية ...

شكرا لإجاباتك.

المحلول

يبدو مشابها للغاية لهذا السؤال: ربط مكتبات JavaScript في عناصر تحكم المستخدم

سأقوم بإعادة نشر إجابتي بأن هذا السؤال هنا.

بالتأكيد أود أن أنصح ضد وضعها داخل الجزائر للسبب بالضبط ذكرك. هناك فرصة عالية أن عرض واحد يمكن أن يسحب في جزرين يراجعان المراجع إلى نفس ملف JS. لقد حصلت أيضا على الأداء الذي سجل JS قبل تحميل بقية HTML.

لا أعرف عن أفضل الممارسات ولكني اخترت تضمين أي ملفات JS شائعة داخل MasterPage ثم حدد حامل محتوى منفصل لبعض ملفات 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 من الواضح أن ملحقاتي الخاصة ولكن مرة أخرى، فهي تفسيرية ذاتيا في ما يفعلونه.

ثم في القول عرض الاشتراك.

<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 وسلسلةسلسل وتقليل JS على الطاير أو في وقت البناء - ASP.NET MVC

تعديل: على النحو المطلوب في إجابتي الأخرى، تطبيقي .jsblock (A، B) على النحو المطلوب

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);
    }

نصائح أخرى

السبب في وضع برنامج نصي في أسفل الصفحة هو ضمان تحميل DOM قبل محاولة أي معالجة. يمكن أيضا تحقيق ذلك في شيء مثل $ (المستند). Ready (رد الاتصال)؛ طريقة jquery.

أشارك في رأي عدم وضع جافا سكريبت مضمن في HTML. بدلا من ذلك، استخدم مساعد HTML لإنشاء DIV فارغ لاستخدامه كتعليمات خادم. Sig Helper هو HTML.ServerData (اسم السلسلة، بيانات الكائنات)؛

يمكنني استخدام طريقة ServeData هذه للحصول على إرشادات من الخادم إلى العميل. علامة DIV تبقيها نظيفة وسمة "البيانات" صالحة HTML5.

بالنسبة لتعليمات LoadScript، قد أفعل شيئا مثل هذا في My ASCX أو ASPX:

<٪ = html.serverdata ("loadscript"، جديد {url: "pathto.js"})٪>

أو إضافة مساعد آخر للقيام بذلك والتي تبدو منظف قليلا:

<٪ = HTML.LoadScript ("~ / path / to.js")٪>

سيكون إخراج HTML:

u003Cdiv name="loadScript" data-server="encoded json string" style=";text-align:right;direction:rtl">

ثم لدي طريقة مسج يمكنها العثور على أي علامة بيانات خادم: $ (lostitelement) .serverdata ("loadscript")؛ / / إرجاع مسج مثل مجموعة من كائنات JSON فك التشفير.

قد يبدو العميل شيئا مثل هذا:

Var Script = $ (يحتوي "). ServerData (" loadscript ")؛ $ .getscript (script.url، الوظيفة (// النصي قد تم تحميلها - يمكن أن تفعل الأشياء معها الآن})؛

هذه التقنية رائعة لتحضن المستخدم أو البرامج النصية التي تحتاج إلى تحميلها داخل محتوى AJAX محمل. الإصدار الذي كتبته هو مزيد من البرامج النصية المتعلقة بالتخزين المؤقت للتخزين قليلا بحيث يتم تحميلها مرة واحدة فقط لكل عبء في الصفحات الكاملة وتحتوي على عمليات استدعاء ومحفز JQuery حتى تتمكن من ربطها عندما تكون جاهزة.

إذا كان أي شخص مهتما بالنسخة الكاملة من هذا (من MVC إلى ملحق jquery)، سأكون سعيدا بإظهار هذه التقنية بمزيد من التفاصيل. خلاف ذلك - يأمل أن يعطي شخص طريقة جديدة للتعبير عن هذه المشكلة الصعبة.

لقد قمت اليوم بإنشاء حل الخاص بي الذي يناسب الفاتورة تماما. سواء كان ذلك التصميم الجيد أم لا، فمن أجلك أن تقرر كل شيء ولكن أعتقد أنني يجب أن أشارك في كلتا الحالتين!

فيما يلي فئة HTMLExtensions الخاصة بي التي تتيح لك القيام بذلك في MasterPage:

<%=Html.RenderJScripts() %>

فئة htmlextensions الخاصة بي:

public static class HtmlExtensions
{
    private const string JSCRIPT_VIEWDATA = "__js";

    #region Javascript Inclusions

    public static void JScript(this HtmlHelper html, string scriptLocation)
    {
        html.JScript(scriptLocation, string.Empty);
    }

    public static void JScript(this HtmlHelper html, string scriptLocationDebug, string scriptLocationRelease)
    {
        if (string.IsNullOrEmpty(scriptLocationDebug))
            throw new ArgumentNullException("fileName");

        string jsTag = "<script type=\"text/javascript\" src=\"{0}\"></script>";

#if DEBUG
        jsTag = string.Format(jsTag, scriptLocationDebug);
#else
        jsTag = string.Format(jsTag, !string.IsNullOrEmpty(scriptLocationRelease) ? scriptLocationRelease : scriptLocationDebug);
#endif

        registerJScript(html, jsTag);
    }

    public static MvcHtmlString RenderJScripts(this HtmlHelper html)
    {
        List<string> jscripts = html.ViewContext.TempData[JSCRIPT_VIEWDATA] as List<string>;
        string result = string.Empty; ;
        if(jscripts != null)
        {
            result = string.Join("\r\n", jscripts);
        }
        return MvcHtmlString.Create(result);
    }

    private static void registerJScript(HtmlHelper html, string jsTag)
    {
        List<string> jscripts = html.ViewContext.TempData[JSCRIPT_VIEWDATA] as List<string>;
        if(jscripts == null) jscripts = new List<string>();

        if(!jscripts.Contains(jsTag))
            jscripts.Add(jsTag);

        html.ViewContext.TempData[JSCRIPT_VIEWDATA] = jscripts;
    }

    #endregion

}

ما الذي يجري؟
سيقوم الفصل أعلاه بتوسيع HTMLHELPER مع طرق إضافة روابط JavaScript إلى مجموعة يتم تخزينها بواسطة HtmlHelper.ViewContext.TempData مجموعة. في نهاية masterpage أضع <%=Html.RenderJScripts() %> والتي سوف تستحق جمع jscripts داخل HtmlHelper.ViewContext.TempData وتقديم هذه إلى الإخراج.

هناك الجانب السلبي، .. يجب عليك التأكد من عدم تقديم البرامج النصية قبل إضافتها إليها. إذا كنت ترغب في القيام بذلك للحصول على روابط CSS على سبيل المثال، فلن يعمل ذلك لأنه يجب عليك وضع هذه في <head> علامة صفحتك وسيقدم HTMLHelper الإخراج قبل إضافة رابط حتى الآن.

هذا يبدو وكأنه سؤال مماثل (وإن لم يكن بالكامل). هل هي ممارسة سيئة لإعادة وجهات النظر الجزئية التي تحتوي على جافا سكريبت؟

ستكون تفضيلتي لإنشاء صفحة ماسعة مكونا ماسكا ترث من موقعك الرئيسي. هذه الفكرة هي أن تقوم بأشياء هذه الإضافات في البرنامج المساعد. واجعل الصفحات الثمانية أو نحو ذلك التي ستستخدم هذه الرأي الجزئي للراثة من البرنامج المساعد.

النهج المفضل هو ضع النصوص في الأسفل, ومع ذلك، إذا لم تتمكن من تجنب ذلك، فمن المعقول وضعها في الوسط.

عادة ما تقوم المتصفحات عادة بتحميل عناصر الصفحات المختلفة بالتوازي، في حين أن المتصفح يقوم بتنزيل ملف JavaScript، فلن يقوم بتنزيل أي عناصر صفحة أخرى بالتوازي حتى يتم تنزيل JavaScript. هذا يعني أن صورك وماذا لن تضطر إلى الانتظار حتى يعتبر عموما أفضل نقل البرامج النصية في الأسفل، لكن إذا كان البرنامج النصي صغيرا، فلن أقل قلقا بشأن ذلك.

hejdig.

اللعب حول ASPNETMVC3 قررت، في الوقت الحالي، فقط قم بتضمين ملف JavaScript الخاص بي في الجزئي

u003Cscript src="@Url.Content("~/Scripts/User/List.js")" type="text/javascript">u003C/script>

يتم بعد ذلك تحديد ملف JS هذا لملف My / User/list.schtml.

/من

ذهب مصممون MVC من خلال الكثير من المتاعب لمنعنا من استخدام التعليمات البرمجية، ولكن عن طريق إنشاء ملف يدعىu003Cviewname> .spx.cs وتعديل سمة Worherits لصفحة ASPX وفقا لذلك، لا يزال من الممكن الحصول عليها.

أود أن أقول، أفضل مكان لوضع تشمله سيكون في معالج Page_Load في CodeBehind (باستخدام Page.Clientcript.registerClientcriptInclude).

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow