掘金上的文章集锦

从debugger中理解闭包

参考资料：JavaScript 的静态作用域链与“动态”闭包链 什么是闭包：闭包是在函数创建的时候，让函数打包带走的根据函数内的外部引用来过滤作用域链剩下的链。它是在函数创建的时候生成的作用域链的子集，是打包的外部环境。evel 因为没法分析内容，所以直接调用会把整个作用域打包（所以尽量不要用 eval，容易在闭包保存过多的无用变量），而不直接调用则没有闭包。

（来自评论：v8实现的[[Scopes]]的小bug，函数中的子函数们会共用一个[[Scopes]]）

前端中source map四问

参考：sourcemap四问 Webpack的devtool和source maps webpack配置-source-map（让错误无处可逃）

soucemap什么时候被加载？文件很大，会不会影响性能？
答：浏览网页时不加载，打开devtools（控制台）时开始加载，network栏看不到，但抓包工具可以看到；
浏览器如何知道源文件对应哪个sourcemap的？
答：源文件打包后的bundle.js中存在注释，//# sourceMappingURL=bundle.js.map，该注释标记了该文件的soucemap地址；
众多浏览器和打包器，如何做到通用的？
答：由chrome和Mozilla所制定的sourcemap标准，大家基于该标准生成和使用sourcemap；
sourcemap如何对应到源代码的？
答：

几种不同的选项：

开发环境使用：source-map > cheap-module-source-map > eval-source-map
生产环境使用需隐藏源代码：nosources-source-map、hidden-source-map

如何保障前端项目的代码质量

参考：如何保障前端项目代码质量

个人感想：平时写代码之后，真的需要去审视自己写的代码；
原因：在于开发者个人的基础知识、编码经验、意识不足；
建议：好好温习一下面向对象编程、函数式编程、数据结构、常见设计模式，看一看各种开源的编码规范并尝试去真正的理解它们。

保障前端项目编码质量的方法：

• 指定项目编码规范
• 配置lint检查、要求装插件、统一vscode
• 添加.editorconfig文件
• 配置git hook 强制执行代码风格检测、修正
• 执行code review：github上采用的PR(Pull Request) 工作流
• 编写单元测试：基本的单元测试是可以写的
  • 公共方法、服务类必须写单元测试
  • 公共组件，尽可能覆盖到各种功能点
  • 业务组件可书写简单的测试
  • 注意测试代码质量，应当反复通过测试覆盖率评估和改进测试代码

产品让画条龙

参考：画条龙

龙是不规则的形状，如何将提供的图片转换成页面中的一个个元素呢？
答：使用canvas，可以获得指定区域的像素点阵；