1

私はh5bpで提案されているすべてのスクリプト ファイルをページの下部に平手打ちするというパターンに従います。Modernizr を保存します。

さて、ここで私は ASP.NET MVC 3 で何かに取り組んでいますHtmlHelper。フォーム上のいくつかの再利用可能な要素/コントロールのマークアップを区分化するための拡張機能を作成しています。@Html.GiveMeATableDammit()テーブルのマークアップを生成するようなものです。

ここで私のジレンマが発生します。生成されたマークアップに対して何らかの jQuery を実行する必要がある場合はどうすればよいでしょうか? 説明のために、そのテーブルに対して jQuery プラグイン関数を呼び出す必要があるとします。

@Html.GiveMeATableDammit("a-very-dirty-mouthed-table")

//
// will generate customized HTML
<table id="a-very-dirty-mouthed-table">
    <!-- some more stuff -->
</table>
<script>
    // along with customized javascript to match
    jQuery(function ($) {
        $('#a-very-dirty-mouthed-table').giveMeSuperPowers();
    });
</script>

問題は、jQuery がページの下部にあるため、マークアップ生成の時点ではまだ jQuery が存在しないことです。

さて、jQuery を に移動するという考えを除けば<head>、jQuery が既に存在するページの最後まで、その 1 つの関数の実行を延期するにはどうすればよいでしょうか?

4

2 に答える 2

1

これを行う ASP マジックがない限り、私が見た 1 つのアプローチは<head>、ページの配列とそれらへpush()のreadyハンドラーを宣言し、下部 ( jQueryの後) でそれらを実行することです。

<head>:

var handlers = [];

どこでも：

handlers.push(function ($) {
    $('#a-very-dirty-mouthed-table').giveMeSuperPowers();
});

</body>:

<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
    handlers.forEach(function (val) {
        jQuery(document).ready(val);
    });
</script>
于 2012-06-26T15:06:30.227 に答える
1

この件に関する私のブログから：

<head>
    <script>
        (function(a){
            _q=function(){return a;};
            $=function(f){
                typeof f==="function" && a.push(arguments);
                return $;
            };
            jQuery=$.ready=$;
        }([]));
    </script>
</head>
<body>
    <div id="main">
        <script>
            $(function() {
                $( "#main" ).prepend( "<p>Heyo!</p>" );
            });
        </script>
        <div>...more HTML...</div>
    </div>
    <script src="/js/jquery.js"></script>
    <script>
        (function( i, s, q, l ) {
            for( q = window._q(), l = q.length; i < l; ) {
                $.apply( this, s.call( q[ i++ ] ) );
            }
            window._q = undefined;
        }( 0, Array.prototype.slice ));
    </script>
    <script src="/js/scripts.js"></script>
</body>

最初に行うことは、最初の引数が関数である呼び出しの引数を配列に<script>格納することにより、jQuery の準備完了関数をエミュレートすることです。$.readyこの配列は、グローバル スコープの _q メソッドに対してプライベートであり、呼び出されると配列を返します。

最後のインライン<script>は呼び出しによって配列をループし、_q()最初に偽者に渡された引数$.readyを realに適用します$.ready。

Sam Saffronは、約 1 年後に同様の方法を独自に考案し、Stack Overflow で同じ問題を修正しました。

Sam の投稿に応えて、Colin Gourlay はさらに堅牢な方法を考え出しました(これはおそらくやり過ぎです)。

于 2012-06-27T16:38:41.990 に答える