For example:
Copy codeThe Code is as follows:
<! -Js plug-in -->
<Script type = "text/javascript" src = "/scripts/popup. js"> </script>
<Script type = "text/javascript" src = "/scripts/popup-util.js"> </script>
<! -Jquery plugin -->
<Script type = "text/javascript" src = "/scripts/jquery-1.3.2.js"> </script>
<Script type = "text/javascript" src = "/scripts/jquery. autocomplete/jquery. autocomplete. js">
</Script>
<Link type = "text/css" rel = "stylesheet" href = "/scripts/jquery. autocomplete/jquery.autocomplete.css"/>
<Script type = "text/javascript" src = "/scripts/jquery. tip/jquery. tip. js"> </script>
<Link type = "text/css" rel = "stylesheet" href = "/scripts/jquery. tip/jquery.tip.css"/>
Sometimes, the Js files referenced on the page will be more. If the page layout is neat and good, once the layout is slightly untidy, the whole page will look messy, is there a more concise way to reference Js files? This article will discuss this issue.
I first searched on cnblogs before I started to do it. Some Related Articles are described as follows: Compile (^_^). Although a demo is downloaded, It is a compiled program and the source code is invisible, even if you don't see the source code, you can still run it. After trying, there is still one script missing in the demo program. do file, and you also need to configure ". do "application extension, the method is as follows: select the website created in IIS, right-click" properties "such:
Back to the question, although only one compiled demo program is provided, some good suggestions are provided for me to re-implement the function after the code is decompiled and viewed, here, I would like to express my gratitude to the author ^ _ ^. Next, let's take a look at how I organize and manage JS files:
1. Add a reference on the page: <script type = "text/javascript" src = "/Scripts/JsPlugins. js? Plugins = popup & jqPlugins = autocomplete, tip "> </script>
Note: The plug-in name written by native js is assigned after the parameter plugins. Multiple plug-ins can be separated by commas;
The jqPlugins parameter is assigned with the jquery plug-in name. Similarly, multiple jquery plug-in names can be separated by commas.
2. Add the Js configuration file for the project as follows:
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Script path = "/scripts/">
<! -- Javascript plugin -->
<Plugins name = "javascript" file = "">
<! -- Baidu pop-up layer -->
<Plugin name = "popup" file = "popup-min.js">
<Require file = "popup-util.js"> </require>
</Plugin>
</Plugins>
<! -- Jquery plugin -->
<Plugins name = "jquery" file = "jquery-1.3.2.js"> color: #000000; ">
<! -- Automatic completion -->
<Plugin name = "autocomplete" file = "plugins/autocomplete/jquery. autocomplete. js">
<Require file = "plugins/autocomplete/jquery.autocomplete.css"> </require>
</Plugin>
<! -- Prompt box -->
<Plugin name = "tip" file = "plugins/tip/jquery. tip. js">
<Lazy file = "plugins/tip/bs.css"> </lazy>
</Plugin>
</Plugins>
</Script>
3. Add HttpHandle to the project's web. config file as follows:
<Deleetask>
<Add key = "JsConfig" value = "~ /Config/JsConfig. xml "/>
</AppSettings>
And
<HttpHandlers>
<Add verb = "*" path = "JsPlugins. js" type = "ScriptLoader. ScriptPluginHandle, ScriptLoader"/>
</HttpHandlers>
In addition, I have made the following improvements in the implementation process:
1. compatible with IE6, IE7, IE8, Firefox, Safari, and opera browsers (tested, the demo program mentioned in this article fails to function under IE6)
2. The anonymous callback function is used to avoid the same name as the method in the loaded Js file.
3. Native js plug-ins and jquery plug-ins can be called at the same time, provided that the two do not conflict
For specific implementation, you can download the source code. the development environment of this source code is VS2008 + ASP. net mvc 1.0.