1 introduction

I am not good at learning and have not carried out any systematic learning. I used to think that the front end is nothing more than to achieve the operation of various ends, running in the web page, running in wechat small program, running in app, and will use some of the wheels created by predecessors. If it works, it’s done. It turns out it’s not that simple…

I am not a class (junior college) born, I do not know how many people and I, did not die in the technical interview, but lost in the system of screening. A day to brush 100 companies, more than 80 seconds back inappropriate, the rest did not respond.

2 used to be what I thought of the front end

2.1 Beginner front-end

In my sophomore year, I joined a team created for competitions. For a quick start, learn about

2.1 Beginner page

No one took us at that time, I really knocked on the iQiyi home page for a month, and its boring. The final assessment is three hours to knock out. (There’s no trick, just tap for 12 hours a day and you’ll remember all the classes). I said at the time that if I did it again next month, I would quit. I didn’t expect to knock again next month.

2.2 Selected competition

In the competition, I also need to write a back-end by myself, use a language called PHP, have a little understanding of the MVC design pattern, and recite the statements connecting to the database by memory. There is a clever statement called phpMyAdmin that generates mysql, add, delete, change, check, 4 functions, and think you have taken over the backend world.

Teacher: When it comes to the game, you’re a fool. Well, then why not let the ones with good memories. Because when you’re out there, you can debug errors.

Before the game, I write down how many folders, how many functions, and what functions are performed on each page. Of course, with our experience, we won the prize in the end.

2.3 Start the internship

It was time for our internship. Because of the competition, we entered the school-enterprise cooperation in advance. We wrote simple Ajax, called the method that our predecessors had written, and started a puzzle development. It was so easy, so easy, that we became what we call “full stack engineers” without any pain. We could write front-end, back-end, The best understanding of data is to store data in a data that teaches mysql.

2.4 graduated from

For ES6, I can say let, const, var and arrow function ()=>. Semantization is also poorly understood. The understanding of VUE is limited to bidirectional binding. The use of Webpack is nothing more than a search, you will understand. Of course there will be people like me who are limited to vue-cil scaffolding for Webpack. For front-end optimization, use tools to compress images and change ajax synchronization to asynchronous to prevent page clogging.

3 Endless ceiling at front end

A word of caution for those who are just beginning to feel hopeful about the world of coding – all things quick, none of them good. We always like something that hits enter and immediately works. We’re more interested in the principles, we’re more interested in the money, we’re more interested in the practical things, like how much the industry is worth today.

Thanks to the Nuggets writer program, I was able to express my deep inadequacy in the past two years for the shortcomings of the front end. Use the words of God Winter, learn the front end again. I’m going to share some introductory notes about the front end, so that those of you who know the front end as well as I do, can begin to rediscover the vast world of the front end, and regain a sense of reverence for technology.

if(l want backend){return[Node, Express, koa, egg]}if(l want front end){return[jq, Angular, vue, react]if(l want applet){returnWechat, Alipay, QQ, Baidu, Bytedance]if(l want app){
  return[React -natve, Weex, Flutter, Cordova]}if(L want application){return [Electron]
}

if(L want mobile script){return [Auto]
}
Copy the code

4. Basic skills investigation

4.1 HTML

  1. Understanding of HTML semantic tags;
  2. Structured understanding;
  3. Can write concise HTML structure;
  4. SEO optimization
  5. New attributes in H5; Custom attributes such as data, className, etc., new form elements, Drag Drag
  6. H5 – New API, modified API, deprecated API

4.2 about CSS

  1. CSS selectors (Three major features)
  2. Landing the mechanism
  3. The box model

CSS Introduction Notes (1)

  1. CSS modular development (encapsulation), use of SCSS and LESS

  2. Screen adaptation and page adaptation

  3. New selector in CSS3

  4. CSS3 new properties, transform Trasition animation…

Getting Started with CSS (2)

4.3 About Layout

  1. Standard document flow (padding + margin + negative margin) + float left + right + top + bottom
  2. % layout: the px unit is %num, the percentage of the parent element
  3. Flex flex layout: Several properties of the spindle auxiliary axis
  4. Grid layout: Use class names in the framework instead: essentially a percentage layout

4.4 About JS Basics (Completed)

  1. Variable data types and detection: basic + reference
  2. Operators: arithmetic + condition + logic + bit + short circuit, implicit conversion, etc
  3. If switch(){case XXX :} try catch finally throw
  4. Function definition, call method (apply, call, direct call), parameter passing: arguments assign values to parameters
  5. Common APIS for strings, arrays, objects

Notes on JavaScript basics

4.5 Regular Expressions

4.6 About ADVANCED JS

  1. Scope, scope chain, closure
  2. Prototype, prototype chain, inheritance
  3. Function context, this points to
  4. Js running mechanism, event queue and loop
  5. Synchronous, asynchronous programming

Preinterpret scope this

JavaScript | asynchronous processing

4.7 About Browsers

  1. The structure and operation mechanism of the browser
  2. Browser kernel
  3. Browser interaction: BOM and DOM related webApi, listening for events
  4. Browser caching mechanism
  5. How browsers render
  6. Browser security: Cross domain and attack

4.8 About Network Protocols (Done)

  1. The HTTP protocol
  2. Ajax principle
  3. axios

Notes on getting started with HTTP and Ajax

Instructions for axios

4.9 cookies, session, token

4.10 About ES6 Syntax (Completed)

  1. String, array, object extension API
  2. Variable extension: let const destruct assignment block-level scope
  3. Function extension: Arrow function default argument, rest argument
  4. Expand operator, template string
  5. Set and MAP data structures
  6. An understanding of iterators and generator functions next and yield
  7. Proxy Object property Proxy: Reads (gets) and sets (sets) properties
  8. Promise objects, a solution for asynchronous programming
  9. Async + await: syntactic candy of promise + Generator, the ultimate scheme of asynchronous programming
  10. Syntax sugar for the class syntax constructor
  11. Modular programming export + import export and import

ECMAScript 6 Introductory Notes

4.11 the VUE base

  1. Basic instructions
  2. Instance properties and methods
  3. The life cycle of the instance
  4. Component basics: create, register, add property methods, apply…
  5. Component communication values parent child, brother, cross level
  6. Slots slot…

Vue. Js 2.0 hand – in – hand notes

4.12 the VUE senior

  1. Vue – the router: building SPA
  • Routing, component configuration
  • Value transmission between routes
  • Routing hop
  • Navigation guard for routing
  • Remember how it is used in router.js and component pages
  1. Vuex: State management: data warehouse store
  • Instantiate the use of the five major properties of the repository
  • state, getters, mutations, actions, modules
  • Auxiliary function mapState etc… , calculate the mapping of attributes in the warehouse, convenient operation
  • Remember how to use store.js and components

4.13 VUE in-depth, source code reading

  1. Data responsivity principle
  2. virtual dom
  3. The diff algorithm
  4. NextTick etc…

5. Investigation of engineering capability

5.1 Project Capability

  1. Vue-cli scaffolding and function configuration vue.config.js
  2. Common configurations for WebPack
  3. Project build packaging
  4. Familiar with documentation of various frameworks…
  5. UI frameworks: Bootstrap, MUI, Element-UI, etc
  6. Common plug-in collation, collation of a plug-in library, package their own method library, component library
  7. Common tool proficiency
  8. Considerations for PC and mobile development
  9. Experience summary: quickly determine the technical selection of the project
  10. Summary of potholes: project hit potholes!!
  11. Performance tuning records in the project (all details… Multiple records)
  12. Understanding of requirements documents can be combined with project flow charts, UML diagrams
  13. Problem solving ability: (bug locating and debugging, searching for documents, seeking others…)
  14. Keep a record

5.2 Modular and componentized development ability

  1. Project classification; Sort out and classify all kinds of documents
  2. Various functional packages
  3. Decoupling, decoupling and reuse of components and functional modules

5.3 Front-end Optimization Solution (Learning completed)

  1. Optimizing CSS
  2. To optimize the image
  3. Optimization of js
  4. Optimization of HTML
  5. The mobile terminal
  6. cookie
  7. The server side

Front-end optimization scheme

6 Internal work inspection:

6.1 Object-oriented programming ideas

  1. Class of abstract
  2. Object encapsulation, inheritance
  • In order to better manage data, classified data achieves high cohesion and low coupling

6.2 Design Mode

Design pattern sense is also a reabstraction of object-oriented thinking into some specific pattern data structures and algorithms in reality

Learn common sort search algorithms, order lists, linked lists, stacks, queues, trees, heap structures and more… Test your abstract thinking and math skills by abstracting real needs into computer code

7 Additional Skills:

7.1 Learning ability

  1. An attitude of continuous learning – blogging, note-taking
  2. The technical forum is highly active with many questions and answers
  3. GitHub open source project participation

7.2 Understanding a Back-end Language

  1. Python, Node.js, PHP, etc…
  2. Mysql,redis,mongodb. SQL operation statement,mongo operation statement,redis operation statement
  3. Node + Express builds local services, etc
  4. egg

Egg – From Entry to Entry (1)

Egg – From Entry to Entry (ii)

7.3 System Programming

  1. Linux command line operation, system file management
  2. Understanding of multi-task, multi-thread, multi-process, coroutine, concurrent, parallel, serial, synchronous, asynchronous, etc

Denver annual essay | 2019 technical way with me The campaign is under way…