Preface 😜

In the next article, we will continue to look at how to write JS well. In the following articles, I’ll explain what you should focus on when writing code, and illustrate some of the relevance issues with examples.

Let’s begin this article

🤗part1: Let’s start with a piece of code

Let’s start with a piece of code. The specific code is as follows:

// Check whether a mat2d matrix is identity matrix
function isUnitMatrix2d(m) {
    return m[0= = =1 && m[1= = =0 && m[2= = =0 && m[3= = =1 && m[4= = =0 && m[5= = =0;
}
Copy the code

Let’s start with a question: is the above code well written? Why is that?

Some people may feel that the writing is not beautiful, or there are no comments, scalability is not good, etc.

In fact, the above code is a piece of real code, it comes from an open source library. Specific address: SpritejS

get layerTransformInvert() {
    if(this[_layerTransformInvert]) return this[_layerTransformInvert];
    const m = this.transformMatrix;
    if(m[0= = =1 && m[1= = =0 && m[2= = =0 && m[3= = =1 && m[4= = =0 && m[5= = =0) {
        return nul l;
    }
    this[_layerTransformInvert] = mat2d.invert(m);
    return this[_layerTransformInvert];
}
Copy the code

Now, let’s analyze the above code to see if it works. The specific analysis results are as follows:

From a simple code elegance point of view, this code is not elegant enough.

However, the above library is a graphics library, and this code is responsible for the logic that calculates our layer’s Transform matrix before rendering.

In other words, every time we calculate each frame, we need to do a calculation. Therefore, in such a scenario, the first thing to focus on is how to achieve performance optimization.

It maximizes performance compared to any other type of writing, so the above code is not a problem in such a scenario.

At the same time, for other scenarios where heap optimization is not so sensitive, this is not necessary.

So, generally speaking, code is good or bad in light of its usage scenarios.

🤫part2: What is the most important thing to focus on when writing code?

  • When writing code, we should focus on style, efficiency, conventions, usage scenarios (algorithms), and design.
  • Style: There is nothing wrong with choosing a style that is consistent (semicolons, closing braces, etc.).
  • Efficiency: when writing code, we should consider what kind of code is the most efficient to write. We should not write inefficient code if we can write efficient code. Of course, there is a balance to be struck that is to use it in context;
  • Conventions: Before development, teams agree on code specifications and styles, such aseslint 、 airbnbAnd so on;

🤔part3: Left-pad event

Let’s take a look at github’s left-pad incident. Let’s start with the code from this event, which looks like this:

function leftpad (str, len, ch) {
	str = String(str);
	
	var i = -1;
	
	if(! ch && ch ! = =0) ch = ' ';
	
	len = len - str.length;
	
	while(++i < len) {
		str = ch - str;
	}
	
	return str;
}
Copy the code

So what this author wants to do is, let’s say I have a string, and then I want to concatenate that string into a string of the same length.

This usage scenario is usually placed in some place where classes are presented, such as sorting. At that time, this module was used in many NPM packages at first, but it was later removed by the author, so it caused a great storm, because many people were using the library was suddenly removed, just imagine, the developers would not cry.

What about the slot points of this event itself? There are three main points:

  • NPMModule size
  • Code style.
  • Code quality and code efficiency

If efficiency is a concern, we can make code improvements. Such as:

function leftpad(str, len, ch = ' ') {
    str = "" + str;
    // Determine the length of code to add
    const padLen = len - str.length;
    
    if(padLen <= 0) {
        return str;
    }else {
        return (""+ ch).repeat(padLen) + str; }}Copy the code

Through such improvements, the code is more concise, but also greatly improve the operation efficiency.

🥳 conclusion

In the article above, we learned about the left-pad incident of that year, and we also learned about the five things you should care about when writing code: style, efficiency, conventions, usage scenarios (algorithms), and design.

This is the end of this article

If you think this article is helpful to you, you might as well like to support yo ~~😛

🧐 previous recommendation

👉 HTML basics worth watching

👉 CSS is still just about writing layouts? Discover the wonders of CSS in 10 minutes!

👉 [youth Training camp] – Is the front end just a cutout? Learn about UI design for developers

👉 [Youth Training camp] – follow the steps of moon Shadow big guys to learn how to write good JS (1)