20190717 前端开发日报

一个前端失业者的面试之旅；2019年6月份Github上热门的JavaScript开源项目；10分钟理解JS异步编程（从概念到原理）；用 Javascript 写排序算法；JavaScript温故而知新——函数的4种调用方式；使用 Eslint + Prettier + husky + lint-staged 提高前端项目质量、统一项目代码风格；使用 vue-router 在 Vue 页面之间传递数据；Webpack 理解Chunk

1. 一个前端失业者的面试之旅 2018年，变动的一年，随着P2P的雷声不断轰鸣，各企业纷纷开始裁员过冬，“开猿节流”一词正式被创造，很不幸，笔者所在的金融公司也不得不进入“冬眠”，而我也在农历新年前变成了求职大军中的一员。 因为不想回家过年时连工作的没有，然后焦虑的心情每日缠绕于身，压力愈来愈大，随之下决心一定要在年前拿到offer，就为回…
2. 2019年6月份Github上热门的JavaScript开源项目
3. 10分钟理解JS异步编程（从概念到原理） 众所周知JavaScript语言执行环境是“单线程”（ 单线程 ，就是指一次只能完成一件任务，如果有多个任务就必须排队等候，前面一个任务完成，再执行后面一个任务）。这种“单线程”模式执行效率较低，任务耗时长。 为了解决这个问题，提出了“异步模式”( 异步模式 ，是指后一个任务不等前一个任务执行完就执行，每个任务有…
4. 用 Javascript 写排序算法 为了方便自己也帮到更多人，所有的排序算法都会简单说一下自己的思路，并附上自己能找到的最容易理解的可视化动画。 至于为什么选择用 Javascript，则是因为我觉得 Javascript 是最方便运行和调试的，只需要复制代码粘贴到浏览器的控制台就可以了，我为所有的算法附上了测试用例，通过引入 Mocha 就可以在浏览器中显…
5. JavaScript温故而知新——函数的4种调用方式 非严格模式下的调用上下文( this 的值)是全局对象，严格模式 this 为 undefined function myFunction() { return this; } myFunction(); // 返回window对象 复制代码 二、作用方法调用 调用上下文为当前对象，即 this 指向当前对象 var calculator = { value1: 1, value2: 1, …
6. 使用 Eslint + Prettier + husky + lint-staged 提高前端项目质量、统一项目代码风格 前端代码风格因人而异，一个项目参与的人多了，不加强控制可能就是一个大杂烩，对开发人员来讲就是一个噩梦。 如何解决这种困境呢？ Eslint 代码检查工具 Prettier 代码格式化工具 husky git hooks，git 钩子 lint-staged 对 git 中变更的文件进行 lint 操作 Eslint 代码检查，编辑器启…
7. 使用 vue-router 在 Vue 页面之间传递数据 几周前，我写了关于 Vue 路由的使用和在 Vue 页面导航的文章。这是在应用程序中探索的一个基本例子。 通常，在将导航构建到应用程序中时，您会发现需要将数据从一个页面传递到另一个页面。（不通顺）例如，您遵循 master-detail 模式，其中您有一个数据列表，通过更深入地挖掘可以获得关于列表中特定项的更多信息。 我…
8. Webpack 理解Chunk Chunk不同于entry、 output、module这样的概念，它们对应着Webpack配置对象中的一个字段，Chunk没有单独的配置字段，但是这个词出现在CommonsChunkPlugin（Webpack3以前）、optimization.splitChunks（Webpack4以后）这样的名称之中。 Chunk是我们理解Webpack，必须理解的一个概念。 Chunk在Webpack里指一个代码块，…
9. Vue.nextTick使用和源码分析Vue 是采用异步的方式执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲同一事件循环中发生的所有数据改变。然后，在下一个的事件循环中，Vue 刷新队列并执行页面渲染工作。所以修改数据后DOM并不…
10. vue 多项目配置 一个项目中配置多个项目 它们的差异性，网站 logo、api地址、title、部分组件页面差异 它们之间的差异性不是很大，用多分支切换项目成本太高，维护起来不方便 场景 启动项目时读取不同的配置 eg： npm run serve –project=projecaName –env=test 通过命令行输入参数，注册到应用的环境变量中，应用读取环…
11. 轻量可嵌入的 QuickJS 引擎重磅开源，它会是下一个 V8 吗？ 上周是这是 JavaScript 引擎的重要一周。在 Facebook 发布 Hermes 引擎之前， Bellard 以及 C 语言专家 Charlie Gordon 公开发布了 QuickJS。它是在 MIT 许可下发布的一个轻量可嵌入的 JavaScript 引擎，支持最新的 ES2019 语言规范。 正如 Twitter 上的一位网友所说“JavaScript 引擎很像公交汽车：你等了好几年都没来…
12. JS面试：JS-Web-API DOM是哪种基本的数据结构？：树 DOM操作常用的API有哪些 DOM节点的attr和property有何区别 property 和attribute property：只是一个js对象的属性的修改 var obj = {x:100, y:200} console.log(obj.x) //100 var p = document.getElementsByTagName(‘p’) console.log(p.nodeName) // P 这是字…
13. JavaScript基础专题之类型转换（十二） 我们都知道 JavaScript 是一种动态类型语言，变量没有类型限制，可以随时赋予任意值。 var x = y ? 1 : ‘a’; 复制代码 上面代码中，变量x到底是数值还是字符串，取决于另一个变量y的值。y 为 true 时，x 是一个数值；y为 false 时，x是一个字符串。这意味着，x 的类型没法在编译阶段就知道，必须等到运行时才能知道。 …
14. Vue CLI and Leaflet （7） 面绘制 面图形绘制流程 面绘制功能用户的操作方式和线绘制功能几乎是一模一样的。不同在于对用户操作的响应的部分。二响应部分只有两处不同。 1）当用户添加的点数为1时，地图上的显示线状橡皮筋效果。 线状橡皮筋效果 2）当用户添加的点数大于2时，地图上的显示线状橡皮筋效果。 二、…
15. 【canvas】js 绘制真实时钟 canvas绘制钟表 一、效果如图所示 二、详细设计过程 1. 分析 这个图形较为简单，使用的canvas api arc() 画圆 fillRect() 画矩形 fillText() 画字 2. 拆分 & 图层 图形虽简单，但由于涉及的图形较多，这里面有一些覆盖关系，所以要分析图层关系，这也是我们后面要依次…
16. JavaScript 进阶问题列表，你掌握了多少？经常写业务就容易忽视对基础知识的补充和加强，但在面试中，基础知识点是非常重要的考核部分。本文要分享的是，一位开发者每天都会发布的 JavaScript 问题。有的容易，有的会有难度，对基础知识的查缺补漏非常有…
17. 如何用钩子解耦 Vue.js 应用 原文： Build Decoupled Vue.js Applications with Hooks 作者：Markus Oberlehner 发表时间：9 June 2019 译者：西楼听雨 发表时间：2019/07/15 (转载请注明出处) Recently, I was wondering how best to decouple the code needed to track certain form submissions (e.g. conversion tra…

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多