笔记前端零碎知识点摘要

Posted 2022-04-07 黑子Kuroko

1. 什么是原型链？

由于__proto__是任何对象都有的属性，而js里万物皆对象，所以会形成一条__proto__连起来的链条，递归访问__proto__必须最终到头，并且值是null。

当js引擎查找对象的属性时，先查找对象本身是否存在该属性，如果不存在，会在原型链上查找，但不会查找自身的prototype

2. 什么是前端工程化？

这是个很大的概念，但是在我们的日常开发中又很常见。当我们对一个工程进行设计并把它拆分成各个组件和模块时，我们是在做工程化；当我们用 Webpack 构建项目，配置好各个环境的打包配置时，我们是在做工程化；当我们为项目添加了 ESLint，并在每次提交之前自动检查代码质量时，我们是在做工程化。

如果要用一句话来概括，在我的理解中前端工程化是把前端开发工作带入到更加系统和规范体系的一系列过程。这个过程会包括源代码的预编译、模块处理、代码压缩等构建方面的工作。工程化会尽可能保证开发者的开发体验更加友好，保证源代码的质量以及依赖的完整性。工程化也会尽可能高效地将构建完成后的代码送达给客户端，来追求更加良好的用户体验。所有这些都属于工程化。

在 Web 技术刚开始的时候，还没有前端工程化这样一个东西。人们只是简单地把 html、CSS 和 javascript 直接混在一起丢到用户。而就如人类对于食物的追求在不断进步一样，虽然在最初级的阶段需求只是能填饱肚子，但慢慢地人们开始追求食物的质量。对于前端来说也是一样，用户的需求从最开始简单的页面在向复杂的应用发展。前端需要做的事情更多，同时也要追求更友好的用户体验。

另外，工程化也是为开发者服务的。通过预编译语言、模块热加载等技术可以提升开发效率，而利用自动化测试、lint 工具等可以保证代码的功能和质量。工程化可以有效降低开发成本，谁不想省下埋头 debug 的时间去做更有趣的事呢。

3. 什么是webpack?

webpack is a build tool and a manage tool but not limited to that.

webpack 用于 build code 构建代码，包括编译与压缩，将es6语法转换成es5，从而支持所有浏览器端运行你的项目，并且提升资源请求的速度。

还有，可以用于 manage code 包括js css等，管理一个大型项目的代码，进行模块化开发，方便后期的代码维护与管理。

当然，它的作用远不止于此。

All in all，webpack作用主要有：编译(decode)代码、压缩(minify)代码、方便项目代码的维护(maintain)与管理(manage)等。

参考：WHAT IS WEBPACK, HOW DOES IT WORK? | Webpack 2 Basics Tutorial

（该链接为YouTube视频教程，记得翻墙哦~）