Javascript plug-in class library organization and management

Tutorial on helping customers (www.bkjia.com)A large number of js plug-in class libraries are used to develop a large website. Naturally, there are many script and script-related link tags on a page, which makes js organization and management a major problem.

For example, the calendar in the jquery plug-in requires the following code on a page:

Reference content is as follows: <Style type = "text/css"> @ Import "" script/calendar/jquery.datepick.css "; </Style> <Script type = "text/javascript" src = "script/jquery1.3.2.js"> </script> <Script type = "text/javascript" src = "" script/calendar/jquery. datepick. js "> </script> <Script type = "text/javascript" src = "" script/calendar/jquery. datepick-zh-CN.js "> </script>

According to the code above, the calendar code must use four related files. Plugin is the plug-in style.

Use the above Code to treat the dependency of the plug-in with caution. The primary-secondary relationship cannot be changed, and the src path of the file must be changed for the mobile file path. All js files downloaded from the above script are downloaded in a single thread, the ideal solution is to download multiple threads (which can be seen by firebug), and the plug-in cache problem (the plug-in is updated, and the client may save the original file ).

I have read a lot of online solutions in this regard. In the blog, there are SmartScript and JSI in javaeye, and they all seem to have a boot. js file. My solution only requires a script followed by plug-in parameters.

　　 Here is a solution to the above problems:

Reference content is as follows: <Script type = "text/javascript" src = "script. do? Plugins = calendar "> </script>

On a page, you only need the js application plug-in to use the script. do is followed by the plug-in name parameter after the parameter. Other work is to write a plug-in resource configuration file as a whole (the person who writes the plug-in configuration has to figure out the js-related resources. This only needs to be configured once ), nothing else needs to be done.

　　Plug-in resource configuration file

Reference content is as follows: <? Xml version = "1.0" encoding = "UTF-8"?> <Script path = "script/plugins/" name = "script/jquery1.3.2.js" lazy = "script/plugins/lazy/jquery. lazy-1.3.1.js"> <! -- Automatic completion --> <Plugin name = "autocomplete" file = "autocomplete/jquery. autocomplete. js"> <Lazy file = "autocomplete/jquery.autocomplete.css"> </lazy> </Plugin> <! -- Calendar --> <Plugin name = "calendar" file = "calendar/jquery. datepick. pack. js"> <Lazy file = "calendar/jquery.datepick.css"> </lazy> <Lazy file = "calendar/jquery. datepick-zh-CN.js"> </lazy> </Plugin> <! -- Prompt box --> <Plugin name = "tip" file = "tip/jquery. tip. js"> <Lazy file = "tip/bs.css"> </lazy> </Plugin> <! -- Drag --> <Plugin name = "draggable" file = "jquery. draggable. js"> <Lazy file = "ui/ui. core. js"> </lazy> <Lazy file = "draggable/ui.draggable.css"> </lazy> </Plugin> <! -- Drag and drop --> <Plugin name = "droppable" file = "jquery. droppable. js"> <Lazy file = "ui/ui. core. js"> </lazy> <Lazy file = "droppable/ui.droppable.css"> </lazy> <Lazy file = "draggable/ui. draggable. js"> </lazy> <Lazy file = "draggable/ui.draggable.css"> </lazy> </Plugin> </Script>

Sample html code:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 





Tip: the code can be modified before running!

Download related Code