feat: 模块化

pull/86/head^2
xuwu 2021-09-24 21:20:35 +08:00
parent 5006346571
commit 097cd34c4d
1 changed files with 41 additions and 31 deletions

View File

@ -181,6 +181,17 @@ JS 数据类型分为两大类及八种数据类型,注意别漏了 ES6 新增
- [ ] [JavaScript 的静态作用域链与“动态”闭包链](https://juejin.cn/post/6957913856488243237)
- [ ] [知乎中关于闭包的讨论](https://www.zhihu.com/question/34210214)
#### 变量提升
变量提升Hoisting可以将变量和函数在编译阶段放入内存从而在执行阶段时在声明前使用。
- [ ] 文档
- [ ] [JS 变量提升](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
- [ ] 推荐文章
- [ ] [JavaScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/)
- [ ] [我用了两个月的时间才理解 let](https://fangyinghang.com/let-in-js/)
- [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html)
#### 作用域
作用域是指程序中定义变量的区域,该位置决定了变量的生命周期,也就是变量和函数的可访问范围。
@ -215,17 +226,6 @@ JS 数据类型分为两大类及八种数据类型,注意别漏了 ES6 新增
- [ ] [JS 的 new 到底是干什么的?](https://zhuanlan.zhihu.com/p/23987456)
- [ ] [JavaScript 深入之 new 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/13)
#### 变量提升
变量提升Hoisting可以将变量和函数在编译阶段放入内存从而在执行阶段时在声明前使用。
- [ ] 文档
- [ ] [JS 变量提升](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
- [ ] 推荐文章
- [ ] [JavsScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/)
- [ ] [我用了两个月的时间才理解 let](https://fangyinghang.com/let-in-js/)
- [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html)
#### Class(类)
`class` 只是原型链的语法糖,与其它语言中的类不是同一样东西。
@ -239,6 +239,26 @@ JS 数据类型分为两大类及八种数据类型,注意别漏了 ES6 新增
- [ ] [给 ES6 class 说句公道话](https://juejin.cn/post/6924108426125508616)
- [ ] [应该在 JavaScript 中使用 Class 吗?](https://zhuanlan.zhihu.com/p/158956514)
#### 继承
继承是面向对象语言Object-Oriented Language三大特征之一在 JS 中也占有非常重要的地位。而想要实现继承有多种方式,它们都有各自的优缺点。
- [ ] 文档
- [ ] [继承](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance)
- [ ] 推荐文章
- [ ] [JavaScript 深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16)
- [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f),需自备梯子
- [ ] [JS 类继承](https://javascript.info/class-inheritance),另有 [中文翻译版](https://zh.javascript.info/class-inheritance)
#### 模块化
- [ ] 文档
- [ ] [Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
- [ ] 推荐文章
- [ ] [【深度全面】前端JavaScript模块化规范进化论](https://segmentfault.com/a/1190000023711059),记录了 JS 模块化的进化之路
- [ ] [JavaScript modules](https://v8.dev/features/modules),由浅入深解释 JS 模块化
- [ ] [ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/),一篇对 JS 模块化深入解释的文章,另有 [中文版](https://juejin.cn/post/6844903591979778061)
#### 事件循环
大家都知道 JS 是一门单线程的非阻塞的脚本语言。这也就意味着,代码在执行的任何时候只有一个主线程来处理所有的任务。所以弄懂事件循环机制对我们学习 JS 至关重要。
@ -252,16 +272,20 @@ JS 数据类型分为两大类及八种数据类型,注意别漏了 ES6 新增
- [ ] 事件循环可视化
- [ ] [Loupe](http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)
#### 继承
继承是面向对象语言Object-Oriented Language三大特征之一在 JS 中也占有非常重要的地位。而想要实现继承有多种方式,它们都有各自的优缺点。
#### Promise
Promise 是由社区最早提出和实现的异步编程的一种解决方案。
- [ ] 文档
- [ ] [继承](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance)
- [ ] [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- [ ] [Promises/A+ 规范](https://promisesaplus.com/)
- [ ] 推荐文章
- [ ] [JavaScript 深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16)
- [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f),需自备梯子
- [ ] [JS 类继承](https://javascript.info/class-inheritance),另有 [中文翻译版](https://zh.javascript.info/class-inheritance)
- [Callbacks Vs Promises and basics of JS](https://theflyingmantis.medium.com/callbacks-vs-promises-and-basics-of-js-80d3d1515e81),需自备梯子
- [ ] [最简实现 Promise支持异步链式调用20 行)](https://juejin.cn/post/6844904094079926286)
- [ ] [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g)
- [ ] Github
- [ ] [promise-fun](https://github.com/sindresorhus/promise-fun)
#### 迭代器与生成器
@ -303,20 +327,6 @@ 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)
### Promise
Promise 是由社区最早提出和实现的异步编程的一种解决方案。
- [ ] 文档
- [ ] [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- [ ] [Promises/A+ 规范](https://promisesaplus.com/)
- [ ] 推荐文章
- [Callbacks Vs Promises and basics of JS](https://theflyingmantis.medium.com/callbacks-vs-promises-and-basics-of-js-80d3d1515e81),需自备梯子
- [ ] [最简实现 Promise支持异步链式调用20 行)](https://juejin.cn/post/6844904094079926286)
- [ ] [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g)
- [ ] Github
- [ ] [promise-fun](https://github.com/sindresorhus/promise-fun)
### HTML
#### HTML 语义化