20200229 前端开发周报

从源码看Babel是如何编译Async函数的；理解Javascript的正则表达式；使用 JS 建立一个 Mixin 机器人；从源码分析Vue的响应式原理；前端面试必备 ES6 全方位总结；VUE源码系列五：组件是怎样生成的？(附详细源码解析)；2020年你不能不知道的webpack基本配置；不用 TypeScript 的7 个理由

1. 从源码看Babel是如何编译Async函数的 某次面试场景： 面试官：你知道 async/await 吗？ 我：有所了解（心中窃喜，看来下面要问我事件循环方面的东西了，马上给你倒着背出来，稳得很） 面试官：那请你说下 Bable 是如何处理 async/await 的？ 或者直接描述一下相关 polyfill 的原理 我：。。。（怎么不按套路出牌？） 我确实不知道这个东西，但…
2. 理解Javascript的正则表达式前言 本文4089字，阅读大约需要12分钟。 总括: 本文基于Javascript的正则表达式，结合笔者个人的思考来对正则表达式的特性进行讲解。 参考文章：A Practical Guide to Regular Expressions (RegEx) In JavaScript…
3. 使用 JS 建立一个 Mixin 机器人 官方推荐使用 golang ，对于前端人员的学习门槛还是有一些。所以在这里发布一个 js 写的教程。 读完此篇文章您将获得： 一个收到消息会自动回复 hello mixin 的机器人。 1. 开发基础 node 环境，笔者目前使用 v10.15.1 ，更高亦可。 JavaScript 语法基础 Mixin 机器人 session 及 secret 2. …
4. 从源码分析Vue的响应式原理 据Vue的官方介绍，Vue的响应式系统是非侵入性的，那Vue是如何做到将不同类型的数据（基本类型、普通对象、数组等）转换为可检测的呢？在了解Vue的具体实现之前，我们先了解一下为什么要将数据变为可检测的。 因为Vue是MVVM框架，即数据可以驱动视图的，在传统的开发中（非数据驱动视图），我们需要去操作DOM来实现视图…
5. 前端面试必备 ES6 全方位总结 掘金/魔王哪吒大家好，我是魔王哪吒，话不多说，今天带来的是一篇《前端面试必备ES6全方位总结》文章，欢迎大家喜欢。 前言 学习ES6需要掌握的路线，了解什么是ECMAScript概述，了解Symbol数据类型，掌握let和const，以及变量的解构赋值，Set和Map的原理。 什么叫做箭头函数，ES6对于ES5都有…
6. VUE源码系列五：组件是怎样生成的？(附详细源码解析) Vue的核心思想就是组件化，我们去开发一个页面，就是拿一堆组件去搭建，像堆积木一样，因此，今天我们来分析一下Vue组件是如何创建的，以及它的内部工作原理。 案例 import Vue from ‘vue’ import App from ‘./App.vue’ var app = new Vue({ el: ‘#app’, // 这里的 h 是 createElement 方法 render: h => h(…
7. 2020年你不能不知道的webpack基本配置传统的html+css+js开发方式不能不能很好地运用less/scss等css预处理器以及ES6+的高级语法。
8. 不用 TypeScript 的7 个理由很多人人都喜欢 TypeScript。它“解决”了 JS 的许多问题，它是 JS 的“超集”，它能够使你的代码易于查错且易于阅读。有很多使用 TypeScript 的充分理由，但是我将给你 7 个不去用它的“非常好的”理由。
9. 从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（四） 导航： （一）Electron跑起来 （二）从零搭建Vue全家桶+webpack项目框架 （三）Electron+Vue+Webpack，联合调试整个项目 （四）Electron配置润色 （五）预加载及自动更新（未完待续） （六）构建、发布整个项目（包括client和web）（未完待续） 摘要：前面几篇介绍了如何启…
10. 前端网络监控与断网重链最近在做大屏数据可视化项目得时候，在思考项目交付和运行情况得时候，考虑到了需要在公司大屏显示器上面展示，突然想到了项目可能面临断网及其网速慢得情况下得一下展示问题，因此作为专栏进行这两个问题得讲解
11. 你可能不知道的JS开发技巧目录 既然写文章有这么多的写作技巧，那么我也需要对「JS开发技巧」整理一下，起个易记的名字。 「String Skill」：字符串技巧 「Number Skill」：数值技巧 「Boolean Skill」：布尔技巧 「Array Skill」：数组技…
12. HTTP协议的深度了解HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT
13. 何时使用 Map 来代替普通的 JS 对象点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
14. Node.js 开发者调研 该研究的主要目的是概要分析国内 Node.js 用户，了解他们如何使用 Node.js 并评估对 Node.js 和其他相关技术的满意度以及对将来的预期。 希望您能抽出几分钟时间，将您的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！现在我们就马上开始?
15. 究竟啥是javascript中的装箱操作与拆箱操作 复习知识点时又一次的一脸懵逼 最近在复习javascript知识点时，又又又忘记了遗忘了一个知识点，还是留下文章来做纪念的好。 当我们转换数据类型时，他们的执行过程因为不同的数据类型，而拥有不同的执行过程，也就是所谓的装箱操作和拆箱操作。一般的解释为，把基本数据类型转换为引用数据类型时，会触发装箱操作。把…
16. 使用 GitHub Actions 自动部署博客教程假设你的文章和静态文件在同一个仓库，使用 master 分支管理文章和代码，使用 gh-pages 分支存放生成的静态文件
17. NodeJS、Npm和 npm 命令介绍 一、NodeJS Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。 Node 是一个让 JavaScript 运行在服务端的开发平台的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。 Node对一些特殊用例进行优化，提供替代的API，…
18. GitHub：除非真正需要，否则我们不会删除您的任何内容《GitHub: We won’t take down any of your content unless we really have to》 原文作者：Daphne Leprince – Ringuet 原文链接：[链接]编译：思否@徐九
19. 聊一聊看似简单的Promise.prototype.then()方法 Proise实例的then方法是定义在原型对象Promise.prototype上的，它的作用是为Promise实例添加状态改变时的回调函数。 该方法可以接收两个回调函数作为参数，其中第二个回调函数是可选的。第一个回调函数是 Promise 对象的状态变为 Resolved 时调用，第二个回调函数是 Promise 对象的状态变为 Rejected 时调用。 下…
20. [推荐] 2020 前端开源领域技术展望 作者|展炎、御术、偏右 导读：可以说开源前端领域正如偏右所说的渡过了波澜不惊的2019年，2020年开启了下一个10年，站在这个起点展望前端的未来，必会面临巨大的变化和挑战。说实话，展望接下来的十年会发生什么？十年对于互联网，对于前端来说太长了，很难想象十年后会是什么一个场景，但这路上有些事情在我们…
21. 图片input框自定义样式及前端回显在实际项目中，经常需要用户选择图片以便后续的上传，这时要用到Html的input,并将其type设置为file。原生的input上传图片按钮通常无法符合设计稿，我的做法是将其透明度设置为0，再把宽度高度设置为100%。
22. 微前端：优势，缺点和痛点 原文连接 Microfrontends: the good, the bad, and the ugly by KBall 上周前端开发在twitter上讨论关于 微前端 的话题，双方进行了热烈的争论和发表了各自的意见。 这次争论让我想到了过去关于“CSS in JS”的争论。由于我对过去 “CSS in JS”的争论 一直心怀歉意，这次我会更加的客观去看待这个问题。…
23. HTTP详解爬虫又称网络爬虫，所以在讲解爬虫之前，我们有必要了解一下什么是网络？网络是由若干节点和连接这些节点的链路构成，然后网络与网络之间所串连成的庞大网络叫做互联网，而我们今天要讲的HTTP（HyperText Transfe…
24. 前端高级进阶N: 在前端中如何更好地优化打包资源这是山月关于高级前端进阶暨前端工程系列文章的第 M 篇文章 (M 随便打的，毕竟也不知道能写多少篇)，关于前 M-1 篇文章，可以从我的 github repo shfshanyue/blog 中找到，如果点进去的话可以捎带~点个赞~，如果…
25. 记一次vue-cli3 webpack简单性能优化 打包不优化，亲人泪两行，附图（未优化前）： 分析打包后各文件的体积 安装 webpack 插件 webpack-bundle-analyzer 执行命令 npm install –save-dev webpack-bundle-analyzer 或 yarn add -D webpack-bundle-analyzer 这是一款可视化分析 webpack 打包后各文件体积的插件 再 vue.config.js 里…
26. javascript 代码是如何被压缩的这是山月关于高级前端进阶暨前端工程系列文章的第 M 篇文章 (M 随便打的，毕竟也不知道能写多少篇)，关于前 M-1 篇文章，可以从我的 github repo shfshanyue/blog 中找到，如果点进去的话可以捎带~点个赞~，如果…
27. 你真的了解 HTTPS 吗？ 复习~
28. vue中实现简易购物车（麻雀小，五脏全）index.vue {代码…} Cart.vue {代码…}
29. hello，Ajax（零基础入门篇） 这是一篇ajax的基础文章，在半年前我第一次听说ajax，于是去网上查阅了一些资料看看究竟是何方圣神，发现根本看不懂。我太弱了。 前几天才对ajax了解了一些皮毛。所以我想写一篇0基础刚开始学技术就能看懂的ajax文章。 希望能够帮助到还没接触到ajax的小可爱。通过这篇文章你将了解： ajax是什么 ajax的作用 …
30. Js中常见this指向问题无论是工作或者面试中，this指向问题是经常遇到的。所以这篇文章把常见的指向问题列出来给大家，避免踩坑。首先我们要知道，在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不…
31. React 生命周期详解Tip:请不要死记生命周期的顺序和作用，要理解 React 将这些生命周期暴露出来给开发者调用是因为开发者有使用这些生命周期的需求，通过这些生命周期，我们可以完成一些事情。
32. 做一个 “Webpack 配置工程师” Webpack 是一个模块打包工具。 简单举个例子:chestnut: 新建三个文件，如下： 上面的例子会报错： 因为浏览器并不支持 JS 的模块化导入。这时候 Webpack 便派上用场了。 事实上，已经有很多浏览器开始支持 JS 的模块化了，你可以在 <script> 标签中加入 type="modu…
33. JavaScript入门笔记[5]:jQuery的山寨源码 jQuery的灵感来源，一定是俄罗斯套娃吧 jQuery是目前最为长寿的JS函数库，还有日本up主小哥专门拍了一个 视频 。虽然从网上看到的，都是唱衰jQuery的声音，但是作为一只菜鸡，我还是从jQuery开始我的框架学习吧。 在我这只菜鸡看来，jQuery令我感到恐惧的地方，是它的链式操作， 不就是套娃么 。 …
34. JavaScript之JSONP跨域原理：事先定义一个用于获取跨域响应数据的回调函数，并通过没有同源策略限制的script标签发起一个请求（将回调函数的名称放到这个请求的query参数里），然后服务端返回这个回调函数的执行，并将需要响应的数据放…
35. 前端缓存技术概述 缓存概述 在计算机领域中，缓存是一项十分重要的技术。 在软件开发，亦或者是在硬件设计开发中，缓存对性能的影响是十分显著的。 学过Java，会知道在Integer的自动装箱中 这个范围中的转换会有些特殊的表现，稍加研究源码，会知道这是因为Integer中的缓存类有关（该缓存类会使用数组…
36. 如何在Git提交大小写敏感的文件下午在搞代码部署的时候， 遇到一个文件大小写的问题， 问题比较简单， 但是也简单整理下， 分享给大家。
37. 微前端在美团外卖的实践微前端是一种利用微件拆分来达到工程拆分治理的方案，可以解决工程膨胀、开发维护困难等问题。随着前端业务场景越来越复杂，微前端这个概念最近被提起得越来越多，业界也有很多团队开始探索实践并在业务中进行了…
38. 搞清Vue生命周期执行顺序 标题党就是我··· 最近在学习一个前端的面试课程，里面讲到Vue相关知识时提到生命周期 这张图大家很熟悉了吧 beforeCreate () { console.log(‘beforeCreate’) }, created () { console.log(‘created’) }, beforeMount () { console.log(‘beforeMount’) }, mo…
39. Vue实例$mount // 在src/core/instance/init.js中 if (vm.$options.el) { vm.$mount(vm.$options.el) } 复制代码 重写原型上的$mount方法 纯前端浏览器环境compiler版本的$mount 如果el指向body或者html根节点则报错 判断当前实例有没有定义render函数,如果没有就去取template,通过compileToFunctions方法转换…
40. 前端在哪里发请求最快？mount周期里获取数据？react,vue网络请求优化 对于一个纯前端页面来说，通过ajax获取页面数据是很常见的操作。对于React来说网上曾有过很多关于在 componentWillMount 和 componentDidMount 哪个里请求好。官方的推荐是后者： componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此…
41. Web 中文字体性能优化实践Web 项目中，使用一个适合的字体能给用户带来良好的体验。但是字体文件这么多，如果设计师或者开发人员想要查询字体，只能一个个打开，非常影响工作效率。因此，夸克平台需要实现一个功能，能够支持根据固定文字…
42. 浅谈JavaScript的防抖与节流在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。这时候就用到防抖与节流。
43. 推荐3个实用的 React 工具包早上看到几个React 工具包， 看完之后觉得很不错，刚好我后面的一些开发任务也需要用到， 推荐给大家看看。
44. JS的防抖、节流函数 防抖、节流函数一般应用在一些高频触发的方法，例如搜索框联想输入的input事件、onmousemove事件、click事件等等；实际上业务不需要多次触发，那么就需要用到防抖或者节流来处理啦。 简单的可以这样理解 防抖函数：疯狂点击按钮，每次点击的时间间隔都小于规定时间，那么相应的方法不会执行 节流函数：疯狂点击按…
45. Vue全家桶之一—–Vue-Router 本Vue-Router是根据jspang.com学习笔记所来 第一节、认识Vue-Router vue-router指的是在vue中的路由管理系统，也就是SPA(单页应用,只有一个index.html页面,所有内容都是index.html里面的组件) 首先需要使用 npm i vue-router -S 安装一下vue-router ,如果使用了vue-cli，在里面安装过了，这里就忽略 使用vue-…
46. TypeScript 安利指南 骚年，你感受过debug一年找不到问题，最后发现是变量名写错时的绝望吗？ 骚年，你感受过生产线上代码出现Uncaught TypeError时的恐惧吗？ 骚年，你感受过写代码找一万个文件还找不到方法定义时的委屈吗？ 拿起键盘，让我们对谋害生命的代码拖进垃圾箱！(划掉) 前言 据了解…
47. 一些 JS 数组精简技巧，要记好笔记了点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
48. 深入浅出js单例模式该方法的缺点是，instance属性暴露外面，改变一个实例的属性，另一个也会跟着改变！ 实例sigle1.instance的改变的同时sigle2.instance也跟着同时也变化了，这不是我们希望要的结果！
49. Angular 从入坑到挖坑 – 组件食用指南
50. JavaScript 中 Iterable，Iterator，Generator 三者的区别与联系 在 JavaScript 中，我们经常会看到可迭代对象，迭代器和生成器的概念，它们之间有什么区别和联系呢，我就是想通过这篇文章总结一下，把这个问题搞明白。 Interable（可迭代对象） Iterable 是指有 属性的对象，这个属性 obj 就是 Iterator（迭代器）。也可以说可迭代对象是实现…
51. Ant Design Vue Pro 项目实战-项目初始化（一）
52. JS异步处理三强争霸赛 众所周知 Javascript 是单线程模型语言，同时只能执行一个任务，其他任务都必须在后面排队等待。 因此，异步处理就成为 Javascript 处理多任务时提升效率最重要的方式之一，这也是 Javascript 区别于其他语言的重要特征。 本文将通过对比三种目前最流行的异步处理方式，让读者深刻体会不同的异步处理方式的优缺…
53. GitHub 用户专属福利，实际到账 3K+，Namebase Airdrop 我经常提醒自己的防骗第一准则：天上不会掉馅饼。 冒着被人当骗子的风险，写这样一篇文章，是因为这次是真的领到了馅饼。不过这个馅饼不是随机掉落，是限定了条件定向投放的，满足条件的可以一试，不满足的就不用浪费时间了，可以推荐给身边的 GitHub 用户来碰碰运气。 我的馅饼到账图： …
54. 【跪求】阿里钉钉前端实习内推此贴诚意满满，只求前端！此贴诚意满满，只求前端！此贴诚意满满，只求前端！ 目标 面向2021毕业的同学 本科及以上学历，计算机相关专业 熟练掌握HTML5/CSS3/Javascript等web前端技术 熟悉至少一种常用框架，例如…
55. Node 雄文：Gulp 与 Grunt 已死，npm scripts 才是未来（上） Cory House是“Building Applications with React and Flux”与“Clean Code: Writing Code for Humans”的作者，同时也是Pluralsight上众多课程的讲师。他是VinSolutions的软件架构师，在全球培训了为数众多的软件开发者，主要领域是前端开发与整洁代码等软件开发实践。Cory是微软MVP、Telerik开发者专家，同时也是outlierd…
56. 前端高级进阶：网站的缓存控制策略最佳实践及注意事项这是山月关于高级前端进阶暨前端工程系列文章的第 M 篇文章 (M 随便打的，毕竟也不知道能写多少篇)，关于前 M-1 篇文章，可以从我的 github repo shfshanyue/blog 中找到，如果点进去的话可以捎带~点个赞~，如果…
57. Angular框架的基本原理 编辑推荐: 本文主要介绍Angular框架的基本原理，并使用Primeng组件库来实现简单的应用开发，希望对您能有所帮助。 本文来自于CSDN,由火龙果软件Alice编辑推荐。 最近公司在研发新的web平台，对于前端的开发最终选定使用Angular框架进行开发，而经过这一段时间的学习与研究，基本可以使…
58. 彻底搞定vue2.0生命周期钩子函数问题 先给一张vue官网介绍生命周期的流程图 官方给的东西肯定很官方啦，不过单看一张图对理解vue生命周期钩子函数来说肯定还是有些难度的。不过各位小伙伴不要着急，本文 以简单直接的实例 来对此图进行理解。 花10分钟读下去，相信我你一定会有一些收获（仅仅指刚入门的小伙伴，作者也是一名刚入门的…
59. Vue的完整版和非完整版的差异 Vue是一个前端框架，作者尤雨溪。常用两个版本，俗称完成版和非完整版。在BootCDN（ www.bootcdn.cn/ ） 查询"vue"，会得到多个版本,挑选如下4个进行说明。 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcss.com/vue/2…
60. js控制最大并发请求实现，promise以下函数已 10 个并发请求为标准，超过 10 个的部分按调用顺序进行排队，当前一个请求完成时，再发送队列中的下一个请求。
61. Webpack 插件开发如此简单 【Webpack】:fire:Webpack 插件开发如此简单！ 本文使用的 Webpack-Quickly-Starter 快速搭建 Webpack4 本地学习环境。 建议多阅读 Webpack 文档《 Writing a Plugin 》章节，学习开发简单插件。 本文将带你一起开发你的第一个 Webpack 插件，从 Webpack 配置工程师，迈向 Webpack 开发工程师！ 做…
62. 从事前端半年，我是这样看待三大框架的 前端在复杂性日增的今天，三个框架被我们熟知，Vue、React、Angular，三个经常经常被我们拿来讨论，对比，比如学习哪个？ 前端框架解决的核心问题 在我入门的时候，第一个学习的就是Vue，基本跳过了后台php、jsp结合JQuery,三个框架成为了开发三选一的问题，在后面的工作和学习中，我逐渐意识到 前框框架解决的核心…
63. vue必须掌握之组件通信（7种方法） 方法一：$emit / props 父组件通过props的方式向子组件传递,子组件通过$emit触发父组件中v-on绑定的自定义事件 <!–父组件–> <template> <div> <Child :message="message" @customEvent="customEvent"/> </div> </template> <script&gt…
64. 笔记：关于 Vue-SSR 的实践性测试Express SSR {代码…} 在根目录新建一个 index.js 文件， 内容如下： index.js {代码…} 这时候执行 node .index.js 是可以访问到你好世界的， 这其实就是 SSR。 Vue-SSR 意思可以解读为将 Vue 对象放在服务端…
65. 深入理解 Node.js 中的 Worker 线程 原文：https://blog.insiderattack.net/deep-dive-into-worker-threads-in-node-js-e75e10546b11 多年以来，Node.js 都不是实现高 CPU 密集型应用的最佳选择，这主要就是因为 JavaScript 的单线程。作为对此问题的解决方案，Node.js v10.5.0 通过 worker_threads 模块引入了实验性的 “worker 线程” 概念，并从 Node.j…
66. 前端常见面试-css篇随着疫情的不断好转，各地都开始逐步的复工，当然对我们来说，也马上迎来所谓的金三银四跳槽季。在此，分享自己在前端领域中积累的一些经验，供自己温故知新。 对于前端来说，涉及的知识面广，内容繁多，但是万变…
67. 在React 中缩放、裁剪和缩放图像在本文中，我们将了解如何使用 Cropper.js 在 React Web 应用中裁剪图像。尽管我们不会将这些图像上传到远程服务器进行存储，但是很容易就能完成这个任务。

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

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