6

ソリューション（APS.NET Webフォーム）でのJavaScriptの適切な実装に関して少し苦労しています。

ベストプラクティスに従って、JavaScriptのすべて（または少なくとも可能な限り）をページの下部に配置する必要があるため、ページは最初にHTMLとCSSをロードし、ユーザーエクスペリエンスを向上させます。

プロジェクト全体に多くのjQueryコードがあり、特定のコントロールに固有であることが多いため、すべてのページにロードする必要はありません。

現在、jQuery UIを含むjQuery自体はページの上部に配置されているため、コントロールでjQueryを使用できます（jsファイルまたは場合によってはインラインコードから）。ただし、これらすべてを下部に移動する必要があります。ページ。ページの下部にcontentplaceholder（ "JavascriptFooter"）を既に追加しているので、ページのフッターにページからjavascriptを配置できますが、コントロールに固執しています。

このためのベストプラクティスは何ですか？すべてのJSを外部化し、JSでコントロールがロードされているかどうかを確認する必要がありますか？しかし、それから私たちはいつもあまりにも多くのものを見せることになります。または別の方法はありますか？

4

3 に答える 3

4

まず、CDN から Jquery をロードすることをお勧めします。Google のコードは次のとおりです。

<script type="text/javascript">
    document.write(["\<script type='text/javascript' src='", 
    ("https:" == document.location.protocol) ? "https://" : "http://", 
    "ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>\<\/script>"].join(''));
</script>

そうすれば、訪問者が別のサイトでこれを提供された場合、それは既にキャッシュされています。また、別のホストから配信されているため、並行してダウンロードされます。

私も@ctorxに同意します-ドキュメント対応の実行を使用する必要があります。

さらに、ScriptManager各コントロールの背後にあるコードですべてのコントロール固有の JS を使用して作成することもできます (そのコントロールがその JS を使用する唯一のオブジェクトである場合は、おそらく良い考えです) - このコードはすべてページの下部にレンダリングされます。

例：

Page pg = (Page)System.Web.HttpContext.Current.Handler; // or this.Page in .ascx
ScriptManager.RegisterStartupScript(pg, typeof(Page), "myJS", "[... your code ]", true);
于 2012-09-06T17:04:11.180 に答える
1

Webフォームを使用している企業と同じくらい多くのソリューションがあるに違いありません。つまり、いつでも要求コンテキストを使用して必要なスクリプトを保存し、ページがレンダリングされる前にそれらを記述することができます。

おそらくrequireJSも使用できます。私は専門家ではありませんが、多くのオプションがあり、スクリプトの読み込みタイムアウト、循環依存関係、複数の依存関係の定義などを処理します。

于 2012-09-06T15:27:53.043 に答える
1

まず、サイトへの最初のリクエストとその後のすべてのリクエスト (つまり、site.js) で読み込まれる JS ファイルのコントロールから JavaScript を外部化するのが最善の方法です。このファイルはブラウザによってキャッシュされるため、JS がコントロール内にある場合のように、ユーザーは JS を何度もダウンロードする必要はありません。

次に、実行中のページまたはコントロールに関連するスクリプトの部分のみを実行するメカニズムを作成する必要があります。

これを達成する方法はいくつかありますが、私があなたの状況にあった場合、この方法で行います。

コンテンツの大部分をラップするページ レベルの要素を特定します。通常、人々はこれを と呼びますwrapper。" " というラッパーにカスタム属性を動的に追加しますdata-js。「data-js」の値を、ページまたはユーザー/カスタム コントロールから (サーバー側で) 動的に設定します。パイプ (|) またはその他の文字で区切られた複数のキーを持つことができます。

<div class="wrapper" data-js="funtion1|function2">
     <!-- Page content goes here -->
</div>

jQuery を活用して DOM の準備が整ったときにこの属性を探し、data-js 属性の値に基づいてカスタム JS 関数を実行します。その関数には、現在のページまたはコントロールに関連するコードのみが含まれます。

 $(function(){
    var funcKeys = $('.wrapper').attr('data-js');
    if(funcKeys != null)
    {
        var funcs = funcKeys.split('|');
        for(var i=0; i< funcs.length; i++) {
           var funcName = eval(funcs[i]);
           if(typeof funcName == 'function') {
                funcName();
           }
        }
    }    
});

このアプローチを使用すると、jQuery CDN 参照、サイトの JS ファイルへの参照、およびレイアウト内の上記のコード スニペットのみが必要になります。

次に、次のように、サイト固有の JS ファイルにページ/コントロール固有の関数を含めるだけです。

function function1() {
    alert("This is function 1");
}

function function2() {
    alert("This is function 2");
}

これが役立つことを願っています。

参考までに、私はあなたがそれがどのように機能するかを試すためのフィドルもセットアップしました： http://jsfiddle.net/hh84f/1/

于 2012-09-08T20:39:30.507 に答える