您當前位置：首頁 > web前端 > jscript > Javascript插件類庫組織與管理

Javascript插件類庫組織與管理

來源：程序員人生發布時間：2013-10-08 03:24:18 閱讀次數：3653次

　　網(LieHuo.Net)教程 在開發一個較大規模的網站，js插件類庫應用的是相當多。那么自然在一個頁面里就存在不少script和script相關的link標記，這樣js組織與管理自然成了一大問題。

　　先舉個例子，比如jquery插件中的calendar在一個頁面中就得有如下代碼

以下為引用的內容：
<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>

　　看上面代碼,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/" name="script/jquery1.3.2.js" lazy="script/plugins/lazy/jquery.lazy-1.3.1.js">

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

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

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

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

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

　　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 id="Head1" runat="server"><title>Javascript插件類庫組織與管理 - </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" id="suggest1" style="border:1px solid #ccc"/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><a href="#" _fcksavedurl="#" title="Basic Tool Tip" class="bslink">Tip1</a><br /></body></html><script> var cities = [ "Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron", "Albany", "Alexandria", "Alger", "Alledonia", "Alliance", "Alpha", "Alvada", "Alvordton", "Amanda", "Amelia", "Amesville", "Amherst", "Amlin", "Amsden", "Amsterdam", "Andover", "Anna", "Ansonia", "Antwerp", "Apple Creek", "Arcadia", "Arcanum", "Archbold", "Arlington", "Ashland", "Ashley", "Ashtabula", "Ashville", "Athens", "Attica", "Atwater", "Augusta", "Aurora", "Austinburg", "Ava", "Avon", "Avon Lake", "Bainbridge", "Bakersville", "Baltic", "Baltimore", "Bannock", "Barberton", "Barlow", "Barnesville", "Bartlett", "Barton", "Bascom", "Batavia", "Bath", "Bay Village", "Beach City", "Beachwood", "Beallsville", "Beaver", "Beaverdam", "Bedford", "Bellaire", "Bellbrook", "Belle Center", "Belle Valley", "Bellefontaine", "Bellevue", "Bellville", "Belmont", "Belmore", "Beloit", "Belpre", "Benton Ridge", "Bentonville", "Berea", "Bergholz", "Berkey", "Berlin", "Berlin Center", "Berlin Heights", "Bethel", "Bethesda", "Bettsville", "Beverly", "Bidwell", "Big Prairie", "Birmingham", "Blacklick", "Bladensburg", "Blaine", "Blakeslee", "Blanchester", "Blissfield", "Bloomdale", "Bloomingburg", "Bloomingdale", "Bloomville", "Blue Creek", "Blue Rock", "Bluffton", "Bolivar", "Botkins", "Bourneville", "Bowerston", "Bowersville", "Bowling Green", "Bradford", "Bradner", "Brady Lake", "Brecksville", "Bremen", "Brewster", "Brice", "Bridgeport", "Brilliant", "Brinkhaven", "Bristolville", "Broadview Heights", "Broadway", "Brookfield", "Brookpark", "Brookville", "Brownsville", "Brunswick", "Bryan", "Buchtel", "Buckeye Lake", "Buckland", "Bucyrus", "Buffalo", "Buford", "Burbank", "Burghill", "Burgoon", "Burkettsville", "Burton", "Butler", "Byesville", "Cable", "Cadiz", "Cairo", "Caldwell", "Caledonia", "Cambridge", "Camden", "Cameron", "Camp Dennison", "Campbell", "Canal Fulton", "Canal Winchester", "Canfield", "Canton", "Carbon Hill", "Carbondale", "Cardington", "Carey", "Carroll", "Carrollton", "Casstown", "Castalia", "Catawba", "Cecil", "Cedarville", "Celina", "Centerburg", "Chagrin Falls", "Chandlersville", "Chardon", "Charm", "Chatfield", "Chauncey", "Cherry Fork", "Chesapeake", "Cheshire", "Chester", "Chesterhill", "Chesterland", "Chesterville", "Chickasaw", "Chillicothe", "Chilo", "Chippewa Lake", "Christiansburg", "Cincinnati", "Circleville", "Clarington", "Clarksburg", "Clarksville", "Clay Center", "Clayton", "Cleveland", "Cleves", "Clifton", "Clinton", "Cloverdale", "Clyde", "Coal Run", "Coalton", "Coldwater", "Colerain", "College Corner", "Collins", "Collinsville", "Colton", "Columbia Station", "Columbiana", "Columbus", "Columbus Grove", "Commercial Point", "Conesville", "Conneaut", "Conover", "Continental", "Convoy", "Coolville", "Corning", "Cortland", "Coshocton", "Covington", "Creola", "Crestline", "Creston", "Crooksville", "Croton", "Crown City", "Cuba", "Cumberland", "Curtice", "Custar", "Cutler", "Cuyahoga Falls", "Cygnet", "Cynthiana", "Dalton", "Damascus", "Danville", "Dayton", "De Graff", "Decatur", "Deerfield", "Deersville", "Defiance", "Delaware", "Dellroy", "Delphos", "Delta", "Dennison", "Derby", "Derwent", "Deshler", "Dexter City", "Diamond", "Dillonvale", "Dola", "Donnelsville", "Dorset", "Dover", "Doylestown", "Dresden", "Dublin", "Dunbridge", "Duncan Falls", "Dundee", "Dunkirk", "Dupont", "East Claridon", "East Fultonham", "East Liberty", "East Liverpool", "East Palestine", "East Rochester", "East Sparta", "East Springfield", "Eastlake", "Eaton", "Edgerton", "Edison", "Edon", "Eldorado", "Elgin", "Elkton", "Ellsworth", "Elmore", "Elyria", "Empire", "Englewood", "Enon", "Etna", "Euclid", "Evansport", "Fairborn", "Fairfield", "Fairpoint", "Fairview", "Farmdale", "Farmer", "Farmersville", "Fayette", "Fayetteville", "Feesburg", "Felicity", "Findlay", "Flat Rock", "Fleming", "Fletcher", "Flushing", "Forest", "Fort Jennings", "Fort Loramie", "Fort Recovery", "Fostoria", "Fowler", "Frankfort", "Franklin", "Franklin Furnace", "Frazeysburg", "Fredericksburg", "Fredericktown", "Freeport", "Fremont", "Fresno", "Friendship", "Fulton", "Fultonham", "Galena", "Galion", "Gallipolis", "Galloway", "Gambier", "Garrettsville", "Gates Mills", "Geneva", "Genoa", "Georgetown", "Germantown", "Gettysburg", "Gibsonburg", "Girard", "Glandorf", "Glencoe", "Glenford", "Glenmont", "Glouster", "Gnadenhutten", "Gomer", "Goshen", "Grafton", "Grand Rapids", "Grand River", "Granville", "Gratiot", "Gratis", "Graysville", "Graytown", "Green", "Green Camp", "Green Springs", "Greenfield", "Greenford", "Greentown", "Greenville", "Greenwich", "Grelton", "Grove City", "Groveport", "Grover Hill", "Guysville", "Gypsum", "Hallsville", "Hamden", "Hamersville", "Hamilton", "Hamler", "Hammondsville", "Hannibal", "Hanoverton", "Harbor View", "Harlem Springs", "Harpster", "Harrisburg", "Harrison", "Harrisville", "Harrod", "Hartford", "Hartville", "Harveysburg", "Haskins", "Haverhill", "Haviland", "Haydenville", "Hayesville", "Heath", "Hebron", "Helena", "Hicksville", "Higginsport", "Highland", "Hilliard", "Hillsboro", "Hinckley", "Hiram", "Hockingport", "Holgate", "Holland", "Hollansburg", "Holloway", "Holmesville", "Homer", "Homerville", "Homeworth", "Hooven", "Hopedale", "Hopewell", "Houston", "Howard", "Hoytville", "Hubbard", "Hudson", "Huntsburg", "Huntsville", "Huron", "Iberia", "Independence", "Irondale", "Ironton", "Irwin", "Isle Saint George", "Jackson", "Jackson Center", "Jacksontown", "Jacksonville", "Jacobsburg", "Jamestown", "Jasper", "Jefferson", "Jeffersonville", "Jenera", "Jeromesville", "Jerry City", "Jerusalem", "Jewell", "Jewett", "Johnstown", "Junction City", "Kalida", "Kansas", "Keene", "Kelleys Island", "Kensington", "Kent", "Kenton", "Kerr", "Kettlersville", "Kidron", "Kilbourne", "Killbuck", "Kimbolton", "Kings Mills", "Kingston", "Kingsville", "Kinsman", "Kipling", "Kipton", "Kirby", "Kirkersville", "Kitts Hill", "Kunkle", "La Rue", "Lacarne", "Lafayette", "Lafferty", "Lagrange", "Laings", "Lake Milton", "Lakemore", "Lakeside Marblehead", "Lakeview", "Lakeville", "Lakewood", "Lancaster", "Langsville", "Lansing", "Latham", "Latty", "Laura", "Laurelville", "Leavittsburg", "Lebanon", "Lees Creek", "Leesburg", "Leesville", "Leetonia", "Leipsic", "Lemoyne", "Lewis Center", "Lewisburg", "Lewistown", "Lewisville", "Liberty Center", "Lima", "Limaville", "Lindsey", "Lisbon", "Litchfield", "Lithopolis", "Little Hocking", "Lockbourne", "Lodi", "Logan", "London", "Londonderry", "Long Bottom", "Lorain", "Lore City", "Loudonville", "Louisville", "Loveland", "Lowell", "Lowellville", "Lower Salem", "Lucas", "Lucasville", "Luckey", "Ludlow Falls", "Lynchburg", "Lynx", "Lyons", "Macedonia", "Macksburg", "Madison", "Magnetic Springs", "Magnolia", "Maineville", "Malaga", "Malinta", "Malta", "Malvern", "Manchester", "Mansfield", "Mantua", "Maple Heights", "Maplewood", "Marathon", "Marengo", "Maria Stein", "Marietta", "Marion", "Mark Center", "Marshallville", "Martel", "Martin", "Martins Ferry", "Martinsburg", "Martinsville", "Marysville", "Mason", "Massillon", "Masury", "Maumee", "Maximo", "Maynard", "Mc Arthur", "Mc Clure", "Mc Comb", "Mc Connelsville", "Mc Cutchenville", "Mc Dermott", "Mc Donald", "Mc Guffey", "Mechanicsburg", "Mechanicstown", "Medina", "Medway", "Melmore", "Melrose", "Mendon", "Mentor", "Mesopotamia", "Metamora", "Miamisburg", "Miamitown", "Miamiville", "Middle Bass", "Middle Point", "Middlebranch", "Middleburg", "Middlefield", "Middleport", "Middletown", "Midland", "Midvale", "Milan", "Milford", "Milford Center", "Millbury", "Milledgeville", "Miller City", "Millersburg", "Millersport", "Millfield", "Milton Center", "Mineral City", "Mineral Ridge", "Minerva", "Minford", "Mingo", "Mingo Junction", "Minster", "Mogadore", "Monclova", "Monroe", "Monroeville", "Montezuma", "Montpelier", "Montville", "Morral", "Morristown", "Morrow", "Moscow", "Mount Blanchard", "Mount Cory", "Mount Eaton", "Mount Gilead", "Mount Hope", "Mount Liberty", "Mount Orab", "Mount Perry", "Mount Pleasant", "Mount Saint Joseph", "Mount Sterling", "Mount Vernon", "Mount Victory", "Mowrystown", "Moxahala", "Munroe Falls", "Murray City", "Nankin", "Napoleon", "Nashport", "Nashville", "Navarre", "Neapolis", "Neffs", "Negley", "Nelsonville", "Nevada", "Neville", "New Albany", "New Athens", "New Bavaria", "New Bloomington", "New Bremen", "New Carlisle", "New Concord", "New Hampshire", "New Haven", "New Holland", "New Knoxville", "New Lebanon", "New Lexington", "New London", "New Madison", "New Marshfield", "New Matamoras", "New Middletown", "New Paris", "New Philadelphia", "New Plymouth", "New Richmond", "New Riegel", "New Rumley", "New Springfield", "New Straitsville", "New Vienna", "New Washington", "New Waterford", "New Weston", "Newark", "Newbury", "Newcomerstown", "Newport", "Newton Falls", "Newtonsville", "Ney", "Niles", "North Baltimore", "North Bend", "North Benton", "North Bloomfield", "North Fairfield", "North Georgetown", "North Hampton", "North Jackson", "North Kingsville", "North Lawrence", "North Lewisburg", "North Lima", "North Olmsted", "North Ridgeville", "North Robinson", "North Royalton", "North Star", "Northfield", "Northwood", "Norwalk", "Norwich", "Nova", "Novelty", "Oak Harbor", "Oak Hill", "Oakwood", "Oberlin", "Oceola", "Ohio City", "Okeana", "Okolona", "Old Fort", "Old Washington", "Olmsted Falls", "Ontario", "Orangeville", "Oregon", "Oregonia", "Orient", "Orrville", "Orwell", "Osgood", "Ostrander", "Ottawa", "Ottoville", "Otway", "Overpeck", "Owensville", "Oxford", "Painesville", "Palestine", "Pandora", "Paris", "Parkman", "Pataskala", "Patriot", "Paulding", "Payne", "Pedro", "Peebles", "Pemberton", "Pemberville", "Peninsula", "Perry", "Perrysburg", "Perrysville", "Petersburg", "Pettisville", "Phillipsburg", "Philo", "Pickerington", "Piedmont", "Pierpont", "Piketon", "Piney Fork", "Pioneer", "Piqua", "Pitsburg", "Plain City", "Plainfield", "Pleasant City", "Pleasant Hill", "Pleasant Plain", "Pleasantville", "Plymouth", "Polk", "Pomeroy", "Port Clinton", "Port Jefferson", "Port Washington", "Port William", "Portage", "Portland", "Portsmouth", "Potsdam", "Powell", "Powhatan Point", "Proctorville", "Prospect", "Put in Bay", "Quaker City", "Quincy", "Racine", "Radnor", "Randolph", "Rarden", "Ravenna", "Rawson", "Ray", "Rayland", "Raymond", "Reedsville", "Reesville", "Reno", "Republic", "Reynoldsburg", "Richfield", "Richmond", "Richmond Dale", "Richwood", "Ridgeville Corners", "Ridgeway", "Rio Grande", "Ripley", "Risingsun", "Rittman", "Robertsville", "Rock Camp", "Rock Creek", "Rockbridge", "Rockford", "Rocky Ridge", "Rocky River", "Rogers", "Rome", "Rootstown", "Roseville", "Rosewood", "Ross", "Rossburg", "Rossford", "Roundhead", "Rudolph", "Rushsylvania", "Rushville", "Russells Point", "Russellville", "Russia", "Rutland", "Sabina", "Saint Clairsville", "Saint Henry", "Saint Johns", "Saint Louisville", "Saint Marys", "Saint Paris", "Salem", "Salesville", "Salineville", "Sandusky", "Sandyville", "Sarahsville", "Sardinia", "Sardis", "Savannah", "Scio", "Scioto Furnace", "Scott", "Scottown", "Seaman", "Sebring", "Sedalia", "Senecaville", "Seven Mile", "Seville", "Shade", "Shadyside", "Shandon", "Sharon Center", "Sharpsburg", "Shauck", "Shawnee", "Sheffield Lake", "Shelby", "Sherrodsville", "Sherwood", "Shiloh", "Short Creek", "Shreve", "Sidney", "Sinking Spring", "Smithfield", "Smithville", "Solon", "Somerdale", "Somerset", "Somerville", "South Bloomingville", "South Charleston", "South Lebanon", "South Point", "South Salem", "South Solon", "South Vienna", "South Webster", "Southington", "Sparta", "Spencer", "Spencerville", "Spring Valley", "Springboro", "Springfield", "Stafford", "Sterling", "Steubenville", "Stewart", "Stillwater", "Stockdale", "Stockport", "Stone Creek", "Stony Ridge", "Stout", "Stoutsville", "Stow", "Strasburg", "Stratton", "Streetsboro", "Strongsville", "Struthers", "Stryker", "Sugar Grove", "Sugarcreek", "Sullivan", "Sulphur Springs", "Summerfield", "Summit Station", "Summitville", "Sunbury", "Swanton", "Sycamore", "Sycamore Valley", "Sylvania", "Syracuse", "Tallmadge", "Tarlton", "Terrace Park", "The Plains", "Thompson", "Thornville", "Thurman", "Thurston", "Tiffin", "Tiltonsville", "Tipp City", "Tippecanoe", "Tiro", "Toledo", "Tontogany", "Torch", "Toronto", "Tremont City", "Trenton", "Trimble", "Trinway", "Troy", "Tuppers Plains", "Tuscarawas", "Twinsburg", "Uhrichsville", "Union City", "Union Furnace", "Unionport", "Uniontown", "Unionville", "Unionville Center", "Uniopolis", "Upper Sandusky", "Urbana", "Utica", "Valley City", "Van Buren", "Van Wert", "Vandalia", "Vanlue", "Vaughnsville", "Venedocia", "Vermilion", "Verona", "Versailles", "Vickery", "Vienna", "Vincent", "Vinton", "Wadsworth", "Wakefield", "Wakeman", "Walbridge", "Waldo", "Walhonding", "Walnut Creek", "Wapakoneta", "Warnock", "Warren", "Warsaw", "Washington Court House", "Washingtonville", "Waterford", "Waterloo", "Watertown", "Waterville", "Wauseon", "Waverly", "Wayland", "Wayne", "Waynesburg", "Waynesfield", "Waynesville", "Wellington", "Wellston", "Wellsville", "West Alexandria", "West Chester", "West Elkton", "West Farmington", "West Jefferson", "West Lafayette", "West Liberty", "West Manchester", "West Mansfield", "West Millgrove", "West Milton", "West Point", "West Portsmouth", "West Rushville", "West Salem", "West Union", "West Unity", "Westerville", "Westfield Center", "Westlake", "Weston", "Westville", "Wharton", "Wheelersburg", "Whipple", "White Cottage", "Whitehouse", "Wickliffe", "Wilberforce", "Wilkesville", "Willard", "Williamsburg", "Williamsfield", "Williamsport", "Williamstown", "Williston", "Willoughby", "Willow Wood", "Willshire", "Wilmington", "Wilmot", "Winchester", "Windham", "Windsor", "Winesburg", "Wingett Run", "Winona", "Wolf Run", "Woodsfield", "Woodstock", "Woodville", "Wooster", "Wren", "Xenia", "Yellow Springs", "Yorkshire", "Yorkville", "Youngstown", "Zaleski", "Zanesfield", "Zanesville", "Zoar" ]; $('.bslink').tip(); $("#suggest1").autocomplete(cities); </script>
提示：可修改后代碼再運行!

　　相關代碼下載

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 瀏覽器支持JavaScript和Cookies的測試

下一篇 .Net開發采用DB2 XML的應用程序示例

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

Javascript插件類庫組織與管理