20200322 前端开发周报

书到用时方恨少，一大波JS开发工具函数来了；前端答疑-换行如何输出在页面上；无js 一个div实现饼图百分比效果动画；【朝花夕拾】手写 Promise 你也可以；关于Mock.js使用；继 NPM 被收购后，微软宣布推出 Github 口袋版；Vuejs 中的Runtime + Compiler 和 Runtime-only 的区别；终于有人把 HTTPS 原理讲清楚了

1. 书到用时方恨少，一大波JS开发工具函数来了在我们日常开发的时候，可能会遇到各种各样的需求，但是自己一时半会儿可能找不到合适的办法去解决。书到用时方恨少，下面的这些JavaScript的工具函数可能就会派上大用场了，我们可以进行复用，提高我们的工作效率。
2. 前端答疑-换行如何输出在页面上工作中我们有下面几种方式收集用户输入的内容 input 输入框，单行，整体样式，纯文本。 textarea 输入框，多行，整体样式，纯文本。 contentEditable，多行，独立样式，富文本。 其他富文本编辑器，多行，独立样…
3. 无js 一个div实现饼图百分比效果动画 是的没错！没有前言了，我们直接上正文。 首先我们来画一个简单的圆 .pie { width: 100px; height: 100px; margin: 50px auto; border-radius: 50%; background: yellowgreen; } 复制代码 …
4. 【朝花夕拾】手写 Promise 你也可以 最近这段时间由于疫情的原因，在家实在闷得慌，所以看了下 js 的一些基础知识，从前不是很了解的 Promise 突然豁然开朗了不少，于是就赶紧趁热打铁写下来（这就是温故而知新的感觉吗，哈哈哈:grin:）。 确实是待久了，:cherry_blossom:樱花:cherry_blossom:都开了。 为什么要用 Promise 一个很显然的原因就是…
5. 关于Mock.js使用目前在做一个个人网站，写了一半没有数据填充，也不知道写啥了，就顺带学习下mockjs这个东西，官网上主要介绍它是一个可以随机生成各种类型数据，拦截ajax请求等优点。接下来就近距离结束下mockjs吧！
6. 继 NPM 被收购后，微软宣布推出 Github 口袋版昨天除了 NPM 被微软收购的消息外，微软旗下的 Github 也正式发布了 GitHub 移动版 ，它是 iOS 和 Android上对 GitHub 网页桌面版的完全体验版。现在，我们可以随时随地在移动设备上与我们的团队保持联系，分类问…
7. Vuejs 中的Runtime + Compiler 和 Runtime-only 的区别 vue-cli 脚手架构建项目时，选择构建模式： Runtime + Compiler：运行时+编译器，推荐大多数用户。 Runtime-only: 仅限运行时，要求template模板只能在vue文件中使用，其它地方使用需要加render函数。 一、Vuejs 框架组件渲染过程 组件中的页面渲染过程： template -> ast -> render ->Vdom -> r…
8. 终于有人把 HTTPS 原理讲清楚了随着 HTTPS 建站的成本下降，现在大部分的网站都已经开始用上 HTTPS 协议。大家都知道 HTTPS 比 HTTP 安全，也听说过与 HTTPS 协议相关的概念有 SSL 、非对称加密、 CA证书等，但对于以下灵魂三拷问可能就答不上了：
9. 【建议】记录一次BAT一线互联网公司前端JavaScript面试前沿 置身世外只为暗中观察！！！Hello大家好，我是魔王哪吒！ 面试内容 你需要一些HTML和css的基础知识，掌握JavaScript和ES6的基本语法，对事物的好奇心。 初级JS面试题 JS Web API,开发环境，运行环境 原型，…
10. 小姐姐用 HTML + CSS 画油画？谁能想到前端还有这么一手操作如图所示，这位小姐姐的名字叫 Diana Smith ，在她的个人博客上介绍自己是一位 JavaScript 开发人员，技能树包含 React / Vue / Backbone / jQuery ，还是一位 CSS 专家（LESS 和 SASS 双修），同时也是一位响应…
11. 面试高频JS考查点手写实现 Function.prototype._call = function(ctx = window, …args) { const fnKey = ‘tmp_’ + Date.now(); ctx = this; const result = ctx (…args); delete ctx ; return result; }; // 第二个参数是数组 Function.prototype._apply = function(ctx = window, args = []) { const fnKey …
12. Vue脚手架实现试卷页面 将moduleA中的store模块化 在state中放入变量subjectList,通过mutations更新subjectList 在Home.vue中通过mapMutations激活mutations中的getSubjectList，从而更新subjectList import ‘@/mock’ export default { namespaced: true, state: { subjectList: [] }, mutations: { ge…
13. 7个简单但棘手的JavaScript面试问题如果您符合高级开发人员的资格，其工作涉及JavaScript，那么在编码面试中很有可能会被问到棘手的问题。
14. 记录基于promise实现图片懒加载优化性能 一、场景 项目最近要求对视频进行截图保存、查看，由于项目是公安方面的，导致一天一个控制台会生成很多图片，查看肇事图片的时候，页面一次加载过多导致全部渲染速度很慢，体验不好，于是基于网上现有资料和自己的实践，总结了在项目中的应用。 二、实现过程 1、首先先给img标签src 赋值为loading图片地址，然后…
15. 谈谈vue3.0要更新的内容相关笔记 从去年就一直说的沸沸扬扬的vue3.0发布，虽然到现在还没有正式发布的事件，但做为前端开发，我们还是要去了解的，那么vue3.0会更新什么内容呢，早在2018年11月尤大就在远程演讲中说到了，vue3.0会带来 更 快 更 小 更 易于维护 更好的 多端渲染支持 新功能（新的API） 下面就…
16. 一个 .git 目录，领悟 Git 的强大原文：[链接]作者：Pierre de Wulf 译者：明明如月，责编：郭芮来源：CSDN（ID：CSDNnews）
17. 什么是WebSocket，它与HTTP有何不同？HTTP和WebSocket都是客户端-服务器通信中使用的通信协议。文章用几个例子解释了两者的不同以及分别适用在什么应用场景。有些容易混淆的概念（比如说HTTP长连接）和待补充的概念我用斜体字注解到了文章中。
18. 实现一个简单的VUE模板编译机制 vue原生的模板编译功能的作用是将模板生成AST，然后通过AST生成渲染函数，再执行渲染函数生成vnode，最后根据vnode进行渲染 今天来实现一个简单版的模板编译功能，通过节点筛选和指令解析来完成渲染； 在实现模板编译功能之前首先得有一个模板，同时还得要一个Vue类作为基础 <!– html –> <div id=&quot…
19. 从零开始实现一个vuex插件要想自己实现一个vuex插件，就必须先了解一下vuex插件的基本使用，我们在使用vuex的时候，通常会定义一个store.js文件，里面主要就是干了以下几件事:
20. 前端面试-蘑菇街一面（凉经） 经历头一天的紧张打击，难免还是有点畏首畏，面试约的下午2点，等到1点半的时候面试管终于加了我qq准备视频面。因为头一天的面试，感觉自己对源码方面还掌握的不是很好，所以又着重看了源码，把思路理了一下。 开始面试 面试管很亲和，相互做了自我介绍后，就开始问了。（感觉心里平静了很多，逃~ 试题 1.你…
21. webpack原理解析（三）plugin机制 在之前的文章中，我们了解到了webpack的打包机制和loader，loader 用于转换某些类型的模块，而plugin则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。插件目的在于解决 loader 无法实现的其他事。所以我们很有必要探究一下webpack的plugin机制。 plugin是什么 在 Webpack 运行的生命周期中…
22. Vue基础之非父子组件间传值 我们已经知道，从父组件向子组件传值可以通过在子组件中添加props实现，而子组件向父组件传值主要通过向外触发函数。 当我们的页面采用三层嵌套，颜色由浅到深并对应图中1，2，3。 那么如果我们想沿着蓝色的线传递值，是否需要将值从1-> 2-> 3这样;如果我们想沿着紫色的线传递值，是否要将值从3 -&g…
23. Three.js 动效方案Three.js（下面简称 Three） 作为一个 3D 库，不仅减少了我们学习 OpenGL 和 WebGL 的成本，还大大提升了前端在可视化上给用户带来更多的真实、沉浸式的体验。众所周知，Three 更多的是用 3D 模型 + 投影相机 + …
24. 图文并茂捋清JS OOP OOP 相关概念复习 封装：将数据与方法封装在类的内部, 作为一个整体对外 继承：两个类建立父子关系, 子类获取父类部分成员 多态：继承而产生的相关的不同的类，其对象对同一方法可以做出不同响应 重写: 子类重新编写实现继承来的方法 重载: 一个类拥有多个同名方法 JavaScript 没有真正意义上的…
25. 从基础到实战 手把手带你掌握新版Webpack4.0（学习笔记） 以前使用面向对象编程，页面需要引入多个js，造成多个请求，影响加载，需要注意引用的顺序，使用时无法直接从js里看出文件的层级关系，一旦出错调试很麻烦 // /index.html <div id="root"></div> <script src="./header.js"></script> <script src="./index.js&q…
26. ES6中的Promise使用总结 One、什么是Promise? Promise是异步编程的解决方案，而它本身也就是一个构造函数，比传统的异步解决【回调函数】和【事件】更合理，更强大。 Two、Promise有何作用？ 作用：解决回调地狱 当我们在写逻辑函数时，可能函数内部会有另一个函数，而我们在处理一些比较复杂的操作的时候，有可能里面会嵌套十几二十个函数…
27. ECMAScript进化史(1):​话说Web脚本语言王者JavaScript的加冕历史 互联网起火-Web时代的来临 在行文之前，反手就安利一下《 浏览器史话中chrome霸主地位的奠定与国产浏览器的割据混战 》。 浏览器始祖NCSA Mosaic 在1993年1月发布(于1992年末由国家超级计算机应用中心—National Center for Supercomputing Applications开发)。Mosaic可以同时展示文字和图片，从此浏览器变得有趣…
28. 如何修复Vue中的 “this is undefined” 问题点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
29. 关于 JavaScript 中的 reduce() 方法 一、什么是 reduce() ？ reduce()  方法对数组中的每个元素执行一个升序执行的 reducer 函数，并将结果汇总为单个返回值 const array1 = ; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); …
30. Vue脚手架实现试卷页面—更新试题库页面及excel导出 在之前的代码 Vue脚手架实现试卷页面 基础上新增了如下细节 当题目加入试题库的同时，在state的getters中放四个对象，分别代表单选题，多选题，判断题，简答题将购物车数组进行分类，对象的tilte为单选题，多选题，判断题，简答题 在试题库中删除单个题目时，通过filter更新试题库，于此同时分类的题库也会同…
31. Vue源码之双向数据绑定 近一年多都在做小程序开发， Vue 感觉都有写些生疏了，从今天开始阅读一下 Vue 的源码，了解其内部的工作机制，本文涉及的 Vue 版本为 2.6.11 ，我已经提前 fork 了一份到 github 上 双向数据绑定 提到 Vue ，自然会想到双向数据绑定，要说他的原理，你也能脱口而出，使用 Object.defineProperty 的 get 、 set …
32. 一个前端埋点任务引发的思考 最近接到一项任务，需要给组里面所有的前端项目进行前端埋点，上报 PV 数据给别的项目使用。由于以前没有接触过前端埋点，所以中间绕了一些弯路，但最后还是顺利完成了。整个过程下来，对前端埋点也有了一点简单的思考。 什么是前端埋点 前端埋点是实现前端数据监控的一种方式，通过前端埋点，我们可以获取并跟踪用…
33. 我的前端工作经历小结 18年12月份参加实习，公司比较年轻，技术栈基本只有Vue，我主要参与一些管理后台、H5活动页的开发和迭代，刚步入工作，其实大部分时间还是在学习中。 3月份决定换岗位到前端服务组，因为觉得在内拉新组没什么成长，感觉大部分人都处于无脑搬砖中，节奏也很繁忙。来到服务组，跟着一位同事大佬参与了一个全栈应用的开发…
34. CSS变量实现暗黑模式，我的小铺页面已经支持最近微信被苹果逼的开发了暗黑模式，越来越多的网站和应用开始支持了暗黑模式，许多人也喜欢为网站选择暗模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何实现一个自动的 …
35. vue源码分析-14-dom异步更新机制(nextTick) 我们通过响应式原理的分析得知，当数据改变之后，界面会跟着响应发生变化,Vue内部会再次执行_update方法，生成新的Vnode，比较新旧Vnode,然后进行更新dom的操作。 我们这里先定义同步更新 和 异步更新 同步更新：当数据发生变化后，立即执行_update方法，进行 生成新的vnode->dom更新的过程。 异步更新：数据发…
36. 最简实现可以异步链式调用的Promise（20行） 在面试的时候，经常会有面试官让你实现一个Promise，如果参照A+规范来实现的话，可能面到天黑都结束不了。 说到Promise，我们首先想到的最核心的功能就是异步链式调用，本篇文章就带你用20行代码实现一个可以异步链式调用的Promise。 这个Promise的实现不考虑任何异常情况，只考虑代码最简短，从而便于读者理解核心的…
37. 如何取消 JavaScript 中的异步任务 每日前端夜话 第296篇 翻译： 疯狂的技术宅 作者：Tomasz Jakut 来源：ckeditor.com 正文共：2407  字 预计阅读时间：7 分钟 有时候执行异步任务可能是很困难的，尤其是在特定的编程语言不允许取消被错误启动或不再需要的操作时。幸运的是 JavaScript 提供了非常方便的功能来中止异…
38. 深入浅出JS原型链当js在一个对象上查找属性的时候,首先查找对象本身的属性(即声明时候定义的属性),如果在这些属性中没有找到目标属性,那么js会找它的__proto__对象,如果这个对象没有,那么继续找__proto__对象的__proto__对象,直到…
39. 基于 HTML5 WebGL 的发动机 3D 可视化系统工业机械产品大多体积庞大、运输成本高，在参加行业展会或向海外客户销售时，如果没有实物展示，仅凭静态、简单的图片说明书介绍，无法让客户全面了解产品，不仅工作人员制作麻烦，客户看得也费力。如果能在 Web …
40. 如何理解vue中的v-model？说到v-model，就想到了双向数据绑定，而且往往最常见的是在表单元素<input>,<textarea>,<select>中的使用。
41. 基于Koa（Node）搭建websocket链接redis实现即时通信 账户扫码登录，微信扫码授权，消息实时提醒，配置结果响应，客户端同步数据。。。 之前项目里做即时通信都是用的轮循，轮询的效率低，非常浪费资源，后面好几个项目都开始用的websocket配合koa和redis来实现，现在整理整理深入了解下整个即时通信实现的过程。 前提：需要安装的包 koa== 由 Express 幕后的原班…
42. 5 个 实用 JS 解构用法点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
43. 无缝改造vue项目,支持typescript改造 vue_cli3+ 的 js 版本支持 ts 生成vue项目的vue_cli版本为 4.0.5 应用场景: 目前已经在开发的项目, 后续想要默默 ts 刚开始学习 ts, 不敢完全入坑 安装 {代码…} 书写 vue.config.js 修改 webpack 的 loade…
44. [推荐] Web 前端进阶之路：提升代码质量篇 初级前端和高级前端有什么差别？在我看来，初级前端关注点在完成功能，高级前端能在完成功能的基础上，做的又好又快。做的好，就是代码质量高，做的快就是开发效率高。 本文讨论的主要内容是：提升代码质量的方法。 高质量的代码的重要性 高质量的代码体现在两个方面： 易于维护。 …
45. GitHub 宣布正式收购 npm，即将接管 JavaScript 生态系统？北京时间今天凌晨，GitHub 首席执行官 Nat Friedman 宣布 GitHub 已签署收购 npm 的协议，之后将致力于建立可靠的注册表基础架构并改善核心体验、提高代码的安全性。
46. TS + Vue 构建vuex和vue-router模块 首先,我们要在store文件夹内建立几个文件 这几个文件是vuex里的几个模块,每个文件都导出一个对象; 然后在index.ts文件下引入这些对象,如下代码: import Vue from ‘vue’; import Vuex, { Commit, Dispatch } from ‘vuex’; import state from ‘./state’; import mutations from ‘./mutations’; import actio…
47. 【何不三连】比继承家业还要简单的JS继承题-封装篇(牛刀小试) 前言 你盼世界，我盼望你无 bug 。Hello 大家好！我是霖呆呆！ （这个号称全掘金最臭不要脸的男人又成功用标题把你骗了进来，哈哈 :smile:） "先给你个三连" 滴滴滴～ 又是一星期没见了 看着右侧目录这么一大排的 题目一、题目二、题目三… 你是不很开心，终于…又有题做了。 …
48. VUE响应式系统的基本原理 这篇文章主要了解vue是如何实现数据的响应式以及这种方式的优缺点并探索更好的响应式方式 Object.defineProperty 在vue中，实现响应式的主要方式就是 Object.defineProperty ，关于 Object.defineProperty 的更多内容，可以参考 MDN 下面看一下这个方法具体如何使用 /** * obj 需要操作的目标对象 * key 需…
49. 浏览器 & HTTP 缓存策略缓存策略 浏览器的缓存策略是依靠 HTTP Header 来实现的，共分为两种： 强缓存 协商缓存 强缓存 强缓存是指在缓存期间，请求不会发送到服务器，浏览器直接返回缓存结果，需要设置 Header： expires Cache-Control…
50. webpack-dev-middleware 源码解读
51. 总结vue知识体系之高级应用篇vue 作为目前前端三大框架之一，对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢？为此，我做了简单的知识体系体系总结，不足之处请各位大佬多多包涵和指正，如果喜欢的可以点个小赞！本文主要…
52. 怎样取消 JavaScript 中的异步任务有时候执行异步任务可能是很困难的，尤其是在特定的编程语言不允许取消被错误启动或不再需要的操作时。幸运的是 JavaScript 提供了非常方便的功能来中止异步活动。在本文中，你可以学到如何创建可中止的函数。
53. Vue的插槽介绍 Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。 它允许你像这样合成组件： <navigation-link url="/profile"> Your Profile </navigation-link> 复制代码 然后你在 <navigation-link> 的模板中可能会写为： <a v-bind:href="url" …
54. 前端开发：构建Web应用程序的前10个JavaScript框架 多年来，业界已经发布了大量 JavaScript 框架，怎样进行选择可能是一个挑战。如果你感到困惑，不知道应该选哪个或者究竟哪个适合你，那么我已经帮你解决了问题。在本文中，千锋广州前端小编将列出用来构建 Web 应用程序的前10个 JavaScript 框架。 10. Aurelia Aurelia 是一个开源的现代 JavaScript 模块工具箱…
55. 7 个你应该知道的 JavaScript 原生错误类型提示：良好的错误提示会导致快速而无痛的发展经历与缓慢而痛苦的发展经历之间的区别。在编写可重用的代码时，请确保自己在编写清晰易懂的错误处理代码。
56. js精准计算 js精准计算 var numA = 0.1; var numB = 0.2; alert( numA + numB ); 0.1 + 0.2 = 0.30000000000000004。 计算精度误差问题（和二进制相关）。 对于浮点数的四则运算，几乎所有的编程语言都会有类似精度误差的问题，只不过在 C++/C#/Java 这些语言中已经封装好了方法来避免精度的问题，而 JavaScript 是一门…
57. （开源）从0打造H5可视化搭建系统 – 易动（vue+ts+egg）
58. 1W字长文+多图，带你了解vue的双向数据绑定源码实现 作者：小土豆biubiubiu 博客园： www.cnblogs.com/HouJiao/ 掘金： juejin.im/user/58c61b… 简书： www.jianshu.com/u/cb1c3884e… 微信公众号：土豆妈的碎碎念（扫码关注，一起吸猫，一起听故事，一起学习前端技术） 码字不易，点赞鼓励哟~ 前言 一起学习vue源码的第一篇来讲讲vue双向数据绑定的源…
59. GitHub 屏蔽微软工程师的开源项目，因存在伊朗外部贡献者？近日，微软 UX 首席工程师 Rob Eisenberg 在 Twitter 上抱怨，他创建的开源 JS 框架 Aurelia 被 GitHub 禁止访问。
60. 关于webpack中file-laoder的publicPath路径问题 配置webpack的时候，新手难免会遇到路径问题，这里写一个昨天“研究”到凌晨2点，后来看loader源码才发现的路径问题:sob: 二、问题 在配置file-loader的时候，没写option.publicPath，最后发现文件居然也能加载正确的加载路径 三、描述 webpack官方文档 告诉我们，如果publicPath不写的话，默认为_ webpack_public…

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

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