CODEWITHSUNDEEP
jquery
bloggerious
bloggerious

Reputation: 347

HeadJS and jQuery Usage

Trying to use http://headjs.com for a while now but I haven't still because I can't fully understand the limited documentation and samples. If you can give examples of HeadJS with some jQuery that would be great.

Currently, this is what I have:

<!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>

My questions:

  1. If I'll use HeadJS, where should I put the jQuery.noConflict(); now? Or will there be no more conflicts even if I'll use another JS library?
  2. Where to put my inline scripts, in head.ready()? Do the the '$' sign will not cause any conflicts with other libraries?

Thanks.

Upvotes: 1

Views: 3520

Answers (2)

user492203
user492203

Reputation:

Here you go:

<!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>​​

I'll explain some things there.

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

It's almost the same as anonymous functions, except they won't get executed instantly. In this example, it gets executed when all scripts are loaded.

If you load jQuery on a site that's already using $, it stores the original $ in the _$ variable, this is why it can restore the original $ with jQuery.noConflict().

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

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

    return jQuery;
},

Upvotes: 2

Matt Ball
Matt Ball

Reputation: 359786

I think you're missing the point of Head JS. Here's what your <head> element should look like:

<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>

Upvotes: 2

Related Questions