js插件類庫組織與管理(基于asp.net管理)

2024-07-10 13:25:47

字體：大中小

來源：轉載

供稿：網友

testjs插件類庫組織與管理
先舉個例子，比如jquery插件中的calendar在一個頁面中就得有如下代碼

復制代碼代碼如下:

看上面代碼,calendar代碼得運用四個相關的文件。其中jquery1.3.2.js是必須的，jquery.datepick-zh-CN.js依賴于jquery.datepick.js（日歷插件）,而jquery.datepick.css是插件的樣式。
運用以上代碼得很小心的對待插件的依賴關系,主次關系不能換，移動文件路徑還得改動文件src路徑，以上script中下載js文件都是單線程下載，理想的是進行多線程下載（firebug看得出來）,再者就是插件的緩存問題（插件更新了，客戶端可能還保存著原來的文件）。
看過不少網上關于這方面的解決方案，博客園中有SmartScript和javaeye中有JSI,它們貌似都存在一個boot.js文件。而我的解決方案就只需要一個script后面跟插件參數即可。
以下是我對上述問題的一個解決方案：
<script type="text/javascript" src="script.do?plugins=calendar"></script>
在一個頁面中只需要js應用的插件只需要script.do后跟參數后插件名參數即可，其它的工作就是在整體寫一個插件資源配置文件（寫插件配置的人得弄清楚js相關資源，這個只需要配置一次），至于其它什么也不需要弄。
插件資源配置文件

復制代碼代碼如下:

<?xml version="1.0" encoding="utf-8" ?>
<script path="script/plugins/" lazy="script/plugins/lazy/jquery.lazy-1.3.1.js">

<plugin file="autocomplete/jquery.autocomplete.js">
<lazy file="autocomplete/jquery.autocomplete.css"></lazy>
</plugin>

<plugin file="calendar/jquery.datepick.pack.js">
<lazy file="calendar/jquery.datepick.css"></lazy>
<lazy file="calendar/jquery.datepick-zh-CN.js"></lazy>
</plugin>

<plugin file="tip/jquery.tip.js">
<lazy file="tip/bs.css"></lazy>
</plugin>

<plugin file="jquery.draggable.js">
<lazy file="ui/ui.core.js"></lazy>
<lazy file="draggable/ui.draggable.css"></lazy>
</plugin>

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

html示例代碼：

復制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標題頁</title>
<%-- <script type="text/javascript" src="script/jquery1.3.2.js"></script>
<script type="text/javascript" src="script/plugins/lazy/jquery.lazy-1.3.1.js"></script>--%>
<script type="text/javascript" src="script.do?plugins=autocomplete,tip"></script>
</head>
<body>
<input type="text"/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#"
];
$('.bslink').tip();
$("#suggest1").autocomplete(cities);
</script>