Inherit IHttpHandle to organize and manage JS plug-ins

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.