Shulou(Shulou.com)06/02 Report--

What this article shares with you is about the implementation plan of jQuery. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article. Let's take a look at it with the editor.

JQuery implementation plan.

The situation is different from company to company. For example, our company's page files are user controls, and there is no absolute relationship between physical and virtual paths, so we cannot use relative paths (otherwise the files will not be found in the production environment). There are many projects, different folders in the same virtual directory correspond to different project projects, and so on.

This scheme is not universal, but some methods can be used for reference, and I hope to discuss it with you and help correct it.

one。 File management scheme of class library

Store the root path: src\ Assembly\ resource.eLong.Web.Files\ Resource\ JSLib\ jquery\

Reference root path: http://resource.elong.com/JSLib/jquery/

Compressed version reference path: http://resource.elong.com/JSLib/jquery/jquery-min-lastest.js

List of root path files:

Create a js folder under each Web project and place the jquery-vsdoc-lastest.js file:

Description:

First, put all versions of the jQuery class library on the static server and store the class library files in a folder. However, a * version will be selected as a reference and placed in the root directory.

The root directory contains the following files:

Name content description folder 1.3.2 jQuery class library organized by version number. For 1.3.2, that is, each later version of jquery, the class library files will be stored in a folder. However, the js file with each lastest name will be overwritten with a stable version of *. Folder plugin the folder where plug-ins are stored various plug-ins are stored in the form of folders under this path jquery.extend-lastest.jselong 's own extended jQuery method we will build our own javascript class library in the future. There are some core class libraries in this file. It is equivalent to our own tool class library. It is realized by extending jQuery.

It is mainly divided into two categories: tool functions and wrapper set functions. Jquery-lastest.jsjQuery uncompressed class library * version * stable version of jQuery original class library. JQuery-min-lastest.jsjQuery compressed class library * version * * stable version of jQuery compressed class library. JQuery-vsdoc-lastest.jsjQuery intelligent prompt class library * version * * stable version of jQuery Smart prompt class library.

To achieve IntelliSense at development time, you also need to place the IntelliSense version in the js folder of each web project. Because there are so many Web projects, please create this folder and put the files in the future.

two。 Class library reference scheme

In all the page head, * refers to jQuery's class library, using the absolute path:

Http://resource.elong.com/JSLib/jquery/jquery-min-lastest.js

Then introduce the smart prompt version of the script block through if (fasle). The path uses "~" to start from the root directory. I uniformly set up the js folder in the project source code of each channel and place the intelligently aware version of jquery-vsdoc-lastest.js*** class library. Note that this file does not need to be packaged and uploaded, it is only used as an intelligent prompt during development.

This ensures that only the compressed version of the jQuery class library is introduced into the compiled page.

Sample code:

JQuery reference scheme

Description:

In our website, static files are stored under another second-level domain name, resource.elong.com, using CDN. In order to ensure that the test environment is consistent with the formal environment, you can only use the absolute path to reference the jQuery library. However, script IntelliSense does not appear after using absolute path to reference jQuery IntelliSense version. Therefore, through this feature, we directly refer to the compressed version of the absolute path jQuery class library, thus cleverly solving the problem of intelligent prompt system error after the introduction of 1.3.2 compressed version.

Although dynamic pages can remove the introduction of smart tip version libraries through if (false), server statement blocks cannot be used on HTML pages. Therefore, for HTML pages, you need to manually delete the reference to the smart tip version before the program is released.

three。 Development and use plan

JQuery is a scripting library, not a scripting framework, and cannot limit how users use it, so it's easy to confuse scripts on a page.

Before you find a script management framework for when, use the script on the page in the following way:

1. In the add area at the bottom of the page, two function place event binding and execute on load statements, respectively. Even the javascript executed at load time must be executed after the DOM is loaded. So both function are nested in $() to ensure that they are called after the DOM is loaded.

two。 Try to avoid loading scripts in the header. You can add a script area to the page head that must be loaded in the header.

3. Custom functions should be placed on top of event binding and execute-on-load statements, and do not need to be included in $().

Here is a sample code for a complete page:

JQuery references the schema / / statement block that must be loaded in the header. Try to avoid using Hello World! / / user-defined method function demoMethod (event) {$("# divMsg") .hide (500) Event binding $(function () {$("# btnShow") .bind ("click", function (event) {$("# divMsg") .show (500);}); $("# btnHide") .bind ("click", demoMethod) $("# btnChange") .bind ("click", function (event) {$("# divMsg") .html ("Hello World, too!");}) / / the statement $(function () {$("# btnShow") .attr ("value", "modified display button")}) executed when loading; the above is how the implementation of jQuery is, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.