jQuery Require Plugin

未知
未知
2008-09-19

Purpose

The purpose of this plug-in is to enable adding JavaScript on demand and remove 100 of script includes that we do on a page where massive client side scripting is involved. The plug-in code (bottom of this email) can be saved in a JS file and can be included in the head section of the page.
Now come the interesting part –

How to use it?

Suppose you have JS files which are for various components of the page and a JS which is for a page. In a normal scenario we include the component JS files and page JS file in the main page itself using script tag, but when we use this plug-in we do something like this in the page JS file (where page JS file is a JS file created for a specific page)

page.js

jQuery.require(“component1.js”);
jQuery.require(“component2.js”);
jQuery.require(“component3.js”);
jQuery.require(“some_jquery_plugin.js”);
//rest of the code for the page JS file

Now you have to just include the page JS and it’s done. Also since the plug-in has been designed to accept array and allow chaining you can do something like this as well

jQuery.require([“component1.js”, ”component2.js”, “component3.js”]).require(“some_jquery_plugin.js”);

Further the benefit of this approach will be that suppose component1.js use a library to do some stuff and it is specific to component1 itself, in this scenario you will include that library inside component1.js itself.

component1.js

jQuery.require(“library1.js”);
//rest of the code

And this will ensure where ever you use component 1 it’s all required JS are included.

Configuration / Parameters

You can specify a default path for scripts by assign value to scriptPath as below

$.scriptPath = “\root\static\js”;

Also you can pass in following parameters when you call the require method

  1. Browser specific script loading. Default is all
    • jQuery.require(“ie_lib.js”,{browserType:jQuery.browser.msie})
  2. Callback function to call after the script is loaded. Default is empty function.
    • e.g. jQuery.require(“ui.js”,{callback:function(){initializeUI();}});
  3. Whether to bring JS every time from the server when the page loads or use cache. Default is true.
    • e.g. jQuery.require(“ui.js”,{cache:false}}

You can use all these parameters in one go like

       
        jQuery.require(“xyz.js”,{
browserType:jQuery.browser.msie,
callback:myCallback,
cache:false
                }

I have tested the code on

  • IE 6 (PC)
  • IE 7 (PC)
  • Safari 2+ (Mac)
  • Firefox 2+ (Mac / PC)

The Plugin

/**
* require is used for on demand loading of JavaScript
*
* require r1 // 2008.02.05 // jQuery 1.2.2
*
* // basic usage (just like .accordion)
* $.require("comp1.js");
*

* @param  jsFiles string array or string holding the js file names to load
* @param  params object holding parameter like browserType, callback, cache
* @return The jQuery object
* @author Manish Shanker
*/

(function($){
$.require = function(jsFiles, params) {

var params = params || {};
var bType = params.browserType===false?false:true;

if (!bType){
return $;
}

var cBack = params.callBack || function(){};
var eCache = params.cache===false?false:true;

if (!$.require.loadedLib) $.require.loadedLib = {};

if ( !$.scriptPath ) {
var path = $('script').attr('src');
$.scriptPath = path.replace(/\w+\.js$/, '');
}
if (typeof jsFiles === "string") {
jsFiles = new Array(jsFiles);
}
for (var n=0; n< jsFiles.length; n++) {
if (!$.require.loadedLib[jsFiles[n]]) {
$.ajax({
type: "GET",
url: $j.scriptPath + jsFiles[n],
success: cBack,
dataType: "script",
cache: eCache,
async: false
});
$.require.loadedLib[jsFiles[n]] = true;
}
}
//console.dir($.require.loadedLib);

return $;
};
})(jQuery);

加载中

评论(0)

暂无评论

暂无资讯

暂无问答

暂无博客

返回顶部
顶部