Nearly 20 people have suffered liver damage for several weeks, written to the advanced 4D advanced guide for the junior and intermediate front-end

头像
y_ck
    阅读 11 分钟
    中文
    57

    🔥 What is this?

    After learning the application of JS and the framework, the author didn't know how to go deep for a while, and was able to do well, but I didn't know what to learn. I believe this problem will be encountered by many readers.

    Of course, the author has now broken through this bottleneck and has also become a member of the infrastructure group of a well-known company. learning routes and information recommendation through my own growth experience and accumulated information to help readers and friends solve this problem.

    The author of the warehouse content was the main contributor. In addition, nearly 20 senior front-end developers were recruited for content co-construction and review. Most of them worked for the first-line manufacturers P6 and P7. The first version took several weeks. Everyone did not stop during the National Day holiday. The content is absolutely satisfactory to all judges.

    This information is suitable for beginners, advanced junior and intermediate levels, and advanced check and fill vacancies.

    content of 16165014b758cc is updated every day, so you can continue to pay attention.

    Here is Github link . The latest content will be updated on Github first. If you think the content is helpful to you, you can click Star.

    💻 How to use

    If you are a junior/intermediate engineer, the author also recommends to learn the "front-end core learning path" first, mainly to consolidate the foundation, and then select the topics of interest.

    If you are advanced engineering, the author recommends skipping the "front-end core learning path" and directly selecting the topics of interest to learn.

    The author of all the following knowledge points will help readers and friends to connect the knowledge, so as to establish their own knowledge system instead of individually memorizing loose knowledge points.

    How to obtain the information in this article

    author has sorted out the important information in the warehouse content, and also included a 100,000-word interview guide at the front end, which has helped thousands of people get offers. You can follow [ public number ] and send "data" to get it.

    📖 Directory

    Readers and friends can go to Github browse the catalog.

    How to learn by yourself efficiently

    Z0qdJz

    Self-study is a skill that every engineer needs to master. The author of this learning method will try every possible way, and I will use this idea to learn any technology. In addition, we can use this idea to broaden our technology stack, link various knowledge to establish our own knowledge system, and the knowledge learned through this learning method is not easy to forget.

    Recommended books

    The following books mainly recommend JS, and other technologies such as frameworks, TS, etc. will be introduced in their respective chapters.

    primary

    Advanced

    advanced

    You can pay attention to the above-mentioned books [ public number ] Send "data" to get it, and also comes with a front-end interview strategy of 100,000 words, which has helped thousands of people get offers.

    Front-end core learning path

    There are a lot of front-end knowledge points. This is a recognized thing, but we really don’t need to learn all the knowledge, it will only be greedy. We can already defeat most front-end engineers if we can learn the core knowledge points, popular technologies, and the knowledge that we need to use in our work. The rest can choose the learning content according to their interests.

    16165014b75ba0 But before learning other content, the author strongly recommends that you must first lay a solid foundation. It is really impossible to

    In order to ensure that the knowledge you have learned is correct, the author of the following documents has used the English version. Because in the process of reviewing the materials, the author found that many Chinese documents were translated incorrectly or out of date.

    If you are still a beginner, it is recommended to read one or two books on your own before following the plan, because the following plan does not cover all the knowledge of JS, but lists all the core knowledge points.

    The author recommends the following two books about books:

    JS core knowledge points

    type of data

    JS data types are divided into two categories and eight data types. bigint not miss the new 06165014b75c70 in ES6.

    Type judgment

    There are several ways to determine the type, namely:

    Type conversion

    Type conversion can be regarded as complicated and error-prone in JS, but it is a knowledge point that is often encountered in development. Forcibly all memory is easy to forget, it is recommended to remember and practice common situations in the development.

    this

    this is a knowledge point that many beginners are easy to confuse, but it is very important and must be mastered.

    Closure

    Closures are particularly commonly used, but in fact, many engineers have a wrong understanding of closures.

    Scope

    The scope refers to the area where the variable is defined in the program. The location determines the life cycle of the variable, that is, the accessible range of the variable and function.

    Variable promotion

    Variable hoisting (Hoisting) can put variables and functions into memory during the compilation phase, so that they can be used before declaration during the execution phase.

    new

    new operator can help us build an instance and bind it to this .

    call、apply、bind

    prototype

    Through the prototype mechanism, objects in JavaScript inherit functional characteristics from other objects.

    Class

    class is just syntactic sugar for the prototype chain, not the same thing as classes in other languages.

    inherit

    Inheritance is one of the three characteristics of Object-Oriented Language, and it also occupies a very important position in JS. There are many ways to implement inheritance, and they all have their own advantages and disadvantages.

    Modular

    This piece of knowledge is bound to be, and it is best to understand the past and present of modularity and have a deep understanding of ES6's native modularity.

    Promise

    Iterators and generators

    async await

    Event loop

    Everyone knows that JS is a single-threaded non-blocking scripting language. This means that the code has only one main thread to handle all tasks at any time. So understanding the event loop mechanism is very important for us to learn JS.

    Throttling and anti-shake

    Throttling refers to the case of continuous trigger events, in a certain period of time, the function will only be executed once.
    Anti-shake refers to executing the callback function after the event is triggered for a certain period of time. If the event is triggered repeatedly within a certain period of time, the timing will be restarted.

    Currying

    Currying is to convert a function that receives multiple parameters into a function that receives one parameter.

    Garbage collection

    JavaScrip allocates memory when the variable is created, and automatically releases the memory when the object is no longer used. This process is called garbage collection. In addition, we mainly learn the garbage collection mechanism under the V8 engine.

    Other scattered but important knowledge points

    If you think the above content is helpful to you, you can go to Github order a Star to support you.

    HTML

    Semantic

    Semantic html is to structure the content of the page to facilitate the analysis of browsers and search engines. When the style CCS style is not introduced, it can be displayed in a document format that can be distinguished and roughly represents the content, and it is easy to read. Search engine crawlers rely on tags to determine the context and the weight of each keyword, which is conducive to SEO. Make it easier for people who read the source code to divide the website into sections, which is convenient for reading, maintaining and understanding.

    CSS

    Box model

    In CSS, all elements are surrounded by “boxes”. We widely use two kinds of “boxes”-block box and inline box. Understand these The basic principle of "box" is the key to our use of CSS to achieve accurate layout and process element arrangement.

    Selector

    In CSS, selectors are used to specify the HTML elements on the web page that we want to style. CSS selectors provide many methods, so when selecting elements to be styled, we can be very precise.

    The CSS selector is the first part of the CSS rules. It is a way of combining elements and other parts to tell the browser which HTML element should be selected as the CSS attribute value in the application rule. The element selected by the selector is called the "selector object".

    • Documentation

      • CSS selector , the official document teaches different ways of using selectors in detail, and understands how they work.

    • recommended article

    Flex

    grid

    other

    frame

    Generally choose one of the frameworks for in-depth study.

    Virtual DOM

    Virtual DOM is also a virtual node. The JS Object object simulates the real node object in the DOM, and then renders it into a real DOM node through a specific render method.

    routing

    Routing is used in the SPA architecture. The actual principle is to use the APIs related to hash and history

    React

    The learning framework must start from the document , at least read it thoroughly and write some preliminary demos before considering learning other materials.

    React recommended learning path

    reactStudy.png

    You can follow the above learning path to learn. In addition to concept-related content that must be learned, you can learn ecology-related content when you use it.

    React recommended learning materials

    How to write a component

    Controlled and uncontrolled components

    High-end components (HOC)

    Higher-order components (HOC) is an advanced technique for reusing component logic in React. HOC itself is not part of React API, it is a design pattern based on React's compositional features.

    Specifically, a higher-order component is a function whose parameter is a component and the return value is a new component.

    Hooks

    Hook is a new feature of React 16.8. It allows you to use React features without writing class components.

    Synthetic event

    Synthetic Event (SyntheticEvent) is an event object that reacts to simulate all the capabilities of native DOM events, that is, a cross-browser wrapper for browser native events. React defines synthetic events according to W3C specification It should be noted that there are differences between the synthesis events in the v16 and 17 versions.

    React routing

    React state management

    React state management can be described as a hundred flowers blooming, far more than the libraries listed by the author. But in fact, many projects do not need to use state management at all, but increase the coding complexity. In fact, using React Context or react-query interface request libraries can well meet the needs.

    • redux , the state container for JS applications, providing predictable state management
    • mobx , a simple and extensible state management library
    • recoil , React state management library
    • xstate , finite state machine
    • zustand , a simple, fast and scalable bone state management solution

    React interface request

    • axios , traditional interface request library
    • react-query , Hooks interface request library for obtaining, caching and updating asynchronous data in React
    • swr , React Hooks library for data request

    React SSR

    • nest.js , a progressive Node.js framework for building efficient, reliable and scalable server-side applications.

    React single test

    • jest , an elegant and concise JavaScript testing framework, a required option for single testing
    • react-testing-library , a simple and complete React DOM testing tool

    React CSS solution

    React principle

    Blog recommendation

    Vue

    The learning framework must start from the document , at least read it thoroughly and write some preliminary demos before considering learning other materials.

    For Vue, the official document content is quite complete, and the family bucket is also officially published, so there is no need to worry about technology stack selection.

    Vue recommended learning path

    At present, the 3.0 ecology is not perfect. It is necessary to be familiar with the writing of 2.0 in the company. Therefore, it is recommended that novices learn the content of 2.0 first.

    Vue recommended learning materials

    Vue principle

    • vue-analysis , produced by Teacher Huang
    • vue-design , produced by the official staff, the domain name has expired, you need to browse the content in the warehouse by yourself. Although it’s a bit troublesome, but the quality is absolutely pass.

    Browser

    When it comes to browsers, Chrome is often referred to. As the browser is an indispensable carrier of the front end, we inevitably need to learn and master its related knowledge.

    In addition, there are many knowledge areas involved in the browser, which are related to the JS execution mechanism, network, performance optimization, security and other fields. Therefore, when you learn this part of the content, you need to connect with the knowledge you learned before.

    Architecture

    Overall process

    Rendering related

    • Browser rendering principle introduction , produced by the left-ear mouse, if the above "The working principle of the browser: behind the scenes of the new web browser" feels too long to read or you don’t understand anything after reading it, then you can read it. This article, at least you can learn something that can be used at work
    • Browser Reflow & Repaint

    JS execution mechanism

    Cache

    Devtools

    • Chrome DevTools , the DevTools manual from Google, has a detailed introduction to the use of each function, it is better to read this article
    • Chrome_Devtools_Tricks , introduces the use skills of Chrome DevTools, from different scenarios to explain how to use the tips in Chrome DevTools, suitable for readers with poor English

    Browser security

    Performance optimization

    Performance optimization is a systematic project, involving many aspects, not just static files and code optimization that everyone often talks about.

    When you learn this part of the content, you can first understand the specific performance optimization methods and specific methods from the recommended articles, and then experiment based on these content.

    Recommended books

    In fact, there are not many books related to performance optimization on the market, and the excellent ones are old books several years ago. It doesn't matter if you don't read them.

    Recommended website

    • web.dev , Google’s own blog, you can learn a lot of knowledge about performance optimization and how to do a good user experience, in fact, many articles on the market have the shadow of this website

    Overall optimization suggestions

    Performance

    Performance monitoring

    TypeScript

    TypeScript is designed for the development of large-scale applications, and TypeScript can be translated into JavaScript. Since TypeScript is a strict superset of JavaScript, any existing JavaScript program is a valid TypeScript program.

    Documentation

    recommended article

    Recommend open source projects

    Electron

    Electron is a framework that can use web technologies such as JavaScript, HTML, and CSS to create cross-platform native desktop applications. With Electron, we can use pure JavaScript to call rich native APIs.

    Documentation

    recommended article

    Recommend open source projects

    Component library

    The component library, as the name implies, refers to a warehouse generated by extracting and integrating multiple common modules or reusable components

    Well-known component libraries:

    Related documents:

    recommended article:

    Micro front end

    It is an architecture similar to microservices, which applies the concept of microservices to the browser side, that is, a single-page front-end application is transformed from a single monolithic application to an application in which multiple small front-end applications are aggregated into one.

    Advantage:

    • The code base is smaller, more cohesive, and more maintainable
    • Loosely coupled and autonomous teams are more scalable
    • It is possible to gradually upgrade, update and even rewrite some front-end functions
    • Independent development and deployment to reduce the scope of changes, thereby reducing related risks

    frame:

    recommended article:

    Recommended learning materials

    Cross-end framework

    The main meaning of cross-terminal is that a set of code runs on multiple terminals, reducing duplication of labor

    At present, it seems that the most popular in China is the small program, H5, App three-end cross-frame, uniapp and taro are two of the more outstanding frameworks. Of course, before taro3.0 (the following mainly refers to small programs), taro and uniapp both use compile time to do more things, and compile into code that can be run by small programs.

    After taro3.0, it became the remax , doing more things at runtime to ensure that the original framework code can be fully used, without the need for compatibility when converting to other small programs.

    monitor

    When the business is stable, the most important thing to do is to monitor various performance, abnormal and regular business on the business line to avoid becoming blind after going online.

    The most well-known monitoring systems in the market at present:

    Recommended open source libraries:

    • rrweb , provides pixel-level recording and playback to help locate the problem correctly
    • monitor , 👀 A lightweight collection page user click behavior, route jump, interface error, code error, and report to the server SDK
    • mitojs The new library maintained by the author above monitor The new pluggable monitoring SDK, the code structure is clearer, the configuration items are more abundant, and it is highly customizable

    recommended article:

    Daily charging

    CSS daily charging

    Github excellent learning materials

    JS excellent learning materials

    React excellent learning materials

    • react-philosophies , React philosophy, the content is the things you think about when writing React code

    Code style and security

    • secguide , a code security guide for developers to sort out

    Productivity tools

    flow chart

    finally

    In fact, the content can only be regarded as the first edition at present, and it is not perfect. Everyone is welcome to contribute to the content. here is the warehouse link

    javascript前端vue.jsreact
    y_ck
    845 声望2.7k 粉丝

    Hi there，I'm yck 👋

    « 上一篇
    从零到一实现企业级微前端框架，保姆级教学

    引用和评论

    推荐阅读
    头像
    vue实现一个6个输入框的验证码输入组件

    jsoncode赞 58阅读 13.9k评论 38

    头像
    如何实现一个楼中楼的评论系统

    小蚊酱赞 24阅读 10.6k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.6k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 5k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 4.8k

    头像
    前端如何入门 Go 语言

    robin赞 27阅读 7.9k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 19阅读 3.6k评论 4

    0 条评论
    得票最新