软件简介

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);`