Jquery Plugin: Why use the widget Factory (4)

Source: Internet
Author: User

This is a translation article. The original Article address:

Http://learn.jquery.com/jquery-ui/widget-factory/why-use-the-widget-factory/

Widget Factory)

The widget factory provided by jquery UI is the basis for creating all jquery UI widgets. Using the widget factory to create a jquery plug-in brings us a lot of convenience, such: perform common tasks in accordance with the unified specifications, including the export plug-in method and configuration options for changing the plug-in after initialization.
Why use the widget Factory (Why use the control factory)

Writing a jquery plug-in is as simple as simply adding a method to jquery. Prototype (usually $. FN) and following certain conventions, for example, returning this for a chained operation. So why is there a widget factory? How can hundreds of lines of code be used?
In this document, we will take an overview of the benefits of the widget factory and learn when and why it is necessary to use it.
Stateless vs. stateful plugins (stateless vs stateful INS)

Most jquery plug-ins are stateless, and the task is completed after they execute some actions. For example, if you want to modify the text of an element through. Text ("hello"), you do not need to go through multiple steps and get the same result. For such plug-ins, you are sure you can directly extend the jquery prototype.
However, some plug-ins are stateful. They have a complete life cycle, need to maintain the status, and need to respond to any changes. This type of plug-ins requires a large amount of code to focus on initialization and state management (sometimes we need to handle the destruction and cleaning work ). This leads to the emergence of a lot of repetitive code for creating stateful plug-ins. Even worse, each plug-in author may use different methods to process the lifecycle and status, resulting in different plug-ins having different api styles. Widget factory is dedicated to solving these two problems: Eliminating the hassle of repetitive code and creating a unified API across plug-ins.
Consistent API (API of the same style)

Widget factory defines how to create and destroy controls, obtain and set configuration items, call plug-in methods, and listen for events triggered by controls. By using the widget factory to create your stateful plug-ins, you will naturally follow the agreed standards to make it easier for new users to use your plug-ins. In addition, for the interface defining the plug-in, the widget factory has also implemented the corresponding functions for you. If you are not familiar with the API provided by the widget factory, read how jquery UI works.
Setting options on Initialization (configuration during initialization)

Whenever you create a plug-in that accepts configuration parameters, You need to define as many default values as possible. Then, you need to merge the default value and the configuration provided by the user during initialization. A good idea is to expose your default configuration so that users can change it. A typical mode is like this:

$. FN. plugin = function (options) {Options = $. extend ({}, $. FN. plugin. defaults, options); // The plug-in logic is written here}; $. FN. plugin. defaults = {param1: "foo", param2: "bar", param3: "Baz "};

Widget factory provides a better implementation method. Let's take a look at how the widget factory is implemented:

$. Widget ("ns. plugin ", {// default configuration options: {param1:" foo ", param2:" bar ", param3:" Baz "}, _ create: function () {// The configuration has been merged and stored in this. options // write the plug-in logic here }});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.