Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to achieve the common processing of basic element components in javascript Semantic-UI". In daily operation, I believe that many people have doubts about how to achieve the common processing of basic element components in javascript Semantic-UI. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how to achieve the common processing of basic element components in javascript Semantic-UI". Next, please follow the editor to study!

Abstraction and encapsulation

In order to encapsulate dozens of basic components succinctly and efficiently, it is necessary to abstract the same processing part of the component. Js has added the class keyword to ES6. (of course, this is just a syntax candy, and the processing principle behind it is still the prototype thing.) With this keyword js takes the idea of abstraction and encapsulation a step further than before.

When thinking about problems with the idea of inheritance, it is obvious that the common processing of components can be accomplished by inheriting a common parent class (usually I prefer to use interfaces rather than inheritance, but js is not good at learning, and I don't know how to implement interface inheritance). After inheritance, the following processing of all basic components can be done by the parent class:

Edit and assemble CSS classes

The rendering component itself

Method callback of encapsulating event system

Implementation details

Edit and assemble CSS classes

As mentioned in series 2, the CSS editing and assembly of basic components is implemented in PropsHelper, all the details are hidden, and the component only needs to declare the relevant properties. For example, the attributes used by Header:

/ / attribute definition const PROP_TYPES = PropsHelper.getDefaultPropTypes () .concat (['size',' sub', 'dividing',' floated', 'aligned',' inverted', 'inline',' color'])

The declaration of these available properties, coupled with the props of the Button component instance, can edit and assemble the required collection of CSS class names. In the render method of Header, simply call:

Render () {/ / render element let style = this.createElementStyle (this.props, PROP_TYPES) + 'header'; return super.render (style);}

The details of generating style are found in the parent class UiElement of Header:

/ * * generate style * / createElementStyle (props, propsDef) {... Return PropsHelper.createStyle (props, propsDef) +'+ style;}

Rendering component

The rendering component is also implemented by common processing. As a basic component of the subclass, you only need to call super.render:

Render (style, children, props) {return React.createElement (this.props.as, / / component's html tag (default div) {id: this.props.id, / / component ID className: style, / / component class... this.getEventCallback () / / event callback declaration. Props / / component other props (props used to generate class is not needed)}, children? Children: this.props.children);}

In the beginning, there was no such implementation, and the rendering process of each component was left in the component's own render. However, with the increase of components, it is found that this part of the code is very reusable. If there is a special component that does not apply to this process, you can simply override the method in that component. This also improves the maintainability of the overall code to a great extent.

Callback of event system

This function is still being implemented. My goal is that any component only needs to be declared without implementing callbacks within the component, and callback handling is implemented by public methods. If a Button wants to use the onClick method, declare directly:

Btn

However, there is no need to implement callback handling of onClick within the Button component. (in fact, it cannot be implemented because the render processing of Button is implemented in its parent class UiElement.)

Const EVENT_CALLBACK = ['onKeyDown',' onKeyPress', 'onKeyUp',' onFocus', 'onBlur',' onChange', 'onInput',' onSubmit', 'onClick',' onContextMenu', 'onDoubleClick',' onDrag', 'onDragEnd',' onDragEnter', 'onDragExit',' onDragLeave', 'onDragOver',' onDragStart', 'onDrop',' onMouseDown', 'onMouseEnter',' onMouseLeave', 'onMouseMove',' onMouseOut' 'onMouseOver', 'onMouseUp',' onSelect', 'onTouchCancel',' onTouchEnd', 'onTouchMove',' onTouchStart', 'onScroll',' onWheel', 'onLoad',' onError', 'onTransitionEnd',' onAnimationStart', 'onAnimationEnd',' onAnimationIteration',]

The callback of the event system is defined in constructor as follows:

Constructor (props) {super (props); let eventProps = {}; for (let key in props) {if (key.indexOf ('on') = = 0 & & EVENT_CALLBACK.indexOf (key) > = 0) {eventProps [key] = this.handleCallback.bind (this, key);}} this.eventCallbacks = eventProps;}

If the props passed in by this component contains' onXXX' 'and the' onXXX''is defined in EVENT_CALLBACK, it is assumed that the component declares a callback of the event system, then the UiElement will bind the specific handling of the callback. The process is implemented as follows:

HandleCallback (callback, e) {if (this.props.callback) {this.props.callback (e);}}

Review

In UiElement, three types of common functions are implemented for basic component classes to call:

Edit and assemble CSS classes

The rendering component itself

Method callback of encapsulating event system

After the implementation, the same processing of the basic component class is extracted, leaving only some code that declares the nature. For example, the implementation of the Header component is simplified to:

Import React from 'react'; import PropsHelper from'. / PropsHelper'; import UiElement from'. / UiElement'; / / attribute definition const PROP_TYPES = PropsHelper.getDefaultPropTypes () .concat (['size',' sub', 'dividing',' floated', 'aligned',' inverted', 'inline',' color']) / * title component * / class Header extends UiElement {/ / Type definition static propTypes = {... PropsHelper.createPropTypes (PROP_TYPES)}; / / default definition static defaultProps = {... PropsHelper.getDefaultPropsValue (PROP_TYPES)} / * get render content * / render () {/ / render element let style = this.createElementStyle (this.props, PROP_TYPES) + 'header'; return super.render (style);}} export default Header

The benefits are obvious:

Simplify the implementation code to improve readability

Packaging common processing to improve maintainability

Maintain scalability through method override

At this point, the study on "how to achieve the common processing of basic element components by javascript Semantic-UI" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.