Question

现在尝试使用http://headjs.com但我还没有，因为我无法完全理解有限的文档和示例。如果你能给出一些很好的jQuery的HeadJS示例。

目前，这就是我所拥有的：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
.....
.....
<script src="js/jQuery.plugins.1.js"></script>
<script src="js/jQuery.plugins.2.js"></script>
<!--
    Below are inline and cannot be a separate JS
    file because of CMS and templating limitation
//-->
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
    $('.class').someEffect();
    // Too many more code here
});
</script>
<!-- End inline scripts //-->
</body>
</html>

我的问题：

如果我将使用HeadJS，我应该在哪里放置 jQuery.noConflict（）; ？或者即使我将使用另一个JS库，也不会再有冲突了吗？
在 head.ready（）中放置内联脚本的位置？ “ $ ”符号是否会导致与其他库发生冲突？

感谢。

Answer 1

我认为你错过了Head JS的观点。以下是<head>元素的外观：

<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <script src="path/to/head.js"></script>

    <script>
    // files are loaded in parallel and executed in order they arrive
    head.js('https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js')
        .js('path/to/other/external.js'),
        .js('and/so/on');

    // Call a function after all scripts have been loaded and the document is scriptable
    head.ready(function ()
    {
        jQuery.noConflict();

        // do your inline stuff with $ (Prototype, not jQuery)
    });
    </script>
</head>

Answer 2

你走了：

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Title</title>
        <script src='/js/head.js'></script>
        <!--
            Below are inline and cannot be a separate JS
            file because of CMS and templating limitation
        -->
        <script>
            head.js('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js', '/js/jQuery.plugins.1.js', '/js/jQuery.plugins.2.js', function($, $P) {
                return function() {
                    // $:  jQuery
                    // $P: Prototype
                    $('.class').someEffect();
                    // …
                };
            }(jQuery, _$));
        </script>
    </head>

    <body>
        <!-- your HTML code goes here -->
    </body>
</html>

我会在那里解释一些事情。

head.js(…, function($, $P) {
    return function() {
        …
    };
}(jQuery, _$));

它与匿名函数几乎相同，除非它们不会立即执行。在此示例中，它将在加载所有脚本时执行。

如果您在已使用$的网站上加载jQuery，它会将原始$存储在_$变量中，这就是为什么它可以恢复原始$与jQuery.noConflict()。

noConflict: function( deep ) {
    window.$ = _$;

    if ( deep ) {
        window.jQuery = _jQuery;
    }

    return jQuery;
},

HeadJS和jQuery用法

2 个答案: