Java Programmer's JavaScript learning notes (13--jquery UI)

Plan to complete this note in the following order: 1. Idea. 2. Attribute copying and inheritance. 3. This/call/apply. 4. Closure/getter/setter. 5. prototype. 6. Object-oriented simulation. 7. The basic mechanism of jquery. 8. jquery Selector. 9. jquery Tool method. Jquery-expands at the "class" level. Jquery-is expanded at the "object" level. jquery-extension Selector. JQuery UI. 14. Extend the jquery UI. This is the 13th note, today we talk about jquery Easyui. Easyui is a common extension of jquery, which solves the problem of page components, implements drag-and-drop components, richer drop-down boxes, date components, table components, and so on. Today we try to explore our own way of jquery expansion and page assembly by analyzing Easyui's modular design, interface style, and implementation details.

Author Blog: http://blog.csdn.net/stationxp author Weibo: http://weibo.com/liuhailong2008  reprint Please obtain the author's consent  

1 Easyloader.jseasyloader is the "loader" of Easyui, and the code is divided into four parts: part 1th defines the resource, and the code excerpt is as follows:

var modules = {      progressbar:{           js: ' jquery.progressbar.js ',          css: ' progressbar.css '      },      Numberbox: {           js: ' jquery.numberbox.js ',           dependencies:[' textbox ']      },      parser:{           js: ' Jquery.parser.js '      } }; var locales = {  ' zh_cn ': ' Easyui-lang-zh_cn.js '};

As an extensible plug-in framework that takes into account the needs of the Internet page to optimize load times, Easyui provides a flexible way to customize and solves the problem of dependencies between components.
Part 2nd defining the Loading methodThis part of the code is lengthy, unless you want to implement your own Web resource dynamic loading mechanism, otherwise rough over again, understand the functionality. the defined functions and invocation relationships are as follows.

var queues = {}; function Loadjs (URL, callback) {} function Runjs (URL, callback) {Loadjs (URL, function ()}), function loadcss (URL, Callba CK) {}//solve the problem of loading state loading/loaded function Loadsingle (name, callback) {loadcss (URL, function () {}); Loadjs (URL, function ( ){ }); }//Solve dependencies problem function LoadModule (name, callback) {Loadsingle (M, function () {});}

This part is just a definition, not called.
the 3rd part is the definition of variable EasyloaderThe code looks like this:

Easyloader = {      modules:modules,      locales:locales,      Base: '. ',      theme: ' Default ',      css:true,      Locale:null,      timeout:2000,      load:function (name, callback) {           loadcss (easyloader.base + name, callback);           Loadjs (name, callback);           LoadModule (name, callback);      },      onprogress:function (name) {},      onload:function (name) {}}; window.using = Easyloader.load;

from the code level, just define theThe easyloader variable and binds the Load method to the global using. If the user invokes the using ('ProgressBar') to load the corresponding module. Easyloader complete implementation as a loader mission, it provides just a code isolation mechanism and dynamic loading framework.
sinceeasyloader just load the frame, then easyui the specific components, that is, the relationship between the aloof. we can totally bypass it .Easyloader directly references the component to be used. is it really possible to do this? Read the 4th part.
Part 4 is easyloader: ParseThe code is as follows:

if (window.jquery) {      jQuery (function () {           easyloader.load (' parser ', function ()}//Is using                JQuery.parser.parse (); Suddenly realize that Easyloader itself is not since the jquery.           });      }); }

Why is it so impatient to invoke the Pasrse method of the parser component? We find the source code to look at:

$.parser = {auto:true, oncomplete:function (context) {}, plugins:[' draggable ', ' droppable ', ' resizable ', ' Pag       Ination ', ' tooltip ', ' LinkButton '],//Here contains only the page component Parse:function (context) {var aa = [];             for (var i=0; i<$.parser.plugins.length; i++) {//process plugin var name = $.parser.plugins[i];            By the Style class name convention, ERR, so good?            Intrusive too strong to think that this is closed practice var r = $ ('. easyui-' + name, context);                            if (r.length) {//If it is a ProgressBar component, the value of name is ProgressBar if (R[name]) { R is a jquery object, r[' ProgressBar ') is valid, that is, the component has been loaded r[name] ();                         Call R.progressbar (), each component is represented as a method} else {//If the component has not yet been loaded, it is loaded and then called//the following is a logical simulation, not the source  Easyloader.load (name, function () {r[name] ();                 }); }            }       }}

Well, clearly, Easyui has lifted the veil for us.
2 Bypass EasyloaderNow that we know the secret of Easyloader, we try to bypass it and we need to do two things: one is easyloader, and we replace it with the following code:

<link rel= "stylesheet" type= "Text/css" href= "Progressbar.css" >  <script type= "Text/javascript" src= " Jquery.progressbar.js "></script>

Instead of parser, we replace it with the following code:

$ (function () {       $ (' #p '). ProgressBar ();});

The parser is referenced in the ProgressBar code to simplify initialization of the parameter configuration and to introduce parser directly.

<script type= "Text/javascript" src= "Jquery.parser.js" ></script>

Page code Reuse Esayui Demo code, the complete code is as follows:

Easyloader is an excellent resource-loading implementation, and we bypass it just to deepen our understanding of the relationship between modules. now we know that Dependencies:none is not really not dependent, but only relies on parser. parser can be bypassed as long as you do not use the tool method it provides. 
3 Component Definitionswe try to analyze the ProgressBar source code and understand the rules of Easyui component definition. 
(function ($) {//define the default value for properties and Events $.fn.progressbar.defaults = {width: ' auto ', height:22,value:0,//percentage valuetext: ' { value}% ', onchange:function (newvalue,oldvalue) {}};//initialization method, call in entry function//This is a typical page component that adds a style at initialization, adds page elements, Bind event function init (target) {//Increment style $ (target). addclass (' ProgressBar ');//Add the page element to implement the function $ (target). html (' <div class= ' Progressbar-text "></div><div class=" Progressbar-value "><div class=" Progressbar-text "></ Div></div> ');//trigger when page size is adjusted? Force true to enforce a change in the size of $ (target). Bind (' _resize ', function (E,force) {if ($ (this). Hasclass (' easyui-fluid ') | | SetSize (target);} Block event bubbling? return false;}); return $ (target);} /* Entry Functions */$.fn.progressbar = function (options, param) {//If the first argument is of type string, it is called in the method//shape such as: $ (' #x '). ProgressBar (' Getval UE '), if (typeof options = = ' String ') {var method = $.fn.progressbar.methods[options];if (method) {return method (this, param);}} Configuration items default to empty objects options = Options | | {};//plug-in extension's basic notation return This.each (function () {//} take state data from the cache var = $.data(This, ' ProgressBar '): if (state) {//if found, merge the new options into $.extend (state.options, options);} else {//create a new one and add the cache state = $ . Data (this, ' ProgressBar ', {//$.fn.progressbar.parseoptions (this) is customized, see the code later//Here you can see the priority options for configuration information: $.extend ({}, $.fn.progressbar.defaults, $.fn.progressbar.parseoptions (this), options), Bar:init (this)//init () returns $ (target)}); $ (this). ProgressBar (' SetValue ', state.options.value); SetSize (this);});};/ /closures, visible to $.fn.progressbar functions, invisible function setSize (target,width) {//Get configuration information from cache var opts = $.data (target, ' ProgressBar '). options;//gets the bar object, that is, init () returns the $ (target) var bar = $.data (target, ' ProgressBar '). Bar;if (width) opts.width = Bar._size (opts) defined in width;//parser;//change progress bar to show Bar.find (' Div.progressbar-text '). CSS (' width ', bar.width ()); Bar.find (' Div.progressbar-text,div.progressbar-value '). CSS ({height:bar.height () + ' px ', lineHeight:bar.height () + ' px '});} The method that is provided to the user to call $.fn.progressbar.methods = {//Call Way: $ (' P '). ProgressBar (' Options '). value;// The first parameter, JQ, has been passed by ProgressBar Thisoptions:fUnction (JQ) {return $.data (jq[0], ' ProgressBar '). options;},//call Mode: $ (' P '). ProgressBar (' resize ', width); Resize: function (JQ, width) {return Jq.each (function () {setSize (this, width);});},//call Method: $ (' P '). ProgressBar (' GetValue '); Getvalue:function (JQ) {return $.data (jq[0], ' ProgressBar '). options.value;},//call Mode: $ (' P '). ProgressBar (' SetValue '), Setvalue:function (JQ, value) {if (value < 0) value = 0;if (Value >) value = 100;return Jq.each (function () {VA R opts = $.data (this, ' ProgressBar '). Options;var text = Opts.text.replace (/{value}/, value); var oldValue = opts.value;opt S.value = value;$ (this). Find (' Div.progressbar-value '). Width (value+ '% '), $ (this). Find (' Div.progressbar-text '). html (text); if (oldValue! = value) {Opts.onChange.call (this, value, OldValue);}});}};/ /called $.parser.parseoptions//has two dependencies parser$.fn.progressbar.parseoptions = function (target) {return $.extend ({}, $. Parser.parseoptions (target, [' width ', ' height ', ' text ', {value: ' number '}])) (JQuery);

There are two dependent parser, interested, can look at the source code.

4. Summary
Easyloader is an excellent resource-loading framework.
Parser is the core of Easyui, which implements the automatic load parsing (although the conventions are too inflexible, not my favorite style) page controls, while providing excellent page manipulation basic functions (this value is great).
ProgressBar code is clear, reasonable structure, can be used as a template for their own development of the page components.





Java Programmer's JavaScript learning notes (13--jquery UI)