directory

  • preface
  • concept
  • Js Basics
  • Document Basic knowledge
  • network
  • CSS

preface

I am often asked how to become an intermediate, intermediate or advanced front end player. And I found that most people around me are not very systematic in their knowledge, and there are always various knowledge loopholes. If you’re not sure what a junior engineer is and if there are any holes in your knowledge system, check out this tutorial.

If you have holes in your knowledge, it’s hard to make sense of what you’ve learned. There’s a thread to junior high. Don’t go astray.

Ps: Red to master, green understanding

A concept,

What is javascript: zh.javascript.info/intro

Development tools advanced: plug-ins andEmmet syntax www.jianshu.com/p/182a67c32…

Second, JS basic knowledge

1, the data

String useful. Javascript. The info/string

Variables are useful. Javascript. The info/variables

Data type zh.javascript.info/types

Numeric types useful. Javascript. The info/number

Type conversion zh.javascript.info/type-conver…

Type test useful. Javascript. The info/instanceof

2, operation

The value of the more useful. Javascript. The info/comparison

Operator is useful. Javascript. The info/operators

Conditional operator useful. Javascript. The info/ifelse

Logical operators useful. Javascript. The info/logical – ope…

Switch zh.javascript.info/switch

ES5 recycling useful. Javascript. The info/while – for

Code structure useful. Javascript. The info/structure

3, objects,

Objects are useful. Javascript. The info/object

Original value conversion useful object. Javascript. The info/object – topr…

The constructor and operator useful. Javascript. The info/constructor…

The key, value, item of the object zh.javascript.info/keys-values…

Object. The prototype developer.mozilla.org/zh-CN/docs/…

4, arrays,

An array of useful. Javascript. The info/array

Array methods zh.javascript.info/array-metho…

Deconstruction assignment useful. Javascript. The info/destructuri…

Array. The prototype developer.mozilla.org/zh-CN/docs/…

5, JSON

JSON zh.javascript.info/json

6, the Date

Time and date zh.javascript.info/date

7, functions provides

Introduction of function useful. Javascript. The info/function – ba…

Function objects useful. Javascript. The info/function – ob…

New Function www.yuque.com/zhangbao/ja…

The recursive and stack useful. Javascript. The info/recursion

This principle of www.ruanyifeng.com/blog/2018/0…

Function binding zh.javascript.info/bind

Statement promotion zh.javascript.info/var

Arrow function www.yuque.com/zhangbao/ja…

Closure useful. Javascript. The info/closure

Scheduling useful. Javascript. The info/settimeout -…

Currie, www.yuque.com/zhangbao/ja…

8, the prototype

Prototype introduction useful. Javascript. The info/prototype – m…

The prototype of the native useful. Javascript. The info/native – prot…

9, inheritance,

Inheritance juejin. Cn/post / 684490…

Inheritance in ES3, 5, 6 juejin.cn/post/684490…

10, Class

Class Basic syntax zh.javascript.info/class

Class useful. Javascript. The info/class – inher…

Static properties and static methods useful. Javascript. The info/static – prop…

11. Error handling

try catch zh.javascript.info/try-catch

Promise, async/await

The callback is useful. Javascript. The info/callbacks

Promise useful. Javascript. The info/Promise – bas…

Promise chain useful. Javascript. The info/Promise – cha…

Promise error handling useful. Javascript. The info/Promise – err…

PromiseAPI zh.javascript.info/promise-api

Async/await juejin. Cn/post / 684490…

11, modules,

Module introduction useful. Javascript. The info/modules – int…

Import and export useful. Javascript. The info/import – expo…

Dynamic import useful. Javascript. The info/modules – dyn…

12, regular

Regular usage useful. Javascript. The info/localstorag…

Three, Document basic knowledge

1, DOM

The browser environment useful. Javascript. The info/browser – env…

The DOM tree useful. Javascript. The info/DOM – nodes

DOM node useful. Javascript. The info/DOM – navigat…

The DOM to get useful. Javascript. The info/searching – e…

DOM properties useful. Javascript. The info/basic – the DOM – n…

DOM methods useful. Javascript. The info/modifying – d…

DOM style useful. Javascript. The info/styles – and -…

Element size with scrolling zh.javascript.info/size-and-sc…

Useful. Javascript. The info/size – and – sc…

2, events,

Browser event useful. Javascript. The info/introductio…

Mobile events juejin.cn/post/684490…

Listening event www.runoob.com/jsref/met-e…

Event bubbling segmentfault.com/a/119000000…

Event commission zh.javascript.info/event-deleg…

The default action useful. Javascript. The info/default – bro…

Mouse events zh.javascript.info/mouse-event…

Mobile event useful. Javascript. The info/mousemove – m…

Drag and drop events zh.javascript.info/mouse-drag-…

Keyboard events useful. Javascript. The info/the rid_device_info_keyboard – ev…

Scroll event useful. Javascript. The info/onscroll

Anti-shake and throttling juejin.cn/post/684490… (No need to read the third episode)

Four, network

1, the HTTP

The Internet model www.ruanyifeng.com/blog/2012/0…

The Internet protocol www.ruanyifeng.com/blog/2016/0…

2, Storing data in the browser

Cookie zh.javascript.info/cookie

LocalStorage and SessionStorage useful. Javascript. The info/localstorag…

3, the request

XMLHttpRequest segmentfault.com/a/119000000…

Axios visitors ykloveyxk. Making. IO / 2017/02/25 /…

Axios official documentation www.axios-js.com/zh-cn/docs/

Five, CSS,

1. Basic CSS

CSS Basics tutorial www.w3cschool.cn/css/css-tut…

CSS rgba www.cnblogs.com/xiao-pang/p…

CSS measure blog.csdn.net/geekmubai/a…

2, layout,

Layout concept www.jianshu.com/p/d9718a5be…

Layout practice segmentfault.com/a/119000001…

Location layout www.cnblogs.com/Ry-yuan/p/6…

Flex layout www.ruanyifeng.com/blog/2015/0…

Media enquiries developer.mozilla.org/zh-CN/docs/…

3. CSS selector

The selector www.w3school.com.cn/cssref/css_…

Pseudo-classes, pseudo elements segmentfault.com/a/119000001…

4, animation,

The Transform www.w3school.com.cn/cssref/pr_t…

The Transition juejin. Cn/post / 684490…

Animation www.php.cn/css-tutoria…

5. CSS variables

CSS variable www.ruanyifeng.com/blog/2017/0…

END

This piece of knowledge is used by me for the eagle training program at Inke. I will not send out the corresponding examination questions. If someone needs you, leave a comment. Of course, you can also use it for your own in-house training program, a follow-up to the INTERMEDIATE and advanced knowledge system, which will be released soon.

The tutorials I’ve summarized are easy to understand and filtered. It’s not an official document that’s hard to understand.

The next one is here

Front-end – Basic Knowledge System (Primary – Lower)