Jquery widget source code analysis

Recently, the project needs to modify the dialog source code of jquery ui. Therefore, let's take a closer look at the dialog source code of jquery ui and make a summary.

Dialog_obj (alias ):

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + PGJyPgo8L3A + CjxoMT5XaWRnZXRfb2JqKLHww/spOjwvaDE + signature + Signature = "http://www.2cto.com/uploadfile/Collfiles/20140609/20140609091508380.jpg" alt = "\">

Call the widget Method

$. Widget ("ui. dialog", dialog_obj); // The jquery. ui. dialog. js file contains row 27th. // The widget method is located in row 27th of the jquery. ui. widget. js file.

Variable assignment:

prototype=dialog_obj

base=Widget_obj

Define Constructors

$ [Namespace] [name] = function (options, element) {// allow instantiation without initializing for simple inheritanceif (arguments. length) {this. _ createWidget (options, element );}};//
// The above code is located in row 44th of the jquery. ui. widget. js file.
The above code functions:
JQuery. ui. dialog = function () {}; // defines a constructor named dialog class

Create an Instance Object of the Widget_obj class

var basePrototype = new base();

Set the prototype object of the dialog class

$[ namespace ][ name ].prototype = $.extend( true, basePrototype, {namespace: namespace,widgetName: name,widgetEventPrefix: $[ namespace ][ name ].prototype.widgetEventPrefix || name,widgetBaseClass: fullName}, prototype );

Use the extern method to merge basePrototype and prototype. The two objects contain attributes with the same name,

The latter overwrites the former and assigns the basePrototype as the return value to the prototype object of the dialog class,

For example:

In Widget_obj, _ init, _ create, and destroy are overwritten by _ init, _ create, and destroy of dialog_obj.

Create a dialog plug-in

$.widget.bridge( name, $[ namespace ][ name ] );//name="dialog" ,jQuery.ui.dialog

$. Fn [name] = function () {}; // defines the dialog plug-in

Call

/* When we call $ ("# showDiv") in js on the page "). dialog ({width: 500px; heigh: 200px ;...}); $. fn [name] = function (options) {} highlights: In the bridge method, there is the following section $. data (this, name, new object (options, this); // this is the div object whose id is showDiv, and options is the json object passed in on the page, name = "dialog", object = jQuery. ui. dialog, use the closure new object // to create jQuery. ui. instance constructor of the dialog class: $ [namespace] [name] = function (options, element) {// allow instantiation without initializing for simple inheritanceif (arguments. length) {this. _ createWidget (options, element) ;}; // call this. _ createWidget, code: _ createWidget: function (options, element) {// $. widget. bridge stores the plugin instance, but we do it anyway // so that it's stored even before the _ create function runsthis. element = $ (element ). data (this. widgetName, this); this. options = $. extend (true, {}, this. options, $. metadata & $. metadata. get (element) [this. widgetName], options); var self = this; this. element. bind ("remove. "+ this. widgetName, function () {self. destroy () ;}); this. _ create (); this. _ init ();}*/