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 已经存在？

4

2 回答 2

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

最后一个内联<script>通过调用循环遍历数组_q()，然后将最初传递给冒名顶替者的参数应用$.ready到真实的$.ready.

大约一年后，Sam Saffron独立提出了一种类似的方法来解决 Stack Overflow 上的相同问题。

为了回应 Sam 的帖子，Colin Gourlay 提出了一种更强大的方法（这可能是矫枉过正）。

于 2012-06-27T16:38:41.990 回答