Learn jquery from scratch (eight): jquery implementation

This series of articles navigation

Learn jquery from scratch (i) Getting started with the epoch

Learn jquery from scratch (ii) Universal Selector

Learn jquery from scratch (iii) managing the jquery package set

Learn jquery from scratch (iv) attributes and styles for manipulating elements using jquery

Learn jquery (v) Events and event objects from scratch

Learn about jquery from scratch (vi) Ajax in jquery

Learn jquery (Seven) jquery animation from scratch-Get the page moving!

Learn jquery from scratch (eight): jquery implementation

Learn jquery from scratch (ix) jquery tool functions

Learn jquery from scratch (10) jQueryUI common function combat

Learn jquery from scratch (11) Combat form verification and auto-completion prompt plugin

I. Summary

This series of articles will take you to the fascinating world of jquery, where many authors use experience and solutions, even if you use jquery to find some cheats in reading.

This article is a temporary interrupt to introduce my jquery implementation program in the company.

Two. Preface

With a solid foundation of the previous chapters we have already been able to put jquery to work in the project. Go further and learn more about jquery before interrupting my jquery implementation.

The situation in each company is different. For example, our company's paging files are user controls, physical paths and virtual paths have no absolute relationship, so relative paths cannot be used (otherwise the files will not be found in the production environment). A wide range of projects, the same virtual directory of different folders corresponding to different projects and so on.

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

Three. class Library file Management scenario

Store 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

Root Path file list:

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

Description

First, all versions of the JQuery class library are placed on a static server, and the class library file is stored according to the folder. However, a new version is selected as a reference and placed in the root directory.

The root directory below contains the following files:

Name	Content	Description
Folder 1.3.2	The jquery class library organized by version number.	For 1.3.2, which is a later version of jquery, the class library file is stored as a folder. However, it will overwrite the JS files of each lastest name with the latest stable version.
Folder Plugin	folder where plugins are stored	Store various plugins as folders in this path
Jquery.extend-lastest.js	elong Self-expanding jquery method	In the future we will build our own JavaScript library. Some of these core class libraries are placed in this file. Equivalent to our own tool library. implemented by extending jquery. It is mainly divided into two kinds: tool function and package set function.
Jquery-lastest.js	jquery Uncompressed Class Library latest version	The latest stable version of the jquery original class library.
Jquery-min-lastest.js	jquery Compression Class Library latest version	The latest stable version of the jquery compression class library.
Jquery-vsdoc-lastest.js	jquery Smart hint Class library latest version	The latest stable version of the jquery Smart Cue class library.

To implement 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, the first user in the future builds this folder and puts it in a file.

Four. class Library Reference scheme

In all page head, the first class library that references jquery, uses the absolute path:

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

The smart cue version of the script block is then introduced through if (Fasle). The path uses "~" to find from the root directory. I built the JS folder in the project source code of each channel and placed jquery-vsdoc-lastest.js the latest IntelliSense version Class library. Note This file does not need to be packaged for uploading, only for smart hints when developing.

This ensures that the compiled page only introduces a compressed version of the JQuery class library.

Example code:

<HeadRunat= "Server"><title>jquery reference scheme </title> <script  Type= "Text/javascript" src= "http://resource.elong.com/ Jslib/jquery/jquery-min-lastest.js "></script > <% if (false) {%> <script src= "~/js/ Jquery-vsdoc-lastest.js "Type=" Text/javascript "></ script> <%}%> </head>         

Description

In our website, static files are stored under another level two domain name resource.elong.com, using a CDN. To ensure that the test environment and the formal environment are consistent, only the absolute path is used to reference the jquery library. However, the script smart prompt does not appear after using the absolute path to refer to the jquery smart hint version. So we use this feature to directly reference the absolute path of the compressed version of the JQuery class library, which cleverly solves the 1.3.2 compression version introduced after the intelligent prompt system error the problem.

Although dynamic pages can be de-introduced with the smart Cue version class library through if (false), server statement blocks cannot be used on HTML pages. So for HTML pages you need to manually delete the smart prompt version of the reference before the development process is released.

Five. Development Usage Scenarios

jquery is a script library, not a scripting framework, and cannot limit how users can use it, so it's easy to clutter the script on the page.

Before you find the Script management framework, use the script on the page as follows:

1. Add the <script> area at the bottom of the page, and two function places the statement "event binding" and "Execute on Load " respectively. Even JavaScript that executes at load time must be guaranteed to execute after the DOM has finished loading. So the two function is nested in $ () to ensure that the DOM is loaded after it has finished loading.

2. You should try to avoid loading scripts in the head. Must be loaded on the head to add a script area to the page head.

3. "Custom Functions" are placed above the "event binding" and "execute at load" statements, and do not need to be included in $ ().

The following is a sample code for a full page:

<%@ page language= "C #"%><!DOCTYPEHtmlPublic"-//w3c//dtd XHTML 1.0 transitional//en""Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><Htmlxmlns= "Http://www.w3.org/1999/xhtml"><HeadRunat= "Server"><Title>jquery Reference Scheme</Title><ScriptType= "Text/javascript"Src= "Http://resource.elong.com/JSLib/jquery/jquery-min-lastest.js"></Script> <%if (False) {%> <script src="~/js/jquery-vsdoc-lastest.js" type="Text/javascript" ></script> <%}%> <script type="Text/javascript" >The block of statements that must be placed on the head. Try to avoid using</Script>"Divmsg" >hello world!</div> <input id="Btnshow" type="Button" value="Show"/> <input id="Btnhide" type="Button" value="Hide"/><br/> <input id="Btnchange" type="Button" value="Modified to Hello World, too!"/> <script type="Text/javascript" >User-defined methodsfunction DemoMethod (Event) {$ ("#divMsg"). Hide (500); }Event Bindings $ (Function () {$ ("#btnShow"). Bind ("click", function (event) {$ ("#divMsg"). Show ($);}); $ ("#btnHide"). Bind ("click", DemoMethod); $ ("#btnChange"). Bind ("click", function (event) {$ ("#divMsg"). HTML ("Hello World, Too!");}); //The statement executed at load time $ (function () {$ ("#btnShow"). attr ("value", "Modified display button")}); </Script></body></html>     

Six. Summary

After confirming that no confidential information has been published, I have published this article. There is not much technical content, mainly for the company to promote the specific implementation of jquery.

Besides, I've been looking for a molded script framework to organize and manage various JS libraries and JS files. It all needs to be explored in future work.

Learn jquery from scratch (eight): jquery implementation