jQuery Require Plugin
- 授权协议: 未知
- 开发语言:
- 操作系统: 未知
- 软件首页: http://plugins.jquery.com/project/require
软件介绍
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 fileNow 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 codeAnd 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
- Browser specific script loading. Default is all
jQuery.require(“ie_lib.js”,{browserType:jQuery.browser.msie})
- Callback function to call after the script is loaded. Default is empty function.
e.g. jQuery.require(“ui.js”,{callback:function(){initializeUI();}});
- 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);
JavaScript Patterns
Stoyan Stefanov / O'Reilly Media, Inc. / 2010-09-21 / USD 29.99
What's the best approach for developing an application with JavaScript? This book helps you answer that question with numerous JavaScript coding patterns and best practices. If you're an experienced d......一起来看看 《JavaScript Patterns》 这本书的介绍吧!
