Based on the Yui Component Development (1) "Pearl Milk Tea Gang"

Share people: pull out the red

Lead: Today's front-end development more and more oo, but also more and more emphasis on reuse, the skilful use of JS-oo front-end code is a front-end engineer one of the basic qualities. At the same time, the site's development process is increasingly similar to the accumulation of wood. Modular thinking is also gradually in-depth application in the development of large-scale web sites, guiding the design and architecture of the website, in today's "Pearl milk tea Help" to share, we are based on the Yui component development to do in-depth discussion.

Modular Front-End development

With the rapid development of web technology, the front-end development of large Web sites relies more and more on complex teamwork, while modular thinking can effectively guide the efficiency and cost compression of team development. It allows us to focus on the assembly of the granular components in the project without having to focus on the implementation in the black box of each component, making the project development more efficient. Similar to the interface development of some software, it is simply using the mouse to drag controls in the control library to the panel to put a pendulum. And in the era of yui2.x, Yui in a large number of components also greatly facilitate our development, and now YUI3 has more powerful power, but there are not too many widgets available, we need to manually develop components.

Components are characterized by high cohesion and low coupling, and a fully fledged component should not be dependent on the environment, which is fundamentally different from plug-ins. Because the component only needs to expose the external interface, the total external call can.

In addition, components have some necessary components: components need to be initialized, components have their dependent word components, libraries, and skins. Components can also be modified (also known as reinitialization). Further, in essence, components contain styles, independent data, and interactive logic, which are also called M (Module), V (View), C (Control). For example, in the comments component of Taobao Magazine, MVC is so distributed:

MVC in a component

Where module and view should be completely stripped, they are connected by control. And in terms of their respective stability, Module (data) is determined at run time, the View (UI) is Controller because it can be changed, while initialization must have a certain skin, and the logic is OK, including data format and interaction behavior. Here is a clear indication of the three parts of the component, if the function of a component is not very abstract, you can follow this approach to abstract.

Designing a component
Component designers should be familiar with: components originating from the project and above the project, do not assume the environment of the components, the design will focus on the rich interface and parameter configuration, at the same time, to design a perfect black box interaction. Components designed according to this principle are reusable, easy-to-use, and robust.

For developers, to ensure reuse, ease of use, and robustness mentioned above, there are three principles that need to be followed

1. Note the priority of the configuration item
2. As few classes as possible
3. Ensure source scalability.

The underlying configuration is the configuration that should be identified in the specific project, such as the behavior of the pop-up box, including whether there is no shadow, drag and drop, or whether to scroll with the scroll bar scrolling, these properties of all the bullets in the project should be unified, these configurations we call the basic configuration. The default configuration refers to the fill when the parameter defaults to empty. The required configuration is the parameter that forces the pass in.

To use as few classes as possible is to ensure that the structure of the code is simple to gather, for example, I recommend using a prototype monomer to do the source packaging. And when developing components, be sure to differentiate between the two most important methods, Init and render, which represent initialization and reinitialization, and should be noted if your component can be changed in midstream.

In addition, there are some tips that need to be borne in mind, and these tips are useful for the extensibility of component code. Because the life cycle of a component is very long, even longer than the project itself, which means that his maintenance cycle is also very long, there may be a lot of people continue to add functionality to this component, then, do the skeleton of the component so that subsequent incremental development does not increase the source code entropy is particularly important, therefore, The ability to build a good scalable component structure is one of the references to the basic skills of the developer. These tips generally include:

1. Attributes belong to objects, methods are prototypes,
2. A prototype based (explicit) constructor,
3. The customization of the component.

The 1th is common sense, but engineers often ignore this simple principle when doing class inheritance, resulting in confusion in code organization. The 2nd inspiration comes from the design experience and good practice in class inheritance from the framework of Dojo, MooTools and prototype, and the 3rd inspiration comes from YUI3 design ideas about OO.

Proficiency in the above principles is helpful for developing a high quality scalable component. The final summary of the life of the component, components come from specific projects and specific business scenarios, where developers extract common functionality, form component prototypes, and are used by more projects and business scenarios, while their functionality increases over time, components become more sophisticated, and their lifecycle is far more than a product's lifecycle, Therefore, we have reason to shout our slogan: The product lasts long, the component is spread forever.

Ps:ok, said so much, has not mentioned the topic, these and Yui have what relationship? What exactly does that have to do with YUI3? YUI3 born in YUI2, can be said that pupil surpasses, YUI3 Natural excellent architecture for the skeleton of components to build a good foundation, which contains custom events, YUI3 textbook code reuse practices, and its plug-in mechanism, due to time, these content will be in the next "pearl milk tea Will" To do share, please pay close attention.

This issue is shared ppt:
http://www.slideshare.net/lijing00333/yui3-2728729

Next share of the PPT draft first read:
http://www.slideshare.net/lijing00333/yui3-2563104