Java programmer's JavaScript learning notes (13 -- jQuery UI)

Java programmer's JavaScript learning notes (13 -- jQuery UI)
We plan to complete this note in the following order: Java programmer's JavaScript learning notes (1 -- Concept) Java programmer's JavaScript learning notes (2 -- Property copying and inheritance) java programmer's JavaScript learning notes (3 -- this/call/apply) Java programmer's JavaScript learning notes (4 -- this/closure/getter/setter) java programmer's JavaScript learning notes (5 -- prototype) Java programmer's JavaScript learning notes (6 -- object-oriented simulation) Java programmer's JavaScript learning notes (7 -- Basic jQuery mechanism) java programmer's JavaScript learning notes (8 -- jQuery selector) Java programmer's JavaScript learning notes (9 -- jQuery tool method) java programmer's JavaScript learning notes (10 -- jQuery-extended at the "class" level) Java programmer's Java Script learning notes (11 -- jQuery-extended at the object level) Java programmer's JavaScript learning notes (12 -- jQuery-extended selector) java programmer's JavaScript learning notes (13 -- jQuery UI) Java programmer's JavaScript learning notes (14 -- extended jQuery UI) This is the 13th note. Let's talk about jQuery EasyUI today. EasyUI is a common extension of jQuery. It solves the problem of page components and implements drag-and-drop components, more functional drop-down boxes, date components, and table components. Today, we try to explore our jQuery extension path and page componentization path by analyzing the modular design, interface style, and implementation details of Easyui.

Author blog: http://blog.csdn.net/stationxp author microblog: http://weibo.com/liuhailong2008 reprint please get the author's consent

1 easyloader. jseasyloader is the "Loader" of easyui. The code is divided into four parts: Part 1 defines resources. 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 a scalable plug-in framework, easyui provides a flexible customization method and solves the dependency between components, taking into account the demands of interconnected web pages for loading time optimization.
Part 1 defines the loading method. This part of the code is lengthy. Unless you want to implement the dynamic loading mechanism of your web resources, you can just peat it again and understand the function. The defined functions and call relationships are as follows.

Var queues ={}; function loadJs (url, callback) {} function runJs (url, callback) {loadJs (url, function () {});} function loadCss (url, callback) {}// solve the loading status problem loading/loaded function loadSingle (name, callback) {loadCss (url, function () {}); loadJs (url, function () {}) ;}// solve dependencies problems function loadModule (name, callback) {loadSingle (m, function (){});}

This part is only defined and not called.
The definition code of variable easyloader is as follows:

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;

At the code level, the easyloader variable is defined and the load method is bound to the global using. If you call using ('ssssbar'), you can load the corresponding module. Easyloader fully implements its mission as a loader. It provides only a code isolation mechanism and a dynamic loading framework.
Since easyloader only loads the framework, the relationship between the specific components of easyui, that is, the relationship between them. We can bypass easyloader to directly reference the components to be used. Is that true? After reading part 1, let's talk about it.
Part 1 is not about easyloader: The parse code is as follows:

If (window. jQuery) {jQuery (function () {easyloader. load ('parser ', function () {// that is, using jQuery. parser. parse (); // suddenly realized that easyloader itself is not jQuery. });});}

Why is the pasrse method of the parser component so impatient? Let's look at the source code:

$. Parser = {auto: true, onComplete: function (context) {}, plugins: ['draggable', 'dropable', 'resizable', 'pagination', 'tooltip ', 'linkclick'], // only the page component parse: function (context) {var aa = []; for (var I = 0; I <$. parser. plugins. length; I ++) {// process plugin var name one by one = $. parser. plugins [I]; // can this be done through the style class name conventions, Err? // The intrusion is too strong. I think this is a closed method. 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, and r ['ssssbar'] is valid, that is, the component r [name] () has been loaded; // call r. progressbar (), each component is represented as a method} else {// if the component has not been loaded, call it after loading // The following is a logical simulation, not the source code easyloader. load (name, function () {r [name] () ;}}}}

Well, it is clear that easyui has been unveiled for us.
2. Bypass easyloader now we know the secret of easyloader. We need to do two tasks to bypass easyloader: first, we need to replace it with the following code:

 
   <script type="text/javascript" src="jquery.progressbar.js"></script>

Instead, we use parser to replace it with the following code:

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

The progressbar code references parser, which simplifies initialization parameter configuration and directly introduces parser.

<script type="text/javascript" src="jquery.parser.js"></script>

The page code reuse esayui demo code. The complete code is as follows:

     
      Easy ProgressBar     
      <script type="text/javascript" src="jquery.min.js"></script>     <script type="text/javascript" src="jquery.parser.js"></script>     <script type="text/javascript" src="jquery.progressbar.js"></script>     <script type="text/javascript">      $(function(){           $('#p').progressbar();           $('#p').progressbar('setValue', 90);      });     </script>     Easy ProgressBar     

Easyloader is an excellent resource loading implementation. We bypass easyloader to deepen our understanding of the relationship between modules. Now we know that Dependencies: none does not really depend on parser, but on parser. Parser can be bypassed, as long as you do not use the tool method provided by parser.
3. Component definition we try to analyze the progressbar source code to understand the definition rules of easyui components.

(Function ($) {// defines the default values of attributes and events $. fn. progressbar. defaults = {width: 'auto', height: 22, value: 0, // percentage valuetext: '{value} %', onChange: function (newValue, oldValue) {}}; // initialization method, called in the entry function // This is a typical page component. Add a style and add page elements during initialization, bind event function init (target) {// Add a style $ (target ). addClass ('ssssbar'); // Add the page element to the actual function (target).html (''); // triggered when the page size is adjusted? Force to true can forcibly change the size $ (target ). bind ('_ resize', function (e, force) {if ($ (this ). hasClass ('easyui-fluid') | force) {setSize (target);} // prevents event bubbles? Return false ;}); return $ (target) ;}/ * entry function */$. fn. progressbar = function (options, param) {// if the first parameter is of the string type, it is in the call method // form such as: $ ('# x '). progressbar ('getvalue'); if (typeof options = 'string') {var method = $. fn. progressbar. methods [options]; if (method) {return method (this, param) ;}// the default configuration item is an empty object options = options | {}; // return this. each (function () {// retrieves status data from the cache var state = $. data (this, 'ss SS Bar '); if (state) {// if found, merge the newly passed options $. extend (state. options, options);} else {// create a new one and add the cache state =$. data (this, 'ssssbar', {// $. fn. progressbar. parseOptions (this) is custom. You can view the code later // here you can see the priority options of the 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) ;}) ;}; // Within the closure, for $. fn. the progressbar function is visible inside and invisible to the outside. function setSize (target, width) {// obtain the configuration information from the cache var opts =$. data (target, 'ssssbar '). options; // get the bar object, that is, the $ (target) var bar returned by init () = $. data (target, 'ssssbar '). bar; if (width) opts. width = width; // bar defined in parser. _ size (opts); // The upgrade bar displays bar.find('div.progressbar-text'detail .css ('width', trim ({h Eight: bar. height () + 'px ', lineHeight: bar. height () + 'px '});} // method provided for the user to call $. fn. progressbar. methods = {// call method: $ ('P '). progressbar ('options '). value; // The first jq parameter has been passed by the progressbar thisoptions: function (jq) {return $. data (jq [0], 'ssssbar '). options;}, // call method: $ ('P '). progressbar ('resize', width); resize: function (jq, width) {return jq. each (function () {setSize (this, width) ;}) ;}, // call method: $ ('P '). progressbar ('getva Lue'); getValue: function (jq) {return $. data (jq [0], 'ssssbar '). options. value;}, // call method: $ ('P '). progressbar ('setvalue', 90); setValue: function (jq, value) {if (value <0) value = 0; if (value> 100) value = 100; return jq. each (function () {var opts = $. data (this, 'ssssbar '). options; var text = opts. text. replace (/{value}/, value); var oldValue = opts. value; opts. value = value; $ (this ). find ('div. progressb Ar-value'{.width(value}'{'{}}(this}.find('div.progressbar-text'{.html (text); if (oldValue! = Value) {opts. onChange. call (this, value, oldValue) ;}}}}; // $. parser. parseOptions // There are two dependencies on parser $. fn. progressbar. parseOptions = function (target) {return $. extend ({}, $. parser. parseOptions (target, ['width', 'height', 'text', {value: 'number'}]) ;}} (jQuery );

There are two dependencies on parser. If you are interested, you can look at the source code.

4. Summary

Easyloader is an excellent resource loading framework.

Parser is the core of easyui and implements automatic loading and parsing (although the conventions are too rigid, not my favorite style) page controls, at the same time, it provides excellent basic page operation functions (which is of great value ).

The progressbar code is clear and reasonably structured. It can be used as a template for self-developed page components.