I’ve been in the front-end industry for almost six years, with a few years in between, and I’ve wasted a lot of time in my comfort zone. After all, it is not a short time, according to personal feelings and experience, here summarizes the front-end programmer for a general learning direction of technology.

Welcome to point out any wrong ideas!

General knowledge series

algorithm

Algorithms are far too unimportant for the Web front end, at least for now, as it is rare to be able to write a complete quicksort by hand.

Because there are so few scenarios where algorithms can be used in front-end projects, except for specific projects, there is a feeling that algorithms are not important. And we do not mean to learn algorithms in the project must be used, but to learn the thinking of algorithms, there are many ways to solve a problem, but how do you judge this code is a good way to achieve, what is a good standard?

Time complexity and space complexity can well quantify the quality of a program, the lower the time and space complexity, the better the performance of the code. If you don’t know the time and space complexity, how can you optimize it?

Learning algorithms is a long-term process, so don’t think about focusing on conquering algorithms in half a month and a month. Different and better algorithms will be invented in the future. However, you can spend half an hour every day to learn the knowledge of algorithms and do algorithm problems. For example, if you brush the problems in Leetcode, you will surpass most of your classmates in the long run. Moreover, algorithm knowledge is also necessary for the interview of big factories.

Regular expression

Regular expressions are fairly common, but few people actually learn the syntax of regular expressions. When a phone number, email address, or password needs to be matched with a regular expression, the regular expression is searched on the Internet.

But learning some simple regular expression writing on the front end can be very efficient at times. Strings, for example, have a very powerful method: replace. At ordinary times, most of the replace is directly string matching and replacement, but if the parameters are re and function, it can be more concise and efficient to achieve the function.

// Format the date
dataFormat(date: Date = new Date(), fmt: string = 'YYYY-MM-DD hh:mm:ss') {
  let o: any = {
    "Y+": date.getFullYear(),       / / year
    "M+": date.getMonth() + 1./ / in
    "D+": date.getDate(),           / /,
    "h+": date.getHours(),          / / hour
    "m+": date.getMinutes(),        / / points
    "s+": date.getSeconds(),        / / SEC.
    "q+": ((date.getMonth() + 3) / 3) | 0./ / quarter
    "S": date.getMilliseconds()     / / ms
  }
  for (let k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(RegExp. $1,(a: string, b: number) = > {
      
          if(b ! = =0 && String(o[k]).length < 2 && a.length === 2) return ` 0${o[k]}`

          return o[k]
      })
    }
  }
  return fmt
}
Copy the code
/** * replace a non-normal JSON string with a normal JSON string * eg: STR = '{first: 'first value', 'second': true, "third": "third value"}` * * result: "{"first": "first value", "second": true, "third": "third value"}" */
str2JsonFormat(str: string) {
  if (typeofstr ! = ='string') return str
  
  str = str.replace(/[\{|,]\s*([a-zA-Z0-9_]+?) \s*:|'/g.(a: string, b: string) = > {
      if (a === "'") return '"'
      return `${a[0]}"${b}": `
  })

  return str
}
Copy the code

An operation

All the numbers in the program are stored in binary form in computer memory. Bitwise operations operate directly on the binary bits of an integer in memory. For example, the and operation is originally a logical operator, but integers can also be used between integers.

The knowledge of bit operation is more easily ignored than the algorithm, and the readability of the program with bit operation is very unfriendly to the students who do not understand bit operation. But as long as you master the simple bit operation rules, usually the project can also go to optimization, write elegant code, and in the front of some framework is also used to use the bit operation to increase performance.

Below is the vue3 framework source code, which is used to determine which node attributes need to be updated

Example:

// No associative bit operation
function test(p1: string | undefined, p2: string | undefined, p3: string | undefined) {
  if (
    p1 && p2 && p3 ||     // All three! p1 && ! p2 && ! p3 ||// None of themp1 && ! p2 && ! p3 ||/ / only p1! p1 && p2 && ! p3 ||/ / only p2! p1 && ! p2 && p3 ||/ / only p3! p1 && p2 && p3 ||// There is no p1p1 && ! p2 && p3 ||// There is only p2p1 && p2 && ! p3// there is no p3
  ) {
    return null}}// Modify --> combine bit operation code
function test1(p1: string | undefined, p2: string | undefined, p3: string | undefined) {
  let flag = 0
  if (p1) flag |= 1
  if (p2) flag |= 2
  if (p3) flag |= 4

  if (
    flag == 0 ||    // None of them
    flag == 1 ||    / / only p1
    flag == 2 ||    / / only p2
    flag == 3 ||    // there is no p3
    flag == 4 ||    / / only p3
    flag == 5 ||    // There is only p2
    flag == 6 ||    // There is no p1
    flag == 7       // All three
  ) {
    return null}}Copy the code

The above two methods are equivalent, but the above one is obviously messy and the following one is clear. And because bit operations are low-level calculations, performance is good.

Front-end knowledge series

How browsers work

Web front-end write projects are running on the browser, so to master the working principle of the browser for front-end programmers, is a top priority, is the knowledge point can not be bypassed on the way up.

  • Components of a browser
  • Browser engine
  • network
  • The cache
  • Resource to load
  • Reflow and redraw, etc

How browsers work is an important aspect of project optimization.

Js basics

Js basic knowledge should be the foundation of the web front-end programmer to settle down, for the study of basic knowledge, we should not just simple use, but also explore its working principle, this is never outdated knowledge points, the sooner you master the more the better. No matter how the front-end framework is updated iteration, no matter what more popular front-end framework appears, its essence is still a more flexible application of JS basic knowledge. A good grasp of the basics, to ensure that the framework source code to read more effectively.

  • Event loop
  • Prototype chain
  • closure
  • inheritance
  • This keyword
  • Scope and so on

The framework source code

One of the most effective ways to learn is to look at the best programmers and learn how they think, organize, and so on. The popularity of a framework means that its authors are at the top of their game, and reading their work is one of the most direct ways to learn.

Now senior programmers above the interview, the basic will involve the framework source code. This is a direct reflection of a person’s learning attitude, pursuit of technology, and the logical organization of features developed in a development project by developers who have read source code and those who have not. Read the source code or a weapon to solve the bug, because have seen a lot of students, inexplicable to solve the bug, but do not know why to solve.

Back-end basics

For front-end programmers who do not understand the back end, it is important to understand the logic of the back end, understand the role of the back end, the basic operations and functions of the database. In the development time, more handy, with the backend collaboration can carry out more effective communication.

There is also an important point, understand the role of the back end, can not carry unnecessary pot, can not do the function that should be implemented by the back end ^_^!

Learning methods

Finally, there is a common problem with technology learning: after learning it, if you don’t use it for a long time, you will soon forget it.

Heard a big man said: for any thing, you have learned and have not learned, there are two different realms. So we still have to insist on learning, but also to be selective to learn, like basic principles, general algorithms and so on will certainly not lose, but it is not recommended to blindly chase after new technology, because it may be not proportional to the pay and harvest, to choose according to their own conditions.

A good way to test your learning is to tell it to another person after you have learned it. If the other person understands it, it means you have really mastered it.

Taking notes

When learning something new, be sure to take notes.

For example, learn the source code: from initialization time, we can use the processOn tool, use flowcharts and so on to record each step change, each step function, note notes, etc. Here’s an example:

This is very fast according to the previous notes when reviewing later.

Writing a blog

Also learn to try to write blog, now there are many blog platforms: nuggets, Zhihu, Jane, blog park, etc. Don’t be afraid to write badly, because no one can write very well at first, it takes a long time to practice. The benefits of blogging are very much, will learn to write their own blog articles, in the process of writing, will think more in-depth, more detailed, how to make people easier to understand; It also deepens memories, promotes communication, and creates a habit of sharing.

Participate in open source projects

Participating in open source projects is also an effective way to improve yourself. If it is a well-known open source project in the industry, it is a very positive point on the resume. The benefits brought by simply say several:

  • Continue to learn and practice, work with other excellent developers to improve the technology
  • It’s easier to get advice from the big boys
  • Show your competence and increase your influence in the industry
  • Add highlights to your resume
  • Opportunities for more income
  • Build more contacts in your network

Group learning

Learning alone is very easy to give up, the fundamental reason is the low cost of self-learning, no one to urge and so on, find classmates to study together, urge each other, communicate with each other, it is easier to stick to it.