20190727 前端开发周报

一年半前端工作经验试水杭州：我是如何拿下网易、阿里和滴滴 offer 的；最新：Lodash 严重安全漏洞背后你不得不知道的 JavaScript 知识；JavaScript 中的闭包函数；Web技巧（15）；性能测试的绝密武器 Web 压力测试工具 webbench；写给后端同学的vue；JS 中有趣的事实；用 JavaScript 和 C3 实现一个转盘小游戏

1. 一年半前端工作经验试水杭州：我是如何拿下网易、阿里和滴滴 offer 的 由于微信外链限制，推荐阅读等链接无法点击，可点击阅读原文跳转至原文，查看外链。 前言 笔者毕业于东北大学，大学毕业社招进入环球网，前端开发工程师一职。技术栈：React+node，Github 地址 成果 来到杭州的目标非常的明确，大厂。其实就是网易、阿里和滴滴。好在基本三家都拿到了o…
2. 最新：Lodash 严重安全漏洞背后你不得不知道的 JavaScript 知识可能有信息敏感的同学已经了解到：Lodash 库爆出严重安全漏洞，波及 400万+ 项目。这个漏洞使得 lodash “连夜”发版以解决潜在问题，并强烈建议开发者升级版本。
3. JavaScript 中的闭包函数 这周看了 《JavaScript 高级程序设计》 的第七章，讲到了 JavaScript 中的一等公民 – 函数的一些特性，在这里进行一下总结。 在一个函数中返回另外一个函数，当我们调用这个函数，我们称调用的这个函数是 外部函数 ，其返回的函数是 内部函数 ，但是问题来了，正常的情况下，一个函数调用结束时，其内部定义的变量…
4. Web技巧（15） 上一期咱们围绕着Web动画展开，其中有的动画对部分用户群体会造成不良的反应，会引起 癫痫 。为此，为了避免这种现象出现，可以使用条件CSS中 @media 中的 prefers-reduced-motion 条件来做处理。除此之外， prefers-reduced-motion 在 <picture> 元素中还有一些小技巧，可以帮我们做一些其他有意义的事情。这一期…
5. 性能测试的绝密武器 Web 压力测试工具 webbench Web压力测试工具webbench webbench最多可以模拟3万个并发连接去测试网站的负载能力，个人感觉要比Apache自带的ab压力测试工具好，安装使用也特别方便。 1、适用系统：Linux 2、编译安装： wget http://www.ha97.com/code/webbench-1.5.tar.gz tar zxvf webbench-1.5.tar.gz c…
6. 写给后端同学的vue文章内，图片很多，占据了一定的篇幅。有写后台的哥们说，vue怎么写，怎么新建一个vue项目，然后我想了想，觉得写一个面向后台同学的vue教程也是有必要，文章中几乎没讲css和vue细节处理的相关内容，减少接受不必…
7. JS 中有趣的事实使用 JS 有很多有趣的地方。尽管工程师们每天都在与之打交道，但仍有一些语言没有被开发出来。本广将介绍一些你可能想不到的JS特性。
8. 用 JavaScript 和 C3 实现一个转盘小游戏 本文主要介绍如何使用原生javascript和Css3来实现一个在各大移动应用中经常出现的转盘游戏，由于改实现可以有不同方式，如果熟悉canvas的话也可以用canvas实现，本文采用js和css实现主要考虑到复杂度较小性能较好，所以如果有更好的方案，也可以随时和我交流。 前言 本文技术路线采用和上篇文章 教你用200行代码写…
9. 前端每日实战 2018年10月至2019年6月项目汇总（共 20 个项目）过往项目 2018 年 9 月份项目汇总（共 26 个项目） 2018 年 8 月份项目汇总（共 29 个项目） 2018 年 7 月份项目汇总（共 29 个项目） 2018 年 6 月份项目汇总（共 27 个项目） 2018 年 5 月份项目汇总（共 30 个…
10. 文件 package.json 的说明文档 你的 package.json 中最重要的两个字段是 name 和 version ，如果没有它们，您的包将无法安装。 name 和 version 字段一起用于创建唯一ID。 name { "name": "my-awesome-package" } 复制代码 这是您的 包 的名称。 它在URL中使用，作为参数命令行，以及 node_modules 中的目录名…
11. 使用 TypeScript 编写爬虫 用TypeScript开发爬虫程序 全局安装typescript:npm install -g typescript…创建要写的程序项目文件夹:mkdir test-typescript-spider进入该文件夹:…
12. JavaScript继承背后的场景-prototype,__proto__, [[prototype]]prototype是构造函数的一个属性，它决定了在构造出来的对象上__proto__属性将是什么样的。
13. 前端必懂的webpack优化 tree shaking tree shaking是一个术语、通常用于打包时移除js中未引用的代码(dead-code)，它依赖于ES6模块系统中的import 和 export 的***静态结构特性*** 开发时引入一个模块时，如果只引用其中一个功能，上线打包时只会把用到的功能打包进bundle中，其他没有用到的功能都不会打包进来，可以实现最简单的基本…
14. 强烈推荐 GitHub 上值得前端学习的数据结构与算法项目算法为王。想学好前端，先练好内功，内功不行，就算招式练的再花哨，终究成不了高手；只有内功深厚者，前端之路才会走得更远。
15. 技术栈中的爱马仕？Facebook 发布全新 JavaScript 引擎：Hermes 前言 目前，用户的流畅体验是用户能长期使用某个移动客户端应用App的重要指标之一，因此，移动客户端应用App的性能问题备受关注。 最近，一个崭新的JavaScript引擎面世：Hermes，它是Facebook在Chain React 2019 大会上发布 & 用于在React Native应用提高性能的，今天，我…
16. 深入研究js中的位运算及用法位运算是在数字底层（即表示数字的 32 个数位）进行运算的。由于位运算是低级的运算操作，所以速度往往也是最快的（相对其它运算如加减乘除来说），并且借助位运算有时我们还能实现更简单的程序逻辑,缺点是很不直…
17. Vue项目webpack打包优化实践总结 Vue项目的页面是使用的虚拟路由，页面内容是靠vue-router配置的路由链接来访问的，SPA单页面应用开发，适合开发后台系统，但是对搜索引擎不友好，因为最后只生成一个页面。 搜索引擎是靠页面的链接来爬取网页内容，然后搜录进去搜索引擎数据库的，而vue打包以后的项目只有一个页面，所以其中的内容搜索引擎蜘蛛当然无法…
18. 如何优化你的超大型React应用 【原创精读】 React 为了大型应用而生， Electron 和 React-native 赋予了它构建移动端跨平台 App 和桌面应用的能力， Taro 则赋予了它一次编写，生成多种平台小程序和 React-native 应用的能力，这里特意说下 Taro ，它是国产，文档写得比较不错，而且它的升级速度比较快，有 issue 我看也会及时解决，他们的维护人员还是非常敬业的…
19. 前端分级配置 随着前端工程的逐渐庞大和完善， 很多原先后端的功能开始又前端接管，加上spa的流行，前端配置的重要性日益重要 1. 由后端模板渲染的前端项目 流程如下 配置信息可以由后端项目维护， 在渲染前传到前端，完成页面和逻辑。 该方式下配置来源简单，并且可以满足所有的需求 2.前后端分离 分离之后， …
20. 前端与后端开发中技术差异的全面对比如果你是一位有志于全面了解前后端编程语言及框架的开发人员或创业者，那你来对地方了。本文将帮助你了解前端和后端技术之间的基本差异。
21. Vue中对iframe实现keep alive（无刷新） 最近一个需求，需要在 Vue 项目中加入 含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容 不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。 Vue的keep-alive原理 要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-al…
22. 基于Canvas+Vue的弹幕组件 最近由于项目需要定制化一个弹幕功能，所以尝试使用canvas来开发组件。经过测试在一些低端机的效果也没有明显的卡顿，和大家交流一下 弹幕效果 功能介绍 支持循环弹幕 弹幕不重叠 支持选择轨道数 支持弹幕发送 使用 npm i vue-barrage 参数配置 name typ…
23. JavaScript 性能开销之 2019 “2019 年，下载和执行时间是加载脚本节省性能开销的主要瓶颈。”
24. 这是一个很干净的后台 (yii2 + vue的权限管理rabc)在公司做项目的时候，特别是做一个新项目的时候，功能不太多。想要在以前的项目基础上做二发，感觉有太多无用的代码在里面，没卵用。交给别人维护的时候，要和他扯一堆，别人看着也头晕。所以一直在github、码云…
25. 「HTML5」FileAPI 文件操作实战本文整理了兼容性检测、文件选择、属性读取、文件读取、进度监控、大文件分片上传以及拖拽上传等开发中常见的前端文件操作。
26. 再谈JavaScript模块化 模块通常是指编程语言所提供的代码组织机制，利用此机制可将程序拆解为独立且通用的代码单元。 模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面。 javascript应用日益复杂，模块化已经成为一个迫切需求。但是作为一个模块化方案，它至少要解决如下问题…
27. 【ES6】带你学习 ES6 标准 —— Reflect、Promise ES6 中提供的操作对象 API，Reflect 对象的设计目的：   ①. 将 Object 对象的一些明显属于语言内部的方法（如Object.defineProperty），放到 Reflect 对象上。   ②. 修改某些 Object 方法的返回结果。如 Object.defineProperty(obj,name,desc) 在无法定义属性时，会抛出错误，而 Reflect.defineProperty(obj,name,de…
28. 【javascript系列】时间复杂度和空间复杂度时间复杂度和空间复杂度，我们在大学里的算法与数据结构课程中已经学习过，这回根据项目工作中整理一下，这个估计只是一个粗略的估计分析，并不是一个准确的估计分析。
29. 阿里开源框架egg.js入门与实战 一. Eggjs是什么？ Eggjs是一个基于Koajs的框架，所以它应当属于框架之上的框架，它继承了Koajs的高性能优点，同时又加入了一些约束与开发规范，来规避Koajs框架本身的开发自由度太高的问题。 Koajs是一个nodejs中比较基层的框架，它本身没有太多约束与规范，自由度非常高，每一个开发者实现自己的服务的时候…
30. React 组件开发实践基于 React 的组件化开发方式，为富前端 web 应用提供大量技术实践，社区逐渐形成了稳定的组件规范，本文从 API 层面归纳出 6 种组件类型，分析其优缺点和适用场景，为日常组件开发提供一个方法指南。6 种类型分…
31. 最全 HTTP 安全响应头设置指南 销售“安全记分卡”的公司正在崛起，并已开始成为企业销售的一个因素。这些公司组合使用 HTTP 安全报头和 IP 信誉来进行评级。不过，在很大程度上，公司的得分取决于对外开放网站上设置的安全响应报头。本文介绍了常用的安全响应报头及对应的推荐安全值，并给出了示例。 销售“安全记分卡”的公司正在崛起，并已开始成为企…
32. WebSocket其实没那么难webSocket是一项可以让服务器将数据主动推送给客户端的技术。前几天写了一个日志功能，日志数据需要实时更新。正好项目中有封装好的WebSocket组件，且接口支持webSocket，就用它实现了。也是第一次用，简单研究了…
33. webpack入门学习手记（五）前几天朋友聚餐突然想到，再过不到半年时间，第一批20后即将出生。这种感觉就像是，现在的90后看60后~ 一不小心我们这些90后在20后的眼中就变成了上个世纪的人。o(╯□╰)o
34. 我们一起学习 Vue 中的 slot 吧 Vue 2.6 已经发布一段时间了,主要的更新就是 slot (插槽)。可能很多人从始至终都没用过 slot ,那可能是你对它不够了解,当你真正的了解它的时候,你就会知道当你封装一个可复用插件的时候它是多么的 perfect~ 代码已放到Github上 。可以下载跟着练习一下。 我们先看一个简单的例子： <!–子组件–> <tem…
35. 进(线)程,微(宏)任务与http通讯(串联理解)为了学习Promise,困在了浏览器http流程,进程,线程,宏任务,微任务,页面渲染的漩涡当中,不可自拔,所以查询许多资料,并根据理解,梳理了他们的关系,希望帮忙指正
36. Javascript 数组常用方法和算法 把数组中所有元素放入一个字符串中，返回字符串。 // 0.0.2/join.js const arr = ; console.log(arr.join(‘ ‘)); // pr is 18 console.log(‘=>’); console.log(arr); // 复制代码 concat 连接多个（含两个）数组，两边的原始数组都不会变化，返回被连接数组的一个副本，可继…
37. 如何利用 Vuetify 快速构建具有吸引力的交互式前端？ 在本文当中，我们将探讨如何利用 Vuetify 快速构建具有吸引力的交互式前端。构建用户体验优异的友好应用程序界面，是一项需要经过反复实践且对知识有一定要求的技能。虽然 Vuetify 无法让你一夜之间积累丰富的用户体验设计经验，但足以帮助这一领域的新手带来坚实的探索开端。 作为一名 Vue.js 开发人员，目前市面上存…
38. 通过代数，数字，欧几里得平面和分形讨论JavaScript中的函数式编程
39. JavaScript剩余操作符Rest Operator之前这篇文章JavaScript展开操作符(Spread operator)介绍讲解过展开操作符。剩余操作符和展开操作符的表示方式一样，都是三个点 ‘…’,但是他们的使用场景会不同。
40. WebSocket技术分享 在正式介绍WebSocket之前先跟大家科普一下以及讨论一下过去是如何实现Web双向通信的 科普一下通讯传输模式 单工：只支持数据在一个方向上传输；例如：BP机 半双工：允许数据在两个方向上传输，但是某一时刻只允许数据在一个方向上传输；例如：对讲机, 电报机 全双工：同时在两个方向上传输，是两个单工通…
41. Go返回int64类型字段超出javascript Number范围 最近在项目中，一个go服务给前端提供了一个接口，返回json格式数据，其中Int64字段会超出javascript Number可表示的最大的Int值会丢精度，可以通过返回string类型值来屏蔽这个问题。 问题描述 Go服务返回的json格式如下,其中deviceId_O为：144115188584281742 而前端拿到的deviceId_O变成了：144115188584281…
42. PM技术课 | Web知识知多少？ 本文笔者将与大家分享HTML/CSS/JavaScript这三种网页技术，以及HTML5、H5等的相关知识。 无处不在的网页 网页存储在某台计算机（即服务器）上，并通过网络与其他计算机相连。网页通过网址（URL）来识别与访问，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页会被下载到用户的计算机上，用户的浏…
43. 前端离线化探索某天，小明同学突然反馈 ：“昨晚发现根本无法使用你们的应用… ….怎么回事呢”。我和我的小伙伴们立马惊呆了，心想：“老司机多年的经验有一种预感，那就是同学你使用姿势不正确…（此处省略300字）”。 然后默…
44. 使用Node做一个简单的聊天室(附webSocket教程)之前一直在讲理论玩，这次说点干货吧。顺带说一下，那个从零单排vue系列，过些日子再写吧。尤神终究是尤神，一时半会儿也确实难以把vue整个模拟出来。
45. 如何回答关于 JS 的继承 最近从某个大佬的github博客上看到一个关于js继承的博客，先放上来供大家参考： JavaScript深入之继承的多种方式和优缺点 看完之后，总结了几个点： 为什么说寄生组合式继承是最优的？ 作者引用了高程的解释： 引用《JavaScript高级程序设计》中对寄生组合式继承的夸赞就是： 这种方式的高效率体现它只调用了…
46. NodeJs简明教程(4) NodeJs简明教程将从零开始学习NodeJs相关知识，助力JS开发者构建全栈开发技术栈！ 本文是NodeJs简明教程的第四篇，将介绍NodeJs文件系统模块相关的基本操作。 fs 模块提供了一个 API，用于以模仿标准 POSIX 函数的方式与文件系统进行交互。 读取文件 文件系统的大部分函数都存在 异步调用 和 同步调用 两种形式…
47. NodeJs简明教程(5) NodeJs简明教程将从零开始学习NodeJs相关知识，助力JS开发者构建全栈开发技术栈！ 本文是NodeJs简明教程的第五篇，将介绍NodeJs path模块相关的基本操作。 path 模块提供用于处理文件路径和目录路径的实用工具。 注意：path模块只是处理文件路径，说白了就是字符串处理，跟文件系统无关 读取路径的文件名 path…
48. ES6 class characteristicsclass (类)作为对象的模板被引入，可以通过 class 关键字定义类。类简要说明类的本质是function,是基本原型继承的语法糖。所以，JS中继承的模型是不会被改变的。类既然是函数，那与函数有何不同呢？我们为什么要…
49. ​搞不懂JS中赋值·浅拷贝·深拷贝的请看这里为什么写拷贝这篇文章？同事有一天提到了拷贝，他说赋值就是一种浅拷贝方式，另一个同事说赋值和浅拷贝并不相同。我也有些疑惑，于是我去MDN搜一下拷贝相关内容，发现并没有关于拷贝的实质概念，没有办法只能通过…
50. IE11下处理Promise以及复习Vue的单项数据流 最近我开发的公司的竞赛网站被发现在IE11下排行榜无数据，但是在其他浏览器没问题，我然后打开控制台一看，发现了如下错误： 真是醉了，然后发现有三个可行的方案： 直接采用 polyfill 在index.html中 <script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></scrip…
51. 教你 30 秒发布一个 TypeScript 包到 NPM这篇文章要求你有一定的 JS 、TS 和 NPM 的知识，如果你写过普通的 NPM 包就更好啦~如果没有的话网上也很多教程的，都很简单~
52. vuepress使用中遇到的问题 一直想找个可以简单写写文档，知识点内容的静态博客，对比gitbook和vuepressh后，觉得gitbook太偏向文档，vuepress的灵活性更大，所以选择了vuepress(还可以直接使用vue component)。 在使用较为强大的vue组件功能的时候，遇到了一些小坑。 热更新 使用 vuepress dev docs 命令，修改config.js不能热更新，修改其他m…
53. 【数据结构与算法JavaScript实现与应用】查找算法 —— 顺序查找 PK 二分法+排序 在列表中查找数据有两种方式：顺序查找和二分查找。对于一个已排序的列表，二分法无疑效率更高，因为每次可排除一半的元素，但若是对于一个无序的列表，如果先对其排序，再用二分法查找和直接用顺序查找对比哪种效率更高呢？最近在看的《数据结构与算法Javascript描述》一书正好也有这样一个类似习题，不过此书中指定排…
54. 有趣的 JavaScript 格式转换使用 input 获取文件时，你拿到的就是 file 对象，而 file 继承于 blob，所以直接讲比较陌生的 blob 吧。
55. 异步操作（三）promisePromise 的含义基本用法Promise.prototype.then()Promise.prototype.catch()Promise.prototype.finally()Promise.all()Promise.race()Promise.resolve()Promise.reject()应用Promise.try()
56. CodeSandbox 浏览器端的 Webpack 是如何工作的？ 推荐阅读。
57. 手把手让你像使用vuex一样测试vuex vuex 怎么单元测试，我们只能通过检验state的值是否符合预期来测试，所以，正常的套路应该是测试mutation，然后看看对应的state是否发生了符合预期的变化。没错。原文地址 vue单元测试vuex，mutation，尤其是actions、getters怎么测？让你像使用vuex一样测试vuex mutation 怎么测 比如这种 SET_LIST(state, paylo…
58. Re:从零写一个基于JS Proxy的断言库[JavaScript] 什么是断言库，如何使用它们，或是如何写一个自己的断言库。 这篇文章的主要目的是展示构建一个简易JS测试库的过程。该库有着自己的测试函数，也可以传入自定义的测试函数，支持链式调用。我们先来实现库的基本功能，随后会使用js proxy来提高库的性能。 什么是断言库 如果你曾使用过 mocha，chai，assert 或是 je…
59. Vue探究：精读mixin与mergeOptions mixin在vue框架中的定位是实现逻辑复用的功能，可以类比javascript中的混合继承方式。实现逻辑复用的方式有很多种，比如react提倡的高阶组件、 hooks 等等，当然，在Vue中官方推荐的且使用频次最高的还是mixin。 本篇文章将会探讨Vue底层如何实现mixin，且mixin对vue各个配置项是如何处理的，以及混合的顺序如何等等…
60. webpack4自定义项目脚手架 这个脚手架时基于 webpack 4.36.1 ,配置部分可能跟 webpack3 版本有冲突，过程之中会提出。现在主要 webpack 配置主要分打包环境和开发环境，分别对应 webpack.dev.conf.js 和 webpack.prod.conf.js 。后面会利用 webpack-merge 把两部分公用的环境配置抽取到 webpaack.base.conf.js 。其中 dist 目录下是打包环境打包的…

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

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