Translation-Understanding _ widgetbase

Original article: Understanding _ widgetbase

In this tutorial, you will learn what dijit's _ widgetbase module is and how it exists as the basis for all pendants in the dojo toolkit.

Start

As the basis of dijit, you can create your own pendants mainly by using a base class, which is defined in the dijit/_ widgetbase module. Of course, building a web application depends on other key points in the dojo Toolkit (such as the dojo parser and dijit templating system). These modules are the key to creating custom pendants of any kind using the dojo toolkit.

If you are using the earlier version, you will be familiar with the dijit/_ widget module. Dijit/_ widget still exists. It inherits from dijit/_ widgetbase. It is best to inherit from dijit/_ widgetbase to create a custom pendant, because dijit/_ widget can be discarded in Dojo 2.0.

The key to understanding the dijit system is the lifecycle of the pendant. The lifecycle should be concerned at the beginning of the build of the pendant. In other words, from the build of a pendant to the full use of the application, the DOM elements associated with the pendant are analyzed.

If you want to know why the front of the widget and widgetbase both have an underscore _, this is because they are not the modules used to directly instantiate the class. On the contrary, they are mainly used to inherit the base class.

To accomplish this, dijit/_ widgetbase defines two concepts: a series of methods are continuously called during the creation of the pendant, And the lifecycle of the pendant in the application, set and bind the latest data to the method for obtaining fields. Let's take a look at the first principle: the lifecycle of the dijit pendant.

Dijit Lifecycle

Each pendant is declared using _ widgetbase as the base class and runs a series of methods during instantiation. Their calling order is listed as follows:

• Constructor
• Postscript
  • Create
    • Postmixinproperties
    • Buildreadering
    • Postcreate
• Startup

These methods mainly deal with the following:

• Use the default and runtime values to initialize the data of the pendant.
• Generate a DOM structure for the visual presentation of the pendant
• Place the key Dom structure into the page
• Processing depends on the logical representation of the DOM structure in the document.

Postcreate ()

So far, the final method in mind when creating a custom pendant should be postcreate. It will be called after the pendant property definition and the created pendant are rendered in the document-but before its own fragment is added to the document. This is why it is very important, because it is in a very important position. As a developer, this is the opportunity to make the final modification before the pendant is presented to the user, including setting custom attributes. When developing a custom pendant, most of the custom parts are completed here (not all ).

Startup ()

The second important method in the dijit lifecycle should be startup. This method is designed to handle things after a DOM fragment is actually added to the document; it will not be triggered until any potential child pendants are created and started. This is very useful for composite pendants and layout pendants.

When instantiating a pendant in programming mode, the startu method of the pendant is always called when it is put into the document. The common mistake people make is to forget to call startup, and then scratching their heads there, wondering why our pendants are not shown.

Tear down method (method called during Structure Analysis)

In addition to the instantiation method, dijit/_ widgetbase also defines some destructor (which are listed in the call order ):

• Desctroyrecursive
  • Destroydescendants
  • Destroy
    • Uninitialize
    • Destroyrendering

When writing a custom pendant, any action or action for destruction should be placed in the destroy method. (Do not forget to call this. inherited (arguments )!) Dijit takes care of nodes by itself and many objects manage your tasks (using these methods). Generally, you do not have to worry about the methods inherited from dijit.

Although desctroy is the center logout method of any pendant, it is wise to call desctroyrecursive when you want to explicitly deregister a pendant. It not only ensures that the pendant itself is deregistered, they also include their child pendants.

Node reference

A pendant is usually a kind of user interface, which is incomplete without some Dom. _ Widgetbase defines a standard attribute called domnode, which is used to reference the parent node of the pendant. If you need to use it to do something, you can obtain this reference in programming (such as moving the pendant in the document) and it is available when postcreate calls.

In addition to the domnode attribute, some pendants also have the containernode attribute. This is a reference to the child node of the pendant or a pendant defined outside of your pendant, that is, the source code node of the declared instantiated pendant. (Note: I am not quite familiar with what it will be)

We will discuss containernode in another tutorial. Here we only need to know its existence. (Obviously, all pendants inherited from dijit/_ container should have this attribute)

Getters and setters

In addition to basic methods such as startup and destruction, _ widgetbase also provides more than some predefined attributes for the pendant, but there is also a way for you to customize getters and setters, it will work with the standard get and set methods, which are predefined in all the pendants. The following code defines private methods:

1 // for the field "foo" in your widget2 3 // custom getter4 _getFooAttr: function() { /* do something and return a value */ },5 6 // custom setter7 _setFooAttr: function(value) { /* do something to set a value */ }

 

If you define such a custom method, you can use the standard get and set methods of the _ widgetbase-based pendant instance. For the above instance, you can do this:

1 // assume that the widget instance is "myWidget":2 3 // get the value of "foo"4 var value = myWidget.get("foo");5 6 // set the value of "foo"7 myWidget.set("foo", someValue);

 

The standard allows other pendants and control code to interact with a pendant in a unified manner, giving you the ability to add custom logic when a field is accessed (like modifying Dom fragments ), you can also stop other methods (such as event processors or notifications ). For example, if your pendant has a custom value, you want to notify anyone when it is changed (through a onchange method you defined ):

1 // assume our field is called "value"2 3 _setValueAttr: function(value) {4     this.onChange(this.value, value);5     this._set("value", value);6 },7 8 // a function designed to work with dojo/on9 onChange: function(oldValue, newValue) {}

 

As you can see, this gives us a convenient way to customize the behaviors of getter and Setter in our pendants.

Owning handles (with processor)

/* I don't quite understand. I want to learn other things and try again */

Predefined attributes and events

Finally, _ widgetbase provides a set of predefined attributes:

• ID: A unique string identification pendant
• Lang: A rarely used string that can overwrite the default dojo language.
• Dir: supports reading.
• Class: Class Attribute of the domnode node of the pendant
• Style: The style attribute of the domnode node of the pendant.
• Title: HTTP title attribute of the pendant
• Baseclass: the root of the pendant CSS class
• Srcnoderef: the DOM node before the pendant is provided. Note that dependencies and types of pendants (such as template pendants) will be canceled with postcreate and the original nodes will be abandoned.

Conclusion

Dijit's _ widgetbase infrastructure provides a solid foundation for the creation and use of pendants. It can be described as comprehensive (lifecycle, Dom node reference, getters and setters, predefined attributes and events ). We understand the importance of postcreate in developing the lifecycle of a custom pendant, and call the startup method when instantiating the pendant programmatically. We also covered dijit's getter/setter infrastructure and the importance of the domnode attribute.

Translation-Understanding _ widgetbase