20200314 前端开发周报

js中的bind、apply、call的原生实现及其思考；axios发起http请求的一些细节；手把手画出一份属于自己的JavaScript原型图；精读《结合 React 使用原生 Drag Drop API》；Vue 2020 年路线图，Vue 3.0 计划于 Q2 发布；Vue3.0尝试；使用 D3.js 创建根据值域颜色渐变的地图；[推荐] 前端高级进阶：如何更好地优化打包资源

1. js中的bind、apply、call的原生实现及其思考   说起这三个函数，可能大部分人都觉得，这有啥，我用的贼熟练。对，没错，这是js中十分常见的三个改变this指向的函数，但是里面其实还是有一些细节的地方值得大家注意。下面我们先简要介绍一下这三个函数。 二、函数的用法   其实这三个函数的用法挺简单的，所以我就不过多介绍了，只是简要的介绍一下。 apply函数接…
2. axios发起http请求的一些细节 今天和公司后台对接接口时，发生了一件很有意思的事情，他写了一个登录接口，我使用axios进行post请求，我传了用户名和密码过去，接口没有调用成功，后台看了日志后，说我没传参，然后发了一张他自己测试接口的成功截图。于是我就进入了找bug环节 接下来就跟大家分享下，我踩的这个坑，欢迎各位感兴趣的开发者阅读本…
3. 手把手画出一份属于自己的JavaScript原型图 简单明了 一图流 虽然看起来乱糟糟的，但其实顺着图中的关系一步步梳理起来其实真的是简单明了，实在看着费劲没关系 画图水平有限 ，咱们也一步一步来。 先明确几个概念： 原型 当对构造函数使用new语法实例化一个对象后，该对象下面有一个__proto__属性，该属性指向会指向该构造函数的p…
4. 精读《结合 React 使用原生 Drag Drop API》 作者通过 HTML5 的拖拽 API，结合 React 一些特殊语法，聊了下基于 React 的拖拽方案，短小精悍。
5. Vue 2020 年路线图，Vue 3.0 计划于 Q2 发布昨天 Vue 团队更新了 2020 年的路线图，里面包含了很多 Vue 3.0 的信息。建议大家一定要看原文，地址在：[链接]。下面我结合自己的理解翻译一下：
6. Vue3.0尝试 前言 有关vue2的相关相关语法我相信大家都已经的语法我相信大家都已经会了，现在都已经 2020 年了vue作为前端这么热门的框架, 不去学一波对的自己是做前端的吗？哈哈哈哈 。 一路就开始折腾，那是一路曲折啊，重不会到会也不知道自己经历了什么，到现在 vue3.x 马上又有开始了所以自己也是先试试水，玩了一波相关…
7. 使用 D3.js 创建根据值域颜色渐变的地图 在实际开发中,地图是个比较常见的图,用于展示各个省市之间的数据差异。只要有了所需绘制地图的 geojson 文件我们就能通过此方法绘制我们需要的任何地图。 项目地址: 点击查看 @ 效果预览 先来看一下完成后的效果图: 很清晰的展示了各个省份的数据之间的差异.同时还有 visualMap 来展示数据的范…
8. [推荐] 前端高级进阶：如何更好地优化打包资源 这是山月关于高级前端进阶暨前端工程系列文章的第 M 篇文章 (M 随便打的，毕竟也不知道能写多少篇)，关于前 M-1 篇文章，可以从我的 github repo shfshanyue/blog 中找到，如果点进去的话可以捎带~点个赞~，如果没有点进去的话，那就给这篇文章点个赞。。今天的文章开始了 本篇文章地址在 前端工程化系列 …
9. 妙用CSS变量，让你的CSS变得更心动作者：JowayYoung仓库：Github、CodePen博客：掘金、思否、知乎、简书、头条、CSDN公众号：IQ前端联系我：关注公众号后有我的微信哟特别声明：原创不易，未经授权不得对此文章进行转载或抄袭，否则按侵权处理，如…
10. 排序算法之快速排序（附 Python 与 JS 实现） 文章同步发布于 博客 本文主要介绍了快速排序的基本思路，包括伪代码和 Python 实现。同时，也介绍了快速排序的优化方式，如随机锚点和三路快排。 与归并排序一样，快速排序同样使用了分治的思想。在执行时，选取一个锚点（pivot），比如数组位置 0 的元素，然后遍历剩下的部分，如果元素小于或等于锚点，则将其移…
11. VUE 3.0 学习探索入门系列 – 回顾 vue2 辉煌一生（2） 1 Vue 数据一览 统计截止： 2020-03-10 vuejs/vue 项目 Github Stars： 159k ，排行 JavaScript 语言类 第2名 vuejs/vue 项目 尤大 自 2016年以来 commits 次数： 53w+ ，90% 代码出自他手，简直是劳模 vuejs 仓库总共有 108 个工程，生态完善 vuejs…
12. 一年半经验如何准备阿里巴巴 P6 前端面试首先，可能要让你们失望的是，这篇文章不会有大篇幅的面试题答案。如果想要看这方面的内容，我相信社区里已经有很多优秀的文章了。
13. 从前端现状到数据校验史 真实的前端开发到底是怎样的？是在浩如烟海的 npm 中追寻永远找不到的银弹？还是在日新月异的 ECMAScript 规范下探索梦想中的乌托邦？ 前端发展十余年，沧海桑田，朝代更迭，从 vanilla.js，到 jQuery.js，到 Angular.js，再到如日中天的 React/Vue。中间不乏又有诸如 svelte 之类后起之秀。 隐藏在看似繁荣昌盛的表…
14. node.js BFF开发8个月的心路历程 忙碌的日子总是过得特别快，回头一看，我已经做node.js BFF开发8个月了，基本上没写过web前端的事情，做了大半年，写篇文章来记录一下我这大半年的心路历程。 初步规划 BFF 其实我刚进公司那会是做前端的，做B端前端开发，用react画页面，系统是一个持续做了一年多的，超过上百个模块的系统，画了2个月，项目人员…
15. 记一次vue-element-admin 的动态路由权限管理和菜单渲染的学习 三人行必有我师,今天来记录一次 对 vue-element-admin 中 动态路由和动态菜单渲染的理解,只是学习,不对之处,还请见谅 现实的工作中,尤其是写后台管理系统的时候,经常会涉及到不同的用户角色拥有不同的管理权限,那么久需要对应不同的管理者进行不同的动态路由设置和导航菜单渲染,这在后台管理中,变成了一个迫切需要解决…
16. 从两段代码来理解js运行机制 js是单线程的，但是浏览器和node是多线程的。为了解决js单线程引起的阻塞问题，当js引擎遇到网络请求等宏任务 时，会将异步事件注册到事件表里，当完成指定的任务或满足一定的条件后会将异步事件的回调函数注册到事件队列。主线程内所有任务完成后，主线程会读取事件队列，事件队列中的任务依次进入主线程执行。 setTim…
17. 从零起步，真正理解Javascript回调函数总听到这么一个词语：回调函数。对于它的了解，只知道在微信的网页授权用到了回调，以及在Angular中可以用观察者模式进行.subscribe订阅，但对于它原理的理解，却是一团浆糊。直到昨天开会时，突然被问到回调函数…
18. 学习Javascript之数组去重前言 本文2895字，阅读大约需要12分钟。 总括: 本文总结了10种常见的数组去重方法，并将各种方法进行了对比。 公众号：「前端进阶学习」，回复「666」，获取一揽子前端技术书籍 如烟往事俱忘却，心底无私天地宽。…
19. flutter webView 使用以及与 js 互操作 仓库地址： github.com/lzyprime/fl… git clone -b flutter_webview_demo https://github.com/lzyprime/flutter_demos.git 复制代码 插件： webview_flutter ， 目前版本：^0.3.19+9 由于要兼顾 Android 和 Ios 两个平台的webView, js 调用native时无法直接返回数据，所以通…
20. JS 中原生错误类型总结小猪的从业时间并不长，四舍五入也就刚毕业（哈哈哈，永远 22 岁）。不过坦白说，之前在一些不同的地方，小猪时常见到一些明明可以给出更明确的错误类型，不过都不管三七二十一通通 throw new Error(“xxxx”) 或者…
21. 一招搞定GitHub下载加速众所周知，GitHub是一个巨大的开源宝库，以及程序员和编程爱好者的聚集地，包括我之前推荐的诸多优秀的开源项目全部都是位于GitHub上。
22. JS-Web-API（一）：DOM与BOM const div1 = document.getElementById(‘div1’) // 获取一个元素 const divList = document.getElementsByTagName(‘div’) // 获取一个元素集合 const containerList = document.getElementsByClassName(‘.container’) // 集合 const pList = document.querySelectorAll(‘p’) // 集合 复制代码 DOM节点的property cons…
23. JS reduce方法源码解析 最近在百度上搜索对数组内的对象去重时，突然发现有的大佬使用reduce方法去重，这个时候就觉得很不可思议了，因为以前可能是使用reduce方法比较多，所以就特意研究了一下 文档 我们首先看看MDN上是怎么介绍的reduce方法吧，reduce函数主要是接收两个参数，即 reduce(callback(accumulator, currentValue[, curren…
24. VUE父子组件生命周期执行顺序?{代码…}
25. 前端进阶十日谈 月影大大前端进阶课程中的全部例子代码。已 star~
26. Webpack4不求人(4)——编写自定义Loader 在前面的内容中，我们学习了Webpack的基本知识、常用脚手架和性能优化，虽然说大部分的开发场景社区已经又成熟的模块给我们使用，但是遇到特殊情况还是需要自己有独立开发的能力，因此今天我们一起来学习如何编写自定义Loader。 基本Loader Webpack中loader是一个CommonJs风格的函数，接收输入的源码，通过同步或异步…
27. JavaScript BOM所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。全局变量是 window 对象的属性。document 对象也是 window 对象属性。全局函数是 window 对象的方法。
28. 未来魔法校的微前端实践魔法校是tob起家，众所周知tob业务很容易做成巨石应用，近两年来魔法校飞速发展，我们的某个主要的前端项目遇到了瓶颈，那就是项目太大了。
29. 从0开始实现一个promise   promise是es6中一个比较重要的东西，解决了之前的回调地狱的问题，也是在各种面试中出现比较频繁的问题。之前自己在面京东的时候就被问到了finally是如何实现的。可惜当时自己自认为会用promise了，殊不知对其原理了解过于肤浅，自然这次面试也挂掉了。话不多说，本文将从0开始介绍如何实现一个promise，包括then,reje…
30. 本周总结请查收(内附21道前端面试题)本周发起了一个100天前端进阶计划，每天一个知识点，搞明白背后的原理，这是第一周的总结，请注意查收。
31. 纯css3实现二维码扫描特效在线预览 [链接] 如果本文对你有用，对博主小额打赏，以资鼓励，分享更多有用的技能 先看效果： 第一步，实现网格背景： {代码…} 第二部实现扫码线以及渐变背景特效 {代码…} 四角特效 就是四个宽高相等的正方…
32. 2020年，你必须知道的JS数组技巧 在Javascript中，数组是一个重要且常见的知识点，我们经常将数据存储在数组中。作为一名Javascript工程师，数组必须要运用自如。这篇文章，向大家展示了在日常开发中，数组有哪些奇淫技巧值得关注和学习，让我们开始吧！ 1.去重 这也是一道常见的面试题，怎么对JS的数组去重。在ES6的时代，有个非常快速且简单的方法…
33. JS中时间格式化的三种方法 时间字符串格式化： let time = ‘2020/3/11 14:10:0’; 把上面类型的时间日期字符串转化为我们想要的格式 =>"2020年03月11日 14时10分00秒" 一、正则处理（优） (proto => { function formatTime(template = ‘{0}年{1}月{2}日 {3}时{4}分{5}秒’) { let a…
34. Vue 底层编译实现kvue源码 {代码…} compile源码 {代码…} 测试代码 {代码…}
35. CSS Color、Media Queries、Transforms、Conditional Rules W3C CSS 工作组发布四份规范的首个公开工作草案：CSS Color Module Level 5、Media Queries Level 5、CSS Transforms Module Level 2、CSS Conditional Rules Module Level 4。
36. 深入理解js闭包 在JS高程上，是这样介绍闭包的: 闭包 是指有权访问另一个函数作用域中的变量的函数。比如下面这个最简单的例子： function returnf() { var a = 1; return function f() { console.log(a); } } 复制代码 在f中可以访问returnf函数中的a变量，所以这样就创建了一个闭包。当我们用变量接到f函数的时候，就可以…
37. JS-DOM事件流 其实很久之前就接触过DOM事件流了，但是在很长时间没有用到之后，就把它忘记了，所以今天特意来写一下，顺便回顾一下DOM时间流的一些知识 DOM事件流的分类 DOM事件流是有两种的，一种是捕获型事件流，另外一种是冒泡型事件流，两者其实都很好理解，下面我们就来详细介绍一下，为了大家更好的理解，我们就先介绍下冒…
38. 阿里云服务器部署个人网站(nodejs + mongodb)更多文章 购买阿里云服务器，选择操作系统，我选的 ubuntu 在云服务器管理控制台选择实例->更多->密钥->重置实例密码（一会登陆用） 选择远程连接->VNC，会弹出一个密码，记住它，以后远程连接要用 …
39. 你真的理解Promise吗？ 异步Javascript与回调地狱 由于Javascript起初是在浏览器中运行的编程语言，其执行会阻塞浏览器对dom树的解析和渲染，所以js中充满了大量的异步操作，例如：dom事件绑定，Ajax异步请求。Javascript起初是使用回调函数作为异步操作的解决方案。 dom.addEventListener(event, callback)复制代码 但使用回调函数面临了一…
40. 2020 年，Vue 受欢迎程度是否会超过 React？ 点赞再看，养成习惯 本文 GitHub https://github.com/qq44924588… 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。 前端框架的受欢迎程度每年都在增长， 如今，在较大型或者中型的项目，基本都需要使用框架来进…
41. JS-Web-API（二）：事件 const btn = document.getElementById(‘btn1’) btn.addEventListener(‘click’, event => { console.log(‘clicked’) }) 复制代码 // 通用的绑定函数 function bindEvent(elem, type, fn) { elem.addEventListener(type, fn) } const a = document.getElementById(‘link1’) bindEvent(a, ‘click’, e => { …
42. 一起来看看Babel做了什么在进行Webpack或者Rollup配置的时候，难免会进行Babel的相关配置，因为代码中往往会使用比较新的JS语言的特性，然而可能运行环境并不支持这些特性，这个时候就需要Babel去帮助实现转换。
43. JavaScript工具函数大全如果文章和笔记能带您一丝帮助或者启发，请不要吝啬你的赞和收藏，你的肯定是我前进的最大动力 附笔记链接，阅读往期更多优质文章可移步查看，喜欢的可以给我点赞鼓励哦：[链接] 为元素添加on方法 {代码…} 为…
44. 深入了解JavaScript执行过程（JS系列之一） JavaScript 执行过程分为两个阶段，编译阶段和执行阶段。在编译阶段 JS 引擎主要做了三件事：词法分析、语法分析和代码生成；编译完成后 JS 引擎开始创建执行上下文（ JavaScript 代码运行的环境），并执行 JS 代码。 编译阶段 对于常见编译型语言（例如： Java ）来说，编译步骤分为：词法分析 -> 语法分析 -&…
45. js将数值转为万，亿，万亿并保留一位小数 最近刚好做到项目，有个数字过大直接展现万，亿等单位的缩略展示。上网查看我竟然把我高中数学的log运算都捡起来了 ，好神奇！果然代码的底层是数学，学遍数理化走遍全天下，这句话不是没有道理:grimacing: 实现思路 实现思路我们应该很清晰，无非是两种情况，一种是不过【万】时候的正常展示和另一种过【万】之后的…
46. 2019年度最常见的JavaScript面试题和答案 2019年度已经过去了，2020年面试高峰期又来了。经过2019年的学习和面试经历，统计了下面一些最常见的面试题。 JavaScript 中的强制转型（coercion）是指什么？ 难度：简单 在 JavaScript 中，两种不同的内置类型间的转换被称为强制转型。强制转型在 JavaScript 中有两种形式：显式和隐式。 这是一个显式强制转型的例…
47. 运营平台系统在菜单权限的基础上进一步细致到按钮权限管理（Vue） 原先风控人员与业务人员都是在不同的菜单下操作业务，但最近开发的一些业务有存在风控人员与业务人员会在同一菜单下操作不同的功能。比如业务人员只能查看数据而不能点击页面上操作数据的按钮功能，之前运营平台只是菜单的权限，并没向下细致到按钮的级别。经过三次前后端会议的讨论、设计方案的评审、人员的投入，最终…
48. 怎么通俗的理解Promise promise 的意思是承诺，初学者是不是一脸懵逼，别急，这个还真的是这个意思，请允许我慢慢道来。 举个例子：张三是煎饼果子的一个摊主，他看了看自己的鸡蛋感觉撑不了两天，于是打电话给李四说：两天内给我送100个鸡蛋，到时候根据市场价给你钱，如果到时候没给我鸡蛋，我们就不再合作。这段话中，张三跟李四…
49. 初级前端知识点整合-ES6部分（持续更新中…）1.var let const的区别：·var声明变量可以重复声明，let不可以重复声明；·var是不受限于块级的，let是受限于块级的；·可以在var声明的变量前面访问，不可以在let声明变量之前访问；·var会与window相映射（挂一个…
50. 重新看前端模块化 入门学习的时候，知道了 function 的语法，声明一块代码片段(code snippet)，简单来说就是 代码复用 。 // index.js function a() { // 100 行逻辑 } function b() { // 100 行逻辑 } 复制代码 a、b 可以视为 2 个模块。如果模块越来越多的话，直接约定一些 js 文件即可。目录结构类似这样： |– modu…
51. VS Code提高前端开发效率插件Auto Close Tag 自动添加HTML/XML关闭标记，与Visual Studio IDE或Sublime文本相同 键入开始标签的结束括号后，将自动插入结束标签。 Auto Rename Tag 自动重命名配对的HTML/XML标记 Beautify 为VS代码美化代码 …
52. JS中function的基础知识 思维导图 1、创建函数 -1).语法： function 函数名(形参){ 函数体 } -2).创建过程： 第一步： 创建值： 1、开辟一个堆内存 2、把函数体中的代码当作字符串储存在堆中 3、把堆地址放到栈中 第二步： 创建变量…
53. 聊一聊JavaScript的诞生和发展 JavaScript的诞生相对于HTML（1991年）和CSS（1993年）要晚一点，它是在1995年由一名美国程序员发明出来的，这名程序员叫布兰登·艾克（Brendan Eich），就是下面这位，我们暂且叫他布兰登大叔。 那么，一开始呢，布兰登大叔是研究物理的，后来才转行学习了计算机科学，最终呢在美国伊利诺伊大学香槟…
54. 深入学习和理解 Redux Redux官网上是这样描述Redux，Redux is a predictable state container for JavaScript apps.（Redux是JavaScript状态容器，提供可预测性的状态管理）。 目前Redux GitHub有5w多star，足以说明 Redux 受欢迎的程度。 一、Why Redux 在说为什么用 Redux 之前，让我们先聊聊组…
55. Webpack4不求人系列（4）——自定义Loader在前面的内容中，我们学习了Webpack的基本知识、常用脚手架和性能优化，虽然说大部分的开发场景社区已经又成熟的模块给我们使用，但是遇到特殊情况还是需要自己有独立开发的能力，因此今天我们一起来学习如何编写…
56. JS中URL参数处理的三种方法 queryURLParams：获取地址栏中问号传参的信息 ‘ www.xxxxxxx.cn/?lx=1&n… ‘ 解析问号和井号后面的值，最后得到一个包含信息的对象 {HASH: "video", lx: "1", name: "JS", from: "baidu"} 一、常规正则处理 (proto => { …
57. React 服务端渲染实战，Next 最佳实践 开门见山的说，服务端渲染有两个特点： 响应快，用户体验好，首屏渲染快 对搜索引擎友好，搜索引擎爬虫可以看到完整的程序源码，有利于SEO 如果你的站点或者公司未来的站点需要用到服务端渲染，那么本文将会是非常适合你的一篇入门实战实践教学。本文采用 next 框架进行服务器渲染框架的搭建，最终将完成…
58. 手摸手从0实现简版Vue — （依赖收集) 接： 手摸手从0实现简版Vue — （对象劫持) 手摸手从0实现简版Vue — （数组劫持) 手摸手从0实现简版Vue — （模板编译) 前面我们实现了： 数据的劫持 模板解析 但是目前我们去更新数据，视图不能正常去更新，如何知道视图是否需要更新，是不是任意一组data数据修改都需要重新渲染更新视…
59. 前端劝退预警：JavaScript 工具链不完全指南 经过这么多年的发展，JavaScript 早已经不是当年那个不太起眼的脚本语言。如今的 JavaScript 可以说是风光无限，在 Web 前端、移动端、服务端甚至物联网设备上都大展身手，到处都有它的身影。 在 JavaScript 语言日渐强大的同时，与其配套的开发工具也蓬勃发展。现在的 Web 前端项目，早已不是写几个 HTML 页面，加点 …
60. 4W字长文带你深度解锁Webpack系列（基础篇）三篇长文，4W余字，带你解锁 webpack ，希望读完这三篇文章，你能够对 webpack 的各项配置有一个更为清晰的认识。

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

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