Nowadays, all kinds of frameworks and tools “run”, everywhere in the principle and source code, more cross-end technology needs us to explore, but if the basic skills are not good, learn what is half the result with twice the effort, the effect is very bad, spend time at the same time to blow confidence, so, learning foundation is the premise. This article is the first of a series of “light talk about the front end” planned by me. It aims to systematically and logically share the knowledge of native JavaScript with you, helping you to easily understand and memorize the knowledge system and better understand and memorize it. I will do my best to live up to expectations.

Recently I saw a problem on Zhihu.

Then one weibo user commented: ‘This is tao.’

I didn’t think that much about it when I wrote it, but it’s also true. This post is about the Tao of programming.

When it comes to programming, most people have an image of a black screen full of code.

What are those lines of code? It takes time for a professional to understand it, but for everyone else, it’s a mystery.

In fact, it is not necessary, do not understand the program, nothing more than two points:

One, do not know the reason, have no clue

Two, do not understand the concept, will not use

Many a mickle makes a muckle

The computer professional background, but the front is not curriculum development, the surface is a self-study, just take part in the work, the company computer did not reach the designated position, still can not work, specifically also won’t, just as commanded by the supervisor sat next to tutor for two days, the first question is: “so many code is written by you? How do you know what’s there?”

My mentor said to me, “I wrote these line by line, my own definition and design, of course I know what they are.”

So whether it’s one line of code, a hundred lines of code, or ten thousand lines of code, it’s typed by the developer, and it has a reason and a purpose. You don’t have to be intimidated by the amount of code, for one thing.

Reality, of course, is procedure

Knowing that code adds up, what is the code itself?

Code is written in a language that a computer can understand, just as a human can understand a natural language, and there is a relationship between the two languages that every skilled programmer automatically switches in his mind as he programs.

There are a variety of programming languages, each has its own good at doing things, ordinary development positions do not require a person to understand multiple languages, there will be a division of labor, for example: front-end at least to master HTML, JavaScript, CSS, back-end to master Java, Go, Python and other languages and databases.

But no matter what the language, written programs do three things:

Data storage, data processing, data transmission

This series of articles will share some knowledge about how to write programs in JavaScript.

So the question is, how do you write it? To explore how to write, one thing is to understand what a program is.

Reality is naturally a process. Take a day’s life as an example:

When the alarm goes off, get up — get dressed and washed — go out (take the garbage if you have it) — traffic (drive if you have a car, If you don’t have a car, it depends on the distance and convenience: walk, bike, bus or subway) — breakfast — go to work — have a meeting — move bricks/fix bugs — work overtime — get off work — transportation (work together) — dinner — entertainment/reading/exercise… — Playing on your phone — sleeping.

A programmer’s day goes something like this.

Just like a written computer program, line by line, piece by piece.

So how would this description be expressed in programming language? How do they correspond?

Object: the person

Attributes: gender, age, occupation, company, etc.

Routine: Get up, get dressed and wash…

Some parts of the process have conditional judgments (garbage, which vehicle to choose)

Method: have a meal, move brick.

That’s how programming works.

When it comes to writing code, how do you go about it? Briefly summarized as follows:

Define a variable: You can define a variable when you need to store a piece of data, no matter what it is, a number, a string, an object, etc.

Define a function: Encapsulate a function (or method) when an action needs to be performed repeatedly.

Conditional judgment: Conditional judgment is used when different actions need to be performed according to different conditions.

Bind events: Events are used when clicking, scrolling, touching, and so on are needed to get feedback.

Manipulating the DOM: DOM is used when you need to get/manipulate elements on a web page.

…

Simple? Simple, but not simple. What makes it complicated?

A rich toolbox

Why program? The “human mind” plus the “programming skills” to meet everyday needs.

Demand is a variety of, “can not make bricks without straw”, if the language itself does not have that ability, how can programmers do it?

What ability? Such as:

Drawing (CSS/SVG/Canvas), Audio/Video, Geolocation, Notification…

Setting aside the requirements of specific scenarios, the most common human-computer interaction requires interfaces provided by browsers such as DOM/BOM.

Therefore, language has a variety of types of data, properties and methods of each type, a variety of features, features, apis, are convenient for us to write programs, is a rich toolbox.

With this toolbox, you might be afraid of too many things to remember at the moment, but glad they’re there when you need them.

Elegant code

We do everything from incompetent, to skilled, to powerful (scale), meticulous (detail quality). Knowing how to write programs and what “tools” are available, you are a capable programmer, but still far from being a good one.

If you have little coding experience, it may seem confusing, but it will.

What is elegant code? In my opinion, it should be considered comprehensively, not just “less code”, “clever implementation” and so on.

organizational

To put it bluntly, is the naming and storage of documents, the industry has many practices, accounting for the largest two:

First, according to the file type, HTML, JS, CSS, pictures, each big category can be divided into small classes according to the use

2. By business module, home page, login, personal center, etc

Of course, the two can also be appropriately combined.

Proper code organization can make the code of a large project appear numerous and not chaotic, which is good for maintenance, problem finding, and teamwork.

readability

As the saying goes, “Code is written for people to read, and for machines to run.”

As long as there are no grammatical errors in the code for the machine to run, anything is ok, but not for the human. There is another self-deprecating remark called “What the code I write now is known only to God and me, and in two months only to God.”

This is very bad, no code is to ensure that no longer look back, to adjust, or into other hands one day maintenance and processing, if it is not easy to read, is a dilemma, continue to use, how to write the style unchanged, and is not a problem, need not, code redundancy will increase, and may become more and more disorderly,.

Robustness,

Can also be interpreted as “adaptive”, more robust code, the more can adapt to the situation even more scene, the less the problem, two simple examples, you will be on the iphone 5 and iphone12 can be a good show, or when the page failed to load/file picture can not find, do you have a spare to make up for, to the user experience will not be discounted. Done these, the code is reliable, people are also reliable ~

scalability

It can also be understood as the universality and reuse of code, for example, the skin of web pages, the presentation of different contents according to the different identities of users, the continuous addition of new modules in the existing modules, etc. The more extensible, the lower the cost of the iterative process.

performance

The programming world is full of performance issues, specifically code execution time, smooth experience.

The same thing can be written in many ways with the code, in addition to “write right”, but also consider whether it is fast enough, can provide users with the operation of the expected feedback, most of the details, not to repeat here.

If the above points can not be done, the program can also run normally, but if it can be done, it is very beneficial to their continuous coding, to the user experience, to the team collaboration, and will also give others a good impression.

Tools outside of code

If you only write pages, the troika is enough, but as technology iterations, requirements change, project scale and other changes occur, ambitious programmers use their wisdom and technology to make many more conducive to modern development tools, such as: Package manager (NPM), gulp (task processing tools), webpack packaging tools (module) and so on, of course, there are rich component library and popular framework, at first, this is not a developer, a necessary skill, but they do provide a convenient and widely used, gradually become the standard, you can learn, not all but not all can’t, This becomes something we need to learn beyond programming languages.

These are the main parts of a front-end developer’s skills today.

conclusion

At this point, you should get a general idea of what programming looks like. It’s not hard, but it’s complex enough for beginners that it takes, and only takes, enough time to master.

Behind we conquer ~ together

Link to blog post: Talk about the Front End – What is Programming?