Question

我正在按照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已经存在的页面的最后？ / p>

Answer 1

除非有一些ASP魔术要做，否则我看到的一种方法是在页面的<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>

Answer 2

关于这个主题的

From my blog：

<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函数，方法是将对$.ready的任何调用的参数存储到数组中，其中第一个参数是函数。这个数组对我们的全局范围的_q方法是私有的，当被调用时，它返回数组。

最后一行内联<script>通过调用_q()在数组中循环，然后将最初传递给我们的冒号$.ready的参数应用于真实的$.ready。

大约一年后

Sam Saffron独立提出similar method来解决Stack Overflow上的相同问题。

在回应Sam的帖子时，Colin Gourlay提出了一个偶数more robust method（这可能是矫枉过正的）。

使用HTML 5 Boilerplate简化jQuery代码

2 个答案: