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

Java programmer's JavaScript learning notes (13 -- jQuery UI), learning notes jquery
We plan to complete this note in the following order: This is the 13th note. Today we will talk about jQuery EasyUI. 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:

 <link rel="stylesheet" type="text/css" href="progressbar.css">  <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:

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 ('<div class = "progressbar-text"> </div> <div class = "progressbar-value"> <div class = "progre Ssbar-text "> </div> '); // is 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.












What level should java programmers master in javascript?
In fact, there are source code available on the net, and the js frameworks they use, such as jquery and ajax frameworks, such as dojo, extjs, and dwr, As long as programmers can write common javascript, such as form verification, tree menu, shutter menu, etc. And must be familiar with common methods of commonly used objects, such as document, widow, form. I am developing at the company and spend more time on the front end than on the back end. Programmers also need to understand css,

Development of Jquery UI (or javascript controls) materials note that these controls are developed instead of javascript controls
The principle of writing a jQuery plug-in is very simple. It is to write an anonymous execution function. The function defines the prototype function, that is, adding a method to the jQuery object. As for what to do with this method, is what your plug-in will implement
There are many examples on the Internet and they are easy to understand.

However, if you want to write a good plug-in, you still need to test the js skills and css design and operations. If you just want to know the principle of jQuery's plug-in implementation, there are many examples on the Internet, and you can understand the basics.