This is the 19th day of my participation in the August More Text Challenge

The main topic of this issue is how to write GOOD JS, introduced a conventional component from the beginning to iteration, step by step improvement, reconstruction process of thinking analysis. From the simplest problem, iterate step by step to achieve an abstract component.

preface

Write good JS some principles

• The company accountable
• Component packaging
• Procedural abstraction

The company accountable

HTML: Responsible for Structural

CSS: Make a Presentational

Js: Responsible for Behavioral

The sample

Write JS and control a web page to support both light and dark browsing modes.

What would you do if you did it?

Version of a

As shown below, we achieved clicking on the sun to turn white and clicking on the moon to turn black;

But what do you think is wrong with this version? How would you optimize?

There is a problem

• Failure to separate responsibilities, i.e., style and behavior
• Lack of encapsulation and reuse
• configurable
• Global pollution
• If you don’t know the scenario (to implement depth mode), you won’t know what the code does just by looking at it.

Version 2

How is this edition better than the last one? Are there any other plans?

Points superior to the previous edition

• Without the style of direct operation, the code does its job, readability, extensibility and maintainability will be better and higher;
• Use descriptive words, such as night, which presumably means night;

If you don’t know how the sun and moon are treated in this version, you can check out the substitution in :: Before and :: After pseudo-Elements.

Version 3

Use pure CSS

Knowledge reserves

• The first thing you need to know is

To match a <label> with a <input> element, you need to give <input> an ID attribute. <label> requires a for attribute with the same value as the ID of <input>.

• Then there’s the pseudo class: Checked

The: Checked CSS pseudo-class selector represents any selected radio(), Checkbox () or optionHTML element (“option”) in the (“select”) element.

Principle analysis: the use of check box switch to control the style

• We first write a hidden input, and then use the label so that the sun and moon ICONS can control the hidden input
• The pseudo-class checked for input is used to determine the current state
• When selected, change the style of the related content

conclusion

• HTML/CSS/JS is responsible
• Unnecessary direct manipulation of styles by JS should be avoided
• You can use class to represent state
• Pure presentation class interaction seeks zero JS scheme

Component packaging

Components are units of Web pages that contain templates (HTML), functions (JS), and styles (CSS). Good components have encapsulation, correctness, extensibility, and reuse.

The sample

Using native JS to write an e-commerce site of the wheel broadcast map, how to achieve?

First, design the HTML structure

A multicast graph is a typical list structure that can be implemented using unordered list

elements.

Design presentation effects CSS presentation

• Use CSS absolute positioning to overlap images in the same place
• Use the modifier for the state of the rotation diagram switch
• Use CSS Transition to animate the rotation diagram

JS behavior Design

Behavior design: API

API design should ensure atomic operation, single responsibility and flexibility.

Now let’s design the API for our rotation

Now that we have the API, we can create a new object and do things directly, like switch to the next image

Behavior design: Control flow

Use custom events to decouple.

We've already done that

• We can manipulate our carousel graph directly in code,
• Now we’re going to add control, which is the left and right arrow slide and the four little dots at the bottom
• So that we can directly manipulate our rotation map on the page

Although the rotation effect is already available, you can see that our constructor does some things that constructors should not do (for example, the logic for each action button is written into the constructor) besides doing initialization. So we should think about optimizing this component.

Summary: Basic method

• The structure design
• Show the effect
• Behavior design
  • API (function)
  • Event(Control flow)

Consider: How to improve?

The questions above

• Constructors are too complex
• Scalability and flexibility are not very strong

Refactoring: plug-in

The decoupling

• Extract control elements into plug-ins
• Dependency injection is used between plug-ins and components
• Ways to establish connections

First we simplify the constructor by taking out the operation logic written inside it

The plug-in is then cyclically injected by registering the plug-in

Use registerPlugins to inject the separated operations above, and then implement the rotation effect as above

Points superior to the previous version

• The logic of the plugin is separated from the logic of the wheel player.

• For example, if you don’t want the dot, you can register the dot method without affecting other functions.

• If you want to add a button elsewhere on the page, you can register the button as a method.

While this version has improved scalability, it’s still not ideal

• For example, you can disable the dot function by commenting dependencies, but the page dot is still there, and you need to manually remove the HTML from the dot.
• As you can see, we just decoupled JS, but not HTML

Refactoring: templated

The decoupling

Template HTML to make it easier to extend

Now we abstract out a render method to render the HTML container in addition to the registerPlugins abstraction above.

And the method for each plugin has been modified so that it has two actions

• 1, arenderMethod to control your own HTML
• 2, aactionMethod to control your logic

Then inject registerPlugins as before, with some modifications to the registerPlugins

Points superior to the previous version

• By commenting a plug-in, you can remove the functionality without having to manually comment the HTML

We can continue to optimize the components for better scalability

Refactoring: Component framework

abstract

Abstract out common component models

Let’s abstract out a Component

We can then implement our Slider based on this component

• First inherit Component
• The Slider then implements its ownconstructor.renderAnd other API methods

Same thing, except you can implement the Slider component like this. You can also implement other components that conform to the specification, such as tree structures, or inherit the Component to implement your own constructor,render, and other API methods.

conclusion

• Component design principles: encapsulation, correctness, extensibility, reuse
• Steps to implement components: structural design, presentation, behavior design
• Three times in the reconstruction
  • pluggable
  • templated
  • Abstraction (Component framework)

Current problems

• Although it has some extensibility and flexibility, the current Component framework is not perfect because TA is not necessarily suitable for all scenarios

Keep thinking: Room for improvement?

Is there room for further improvement in this component?

conclusion

In actual development scenarios, projects are often complex and components are often numerous, so under normal circumstances it is not possible to design such components step by step from scratch with native JS.

Component abstractions are usually already implemented in libraries we use, such as Vue and React. However, it is important to understand some of the ideas for designing components, so that you can understand the component ideas of the frameworks themselves and be able to use these frameworks and libraries better.

conclusion

I attended the byte youth training camp, so I prepared a re-learning front-end series. Due to the time, I may only be able to learn notes.

Update time: one essay will be published each day in the order of the course

Instructor: Byte front-end/Nuggets development lead – Moon Shadow

If any of the above is wrong, please point out in the comments section!

---

Xiao Ke love to finish click a “like” before leaving! 😗