mirror of
https://github.com/KieSun/all-of-frontend.git
synced 2024-11-21 22:38:13 +08:00
docs: 排版
This commit is contained in:
xuwu
parent
7c04104e8f
commit
dcc8add29f
88
README.md
88
README.md
@ -75,16 +75,16 @@
|
||||
- [JavaScript 高级程序设计（第 4 版）](https://book.douban.com/subject/35175321/)
|
||||
- [JavaScript 忍者秘籍（第 2 版）](https://book.douban.com/subject/30143702/)
|
||||
|
||||
## JS
|
||||
### JS
|
||||
|
||||
### 数据类型
|
||||
#### 数据类型
|
||||
|
||||
JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增的 `bigint`。
|
||||
|
||||
- [ ] 文档：
|
||||
- [ ] [JavaScript 数据类型和数据结构](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)
|
||||
|
||||
### 类型判断
|
||||
#### 类型判断
|
||||
|
||||
类型判断有好几种方式，分别为：
|
||||
|
||||
@ -101,7 +101,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
- [ ] [JavaScript 专题之类型判断(上)](https://github.com/mqyqingfeng/Blog/issues/28)
|
||||
- [ ] [JavaScript 专题之类型判断(下)](https://github.com/mqyqingfeng/Blog/issues/30)
|
||||
|
||||
### 类型转换
|
||||
#### 类型转换
|
||||
|
||||
类型转换算是 JS 中情况繁杂且容易出错，但是开发中还经常会遇到的知识点。强行全部记忆容易遗忘，推荐记忆及练习开发中的常见情况。
|
||||
|
||||
@ -115,7 +115,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
- [ ] [JavaScript 深入之头疼的类型转换(上)](https://github.com/mqyqingfeng/Blog/issues/159)
|
||||
- [ ] [JavaScript 深入之头疼的类型转换(下)](https://github.com/mqyqingfeng/Blog/issues/164)
|
||||
|
||||
### this
|
||||
#### this
|
||||
|
||||
`this` 算是不少初学者容易搞混的一个知识点，但是它很重要，务必掌握。
|
||||
|
||||
@ -128,7 +128,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
|
||||
> 务必自己总结规则！
|
||||
|
||||
### 闭包
|
||||
#### 闭包
|
||||
|
||||
- [ ] 文档
|
||||
- [ ] [闭包](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
|
||||
@ -137,7 +137,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
- [ ] [JavaScript 的静态作用域链与“动态”闭包链](https://juejin.cn/post/6957913856488243237)
|
||||
- [ ] [知乎中关于闭包的讨论](https://www.zhihu.com/question/34210214)
|
||||
|
||||
### 作用域
|
||||
#### 作用域
|
||||
|
||||
作用域是指程序中定义变量的区域，该位置决定了变量的生命周期，也就是变量和函数的可访问范围。
|
||||
|
||||
@ -151,7 +151,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
- [ ] [You Don't Know JS Yet: Scope & Closures](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures)
|
||||
- [ ] [The battle between function scope and block scope](https://www.deadcoderising.com/2017-04-11-es6-var-let-and-const-the-battle-between-function-scope-and-block-scope/)
|
||||
|
||||
### 原型
|
||||
#### 原型
|
||||
|
||||
- [ ] 文档
|
||||
- [ ] [原型](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes)
|
||||
@ -161,7 +161,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
- [ ] [深度解析原型中的各个难点](https://juejin.cn/post/6844903575974313992)
|
||||
- [ ] [Prototypes in JavaScript](https://betterprogramming.pub/prototypes-in-javascript-5bba2990e04b) 需自备梯子
|
||||
|
||||
### new
|
||||
#### new
|
||||
|
||||
`new` 操作符可以帮助我们构建出一个实例，并且绑定上 `this`。
|
||||
|
||||
@ -171,7 +171,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
- [ ] [JS 的 new 到底是干什么的？](https://zhuanlan.zhihu.com/p/23987456)
|
||||
- [ ] [JavaScript 深入之 new 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/13)
|
||||
|
||||
### 变量提升
|
||||
#### 变量提升
|
||||
|
||||
变量提升（Hoisting）可以将变量和函数在编译阶段放入内存，从而在执行阶段时在声明前使用。
|
||||
|
||||
@ -182,7 +182,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
- [ ] [我用了两个月的时间才理解 let](https://fangyinghang.com/let-in-js/)
|
||||
- [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html)
|
||||
|
||||
### Class(类)
|
||||
#### Class(类)
|
||||
|
||||
`class` 只是原型链的语法糖，与其它语言中的类不是同一样东西。
|
||||
|
||||
@ -195,7 +195,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
- [ ] [给 ES6 class 说句公道话](https://juejin.cn/post/6924108426125508616)
|
||||
- [ ] [应该在 JavaScript 中使用 Class 吗？](https://zhuanlan.zhihu.com/p/158956514)
|
||||
|
||||
### 事件循环
|
||||
#### 事件循环
|
||||
|
||||
大家都知道 JS 是一门单线程的非阻塞的脚本语言。这也就意味着，代码在执行的任何时候只有一个主线程来处理所有的任务。所以弄懂事件循环机制对我们学习 JS 至关重要。
|
||||
|
||||
@ -208,7 +208,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
- [ ] 事件循环可视化
|
||||
- [ ] [Loupe](http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)
|
||||
|
||||
### 继承
|
||||
#### 继承
|
||||
|
||||
继承是面向对象语言（Object-Oriented Language）三大特征之一，在 JS 中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。
|
||||
|
||||
@ -219,7 +219,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
- [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)，需自备梯子
|
||||
- [ ] [JS 类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance)
|
||||
|
||||
### 迭代器与生成器
|
||||
#### 迭代器与生成器
|
||||
|
||||
- [ ] 文档
|
||||
- [ ] [迭代器与生成器](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators)
|
||||
@ -228,7 +228,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
- [ ] [Understanding Generators in ES6 JavaScript with Examples](https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5)，需自备梯子
|
||||
- [ ] [A Simple Guide to ES6 Iterators in JavaScript with Examples](https://codeburst.io/a-simple-guide-to-es6-iterators-in-javascript-with-examples-189d052c3d8e)，需自备梯子
|
||||
|
||||
### 节流与防抖
|
||||
#### 节流与防抖
|
||||
|
||||
节流指连续触发事件的情况下，在某个时间段内，函数只会执行一次。
|
||||
防抖指在事件被触发后一定时间后再执行回调函数，如果在一定时间内，该事件又被重复触发，则重启计时。
|
||||
@ -239,7 +239,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增
|
||||
- [ ] [Debounce – How to Delay a Function in JavaScript](https://www.freecodecamp.org/news/javascript-debounce-example)
|
||||
- [ ] [Debouncing and Throttling in JavaScript](https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript)
|
||||
|
||||
### 垃圾回收
|
||||
#### 垃圾回收
|
||||
|
||||
JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动释放内存，这个过程被称为垃圾回收。另外我们主要学习 V8 引擎下的垃圾回收机制。
|
||||
|
||||
@ -250,9 +250,11 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动
|
||||
- [ ] [GC in v8](https://github.com/lrlna/sketchin/blob/master/guides/garbage-collection-in-v8.md)
|
||||
- [ ] [JavaScript 工作原理：内存管理 + 处理常见的 4 种内存泄漏](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)，另有[中文版](https://juejin.cn/post/6844903519078580238)
|
||||
|
||||
## CSS
|
||||
### HTML
|
||||
|
||||
### flex
|
||||
### CSS
|
||||
|
||||
#### Flex
|
||||
|
||||
- [ ] 文档
|
||||
- [ ] [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
|
||||
@ -274,17 +276,7 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动
|
||||
- [ ] [What’s the Difference Between Synthetic React Events and JavaScript Events?](https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294)，需自备梯子
|
||||
- [ ] [React 17 removes event pooling in the modern browsers](https://blog.saeloun.com/2021/04/06/react-17-removes-event-pooling-in-modern-system.html)
|
||||
|
||||
## 跨端框架
|
||||
|
||||
跨端的最主要的含义就是一套代码多端运行，减少重复劳动
|
||||
|
||||
目前看来，国内比较流行的是小程序, H5, App 三端跨的框架， [uniapp](https://github.com/dcloudio/uni-app) 及 [taro](https://github.com/NervJS/taro) 是其中做的比较出彩的两个框架。当然在 taro3.0 之前（以下主要是说小程序），taro 跟 uniapp 都是使用编译时做更多的事情，编译成小程序能够运行的代码。
|
||||
|
||||
而在 taro3.0 之后变成了与 [remax](https://github.com/remaxjs/remax) 相同的思想，在运行时做更多的事情，保证了原框架代码能够完全使用，而不需要为了转换成其他小程序时做兼容。
|
||||
|
||||
- [awesome-remax](https://github.com/remaxjs/awesome-remax)
|
||||
- [美团自研 react 跨端](https://tech.meituan.com/2021/06/10/react-native-hybrid-practice-dsl-in-meituan.html)
|
||||
- [京东 taro](https://juejin.cn/post/6844904036743774216)
|
||||
## Vue
|
||||
|
||||
## 组件库
|
||||
|
||||
@ -339,41 +331,25 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动
|
||||
- [How We Build Micro Frontends](https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc)
|
||||
- [Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit](https://blog.bitsrc.io/revolutionizing-micro-frontends-with-webpack-5-module-federation-and-bit-99ff81ceb0)
|
||||
|
||||
## 十五万字面试资料
|
||||
## 跨端框架
|
||||
|
||||
[在线阅读](https://yuchengkai.cn/home/)
|
||||
跨端的最主要的含义就是一套代码多端运行，减少重复劳动
|
||||
|
||||
- [解决 90% 的大厂基础面试题](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488553&idx=1&sn=62d8a99b5554751221b45b3c411ad325)
|
||||
- [解决 90% 的大厂前端网络面试题](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488796&idx=1&sn=dec4fdb3e596ad87b02419f69c174113)
|
||||
目前看来，国内比较流行的是小程序, H5, App 三端跨的框架， [uniapp](https://github.com/dcloudio/uni-app) 及 [taro](https://github.com/NervJS/taro) 是其中做的比较出彩的两个框架。当然在 taro3.0 之前（以下主要是说小程序），taro 跟 uniapp 都是使用编译时做更多的事情，编译成小程序能够运行的代码。
|
||||
|
||||
## 前端工程化文章
|
||||
而在 taro3.0 之后变成了与 [remax](https://github.com/remaxjs/remax) 相同的思想，在运行时做更多的事情，保证了原框架代码能够完全使用，而不需要为了转换成其他小程序时做兼容。
|
||||
|
||||
- [这才是你需要了解的性能优化呀！](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247489161&idx=1&sn=f029ea01370364f49fe61451b2d247ff)
|
||||
- [绝了，没想到一个 source map 居然涉及到那么多知识盲区](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488867&idx=1&sn=cac0ae95c560cca820658a8c3af3f8e5)
|
||||
- [揭秘自动化部署系统的核心原理](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488166&idx=1&sn=f62669f6c9331c95badbef2815a8d1b5)
|
||||
- [你知道 monorepo 居然有那么多坑么？](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488604&idx=1&sn=6ded0f2ddaedb71bd5d12890cf462726)
|
||||
- [从零打造性能检测库](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247487811&idx=2&sn=40d02e839fb5400c5b82858d422fb738)
|
||||
- [还在看那些老掉牙的性能优化文章么？这些最新性能指标了解下](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247486142&idx=1&sn=b75b87a109c28cc6c32046d0fb234aab)
|
||||
- [awesome-remax](https://github.com/remaxjs/awesome-remax)
|
||||
- [美团自研 react 跨端](https://tech.meituan.com/2021/06/10/react-native-hybrid-practice-dsl-in-meituan.html)
|
||||
- [京东 taro](https://juejin.cn/post/6844904036743774216)
|
||||
|
||||
## React 原理
|
||||
## 面试
|
||||
|
||||
[在线阅读](https://github.com/KieSun/react-interpretation)，另外笔者最近也在准备更新这部分内容，有兴趣的读者可以持续关注。
|
||||
## 日常充电
|
||||
|
||||
## 前端进阶文章
|
||||
## Github 优秀学习资料
|
||||
|
||||
- [这些 JS 新语法有点东西啊！](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247489249&idx=1&sn=9a3cedafd021afe8ed3ef81bcd0583c2)
|
||||
- [这个 React 小细节居然很多人都写错了？](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247489054&idx=1&sn=f025d5dfd81656e5cffd7eb598b0954b)
|
||||
- [反直觉！大部分人并不知道浏览器到底是如何下载资源的](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488074&idx=1&sn=21dc9b18cf52d875dec5dc38b34900fe)
|
||||
- [好家伙，这些写 CSS 的新姿势你还不知道？](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488007&idx=1&sn=8578ba4a4278de3286feeb18535c75a2)
|
||||
- [这个异步问题你肯定遇到过，但是会解决的并不多](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247487988&idx=1&sn=6b56888236e0cc8b59e7bf63ff882a21)
|
||||
- [前端前沿观察，Cookie 居然可以这样整了](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247486890&idx=1&sn=3f92d1290e62549731b9d840aed68cc9)
|
||||
- [Promise 你可能真的还没用明白（续集进阶版）](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247486584&idx=1&sn=26c5d27b34cc98f952715581b8c74027)
|
||||
|
||||
## 更多文章
|
||||
|
||||
因为笔者文章实在太多，足足已经写了 150 篇+ 原创，更多文章欢迎大家到【[公众号](#个人信息)】里阅读。
|
||||
|
||||
## 个人信息
|
||||
## 作者信息
|
||||
|
||||
| 微信扫码关注公众号，订阅更多精彩内容 | 加笔者微信进群与大厂大佬讨论技术 |
|
||||
| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user