• Author: Chen Da Yu Tou
  • Making: KRISACHAN

preface

When I was checking Zhihu, I saw this question: “How do you measure a person’s JavaScript level?” Then he answered the question shamelessly himself. Here are my answers:

The original text reads as follows:

A: To see if A person writes code in A standard way, if the code is strong, extensible, readable or not, and if the API design is reasonable.

These have been accumulated over the years and are independent of programming languages.

Far more valuable than memorizing handwritten bind, prototype chains, and closures.

This is the key to your code.

Q: How can you tell quickly in an interview?

A: Ask the interviewer to design A component, don’t write it, just answer it. From API design, documentation, project structure, unit testing, writing patterns, performance optimization and other aspects to answer.

People with work experience can write basic business logic, but writing well is the embodiment of experience, ability and learning ability.

Personal elucidation

First of all to a disclaimer, the above answers are personal experience and insights, the answer is certainly not unique, or even not all right, so beg lightly spray.

Why did I say “design component” when I asked how to quickly determine if someone is a advanced front-end in an interview?

Because I think there is a certain strength of the front end, “component” this concept is around but, or read the source code of open source components, or write their own components.

For general business problem, and I believe that as a developer from a certain time, no matter what level, this is not a problem, but how to distinguish the level of the developer, can be judged by him to write the code, and is not all, of course, in 996, after all, or catch up, it would be easy to write in order to complete the product quickly and, In this case, the quality of the code and the individual level are not necessarily reflected.

Let’s explore this problem by designing a “Button (

First of all, are we clear about the function of “Button”? Is it a decorative component or a functional component?

The question is simple. A “Button” is a functional component that allows the user to take actions and make choices by clicking or touching it.

scenario

So where do “buttons” usually go? An experienced developer might think of the following scenarios:

  • dialog
  • The modal window
  • The form
  • card
  • The toolbar

There may be the following states:

  • The default state
  • The initial state
  • State information
  • Warning state
  • Dangerous state

There may be one of the following forms:

  • Solid button
  • The text button
  • The stroke button
  • Icon button
  • The rounded button
  • Rectangular button

There may be the following sizes:

  • small
  • medium
  • large

Operability may include the following:

  • Enter click
  • The mouse to click
  • Click on the touch
  • Banned click

The events carried may be of the following two types:

  • Click event
  • Enter key KeyDown event
  • Tap the event

The above is a partial style, but as a component developer, it is something we need to consider on a daily basis.

API

During the API design phase, we may expose the following apis through the above scenarios

  • Type: button status
  • Size: indicates the size of a button
  • Color: button color
  • Text: indicates the text inside the button
  • Icon: icon in a button
  • HtmlType: The type attribute supported by native buttons
  • Attrs: Other native attributes
  • Variant: Button format
  • Click: a mouse click event
  • Tap: touch screen click event
  • Keydown: Indicates that the enter key is pressed

Writing core logic

After our API is designed, we can start development, which may vary depending on the type of project we are working on, the development tools we choose, and the patterns we choose.

Should we write it independently or directly within the project, and if so, which packaging tool should we choose, gulp or Webpack or something else, and why?

For example, if we were writing in TS, we might need to write button.d. TS. If it was a vUE component, we would also need to consider injecting vue. use into vue (button.install (vue)). If it was react, We also need to consider whether to use the React. ForwardRef for ref forwarding.

And then our code specification, Function or Class, how the common code block is abstracted, how it is, what are the naming conventions, which properties are required, which properties are optional, what are the default values? What are we thinking?

So the final component usage might look something like this:

import Button from './componenet/Button' <Button htmlType="submit" aria-label="add" variant="contained" color="rgba(17, </Button>Copy the code

Unit testing

In our development process, there is a troublesome but essential process is unit testing, at this time the unit testing library we choose? Jest or Mocha? How do I write the test case? How do you simulate a click or asynchronous response? Call it snapshots? This is also in our consideration.

So our test script might look like this:

import Button from './componenet/Button'
import { shallow } from 'enzyme'

describe('<Button />', () => {
  it('render success', () = > {const wrapper = shallow((
      <Button htmlType="submit" aria-label="add" variant="contained" color="rgba(17, 82, 147, 1)" click="clickHandler" />add</Button>
    ))
    expect(wrapper.text('add')).to.equal(true)})})Copy the code

other

Other functions such as developing documentation, using documentation, version iteration, project configuration, package development optimization, and other automation functions are also considered.

conclusion

These are some of the points we might consider when developing a “Button component.” There may be some imperfections, but what I’m trying to say is that it’s actually a good measure of a person’s JavaScript skills. For example, you can write basic concepts such as prototype chain diagram, closures, anti-shock and throttling, but if you do not use them in the project, it will be an empty talk after all, without much substantial help to the technical level. Of course, it is not to say that mastery of these contents is not good, but compared with actual combat, or just satisfactory.

Proficient code writers are not necessarily advanced, but if they can write a component well, they can’t be any worse.

This article seems to be missing the point. The original topic is “how to measure someone’s JavaScript skills”, but it turns out to be much more than that. But in this way, it is possible to determine the level of a person’s code, not just JS, but IOS as well.

Afterword.

If you like to discuss technology, or have any comments or suggestions on this article, you are welcome to add yu Tou wechat friends to discuss. Of course, Yu Tou also hopes to talk about life, hobbies and things with you. You can also scan your wechat account to subscribe to more exciting content.