20200312 前端开发日报

使用 D3.js 创建根据值域颜色渐变的地图；[推荐] 前端高级进阶：如何更好地优化打包资源；JS-DOM事件流；你真的理解Promise吗？；2020 年，Vue 受欢迎程度是否会超过 React？；运营平台系统在菜单权限的基础上进一步细致到按钮权限管理（Vue）；JS中function的基础知识；记一次vue-element-admin 的动态路由权限管理和菜单渲染的学习

1. 使用 D3.js 创建根据值域颜色渐变的地图 在实际开发中,地图是个比较常见的图,用于展示各个省市之间的数据差异。只要有了所需绘制地图的 geojson 文件我们就能通过此方法绘制我们需要的任何地图。 项目地址: 点击查看 @ 效果预览 先来看一下完成后的效果图: 很清晰的展示了各个省份的数据之间的差异.同时还有 visualMap 来展示数据的范…
2. [推荐] 前端高级进阶：如何更好地优化打包资源 这是山月关于高级前端进阶暨前端工程系列文章的第 M 篇文章 (M 随便打的，毕竟也不知道能写多少篇)，关于前 M-1 篇文章，可以从我的 github repo shfshanyue/blog 中找到，如果点进去的话可以捎带~点个赞~，如果没有点进去的话，那就给这篇文章点个赞。。今天的文章开始了 本篇文章地址在 前端工程化系列 …
3. JS-DOM事件流 其实很久之前就接触过DOM事件流了，但是在很长时间没有用到之后，就把它忘记了，所以今天特意来写一下，顺便回顾一下DOM时间流的一些知识 DOM事件流的分类 DOM事件流是有两种的，一种是捕获型事件流，另外一种是冒泡型事件流，两者其实都很好理解，下面我们就来详细介绍一下，为了大家更好的理解，我们就先介绍下冒…
4. 你真的理解Promise吗？ 异步Javascript与回调地狱 由于Javascript起初是在浏览器中运行的编程语言，其执行会阻塞浏览器对dom树的解析和渲染，所以js中充满了大量的异步操作，例如：dom事件绑定，Ajax异步请求。Javascript起初是使用回调函数作为异步操作的解决方案。 dom.addEventListener(event, callback)复制代码 但使用回调函数面临了一…
5. 2020 年，Vue 受欢迎程度是否会超过 React？ 点赞再看，养成习惯 本文 GitHub https://github.com/qq44924588… 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。 前端框架的受欢迎程度每年都在增长， 如今，在较大型或者中型的项目，基本都需要使用框架来进…
6. 运营平台系统在菜单权限的基础上进一步细致到按钮权限管理（Vue） 原先风控人员与业务人员都是在不同的菜单下操作业务，但最近开发的一些业务有存在风控人员与业务人员会在同一菜单下操作不同的功能。比如业务人员只能查看数据而不能点击页面上操作数据的按钮功能，之前运营平台只是菜单的权限，并没向下细致到按钮的级别。经过三次前后端会议的讨论、设计方案的评审、人员的投入，最终…
7. JS中function的基础知识 思维导图 1、创建函数 -1).语法： function 函数名(形参){ 函数体 } -2).创建过程： 第一步： 创建值： 1、开辟一个堆内存 2、把函数体中的代码当作字符串储存在堆中 3、把堆地址放到栈中 第二步： 创建变量…
8. 记一次vue-element-admin 的动态路由权限管理和菜单渲染的学习 三人行必有我师,今天来记录一次 对 vue-element-admin 中 动态路由和动态菜单渲染的理解,只是学习,不对之处,还请见谅 现实的工作中,尤其是写后台管理系统的时候,经常会涉及到不同的用户角色拥有不同的管理权限,那么久需要对应不同的管理者进行不同的动态路由设置和导航菜单渲染,这在后台管理中,变成了一个迫切需要解决…
9. Vue实战-电商管理系统-登录组件实现 src/components/Login.vue <template> <div>登录</div> </template> <script> export default { name: "Login" } </script> <style scoped> </style> 复制代码 路由配置文件 src/router.js import Vue from ‘vue’ import Route…
10. 一窥 Draft.js 受控渲染机制 估计很多同学都知道 Draft.js 是基于受控的 (controlled) contenteditable 实现的，也知道 Draft.js 的 editor state 中除了 content state，还有 selection state，undo/redo stack 等。但具体 Draft.js 如何将这些 state 渲染出来，估计多数同学就不了解了。毕竟不了解也能用起来。 最近 de – 一个流程编辑器的…
11. Laravel+Vue 开发问答平台 – 问题列表 创建文件 src/components/Newest.vue 文件，编写如下代码 <template> <div> Newest </div> </template> <script> export default { name: ‘Newest’ } </script> <style scoped> </style> 复制代码 修改Home.vue文件 修改文件 src/views…
12. axios学习笔记（一）：学习HTTP相关的技术知识点 请求行：method  url: GET/url,  POST/url 多个请求头 Host: www.baidu.com Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706; Content-Type: application/x-www-form-urlencoded 或者 application/json 请求体 username=tom&pwd=123 {"username": "…
13. 浏览器中实现JavaScript计时器的4种创新方式 在 Web Worker中使用无限同步循环 由于 Web Worker 本质上是Web线程，因此你可以在其中无限循环而不阻塞主线程。这使你可以访问微秒级的时间分辨率。这对于在 Worker 中做出时间关键的决策是特别实用的，可以让主线程准确的知道什么时候合适。例如：只要微秒是质数，就渲染某些东西。要访问微秒，你可以使用 performan…
14. 127个常用的JS代码片段，每段代码花30秒就能看懂（四） 大家好，今天我继续给大家分享本系列文章的第四部分，希望对你的日常工作有所帮助。 64、getColonTimeFromDate 用于判断程序运行环境是否在浏览器，这有助于避免在node环境运行前端模块时出错。 const isBrowser = () => ! .includes(‘undefined’); isBrowser(); // true (browse…
15. JS 核心之 构造函数、原型、原型链 构造函数 构造函数是什么，简单理解我们创建一个类的方法，这个类有通性。比如人、动物、歌星这都是个类，有一些共同特性 function Star() {} let p1 = new Star() function Animal() {} let animal = new Animal() 以上这两个例子都是类，构造函数想要用类创建出一个对象，必须要使用 new 当我们创建明星，…
16. NodeJs入门，带你获取头条热搜形成好看的标签云 在学习NodeJs之前，你可能需要学习JavaScript,最好也了解一下es6。 我们这篇文章是针对今日头条（以下称头条）的热搜榜数据的分析，形成一种标签云，重点是如何获取热搜榜的数据。 此篇文章只是分享学习过程，切勿利用此方法进行违法行为！ 先了解下NodeJs Node.js是一个JavaScript运行时环境（可以解析和执行Ja…
17. js将数值转为万，亿，万亿并保留一位小数 最近刚好做到项目，有个数字过大直接展现万，亿等单位的缩略展示。上网查看我竟然把我高中数学的log运算都捡起来了 ，好神奇！果然代码的底层是数学，学遍数理化走遍全天下，这句话不是没有道理:grimacing: 实现思路 实现思路我们应该很清晰，无非是两种情况，一种是不过【万】时候的正常展示和另一种过【万】之后的…
18. 排序算法之快速排序（附 Python 与 JS 实现） 文章同步发布于 博客 本文主要介绍了快速排序的基本思路，包括伪代码和 Python 实现。同时，也介绍了快速排序的优化方式，如随机锚点和三路快排。 与归并排序一样，快速排序同样使用了分治的思想。在执行时，选取一个锚点（pivot），比如数组位置 0 的元素，然后遍历剩下的部分，如果元素小于或等于锚点，则将其移…
19. 从前端现状到数据校验史 真实的前端开发到底是怎样的？是在浩如烟海的 npm 中追寻永远找不到的银弹？还是在日新月异的 ECMAScript 规范下探索梦想中的乌托邦？ 前端发展十余年，沧海桑田，朝代更迭，从 vanilla.js，到 jQuery.js，到 Angular.js，再到如日中天的 React/Vue。中间不乏又有诸如 svelte 之类后起之秀。 隐藏在看似繁荣昌盛的表…
20. Ajax与jQuery异步加载数据 简介 一次性从服务器数据库中读取数据并传送到前端页面上是不现实的，一方面会加重服务器的压力，另一方面客户的带宽资源也会被占用。Ajax刚好可以解决数据异步加载的问题。Ajax 即“ A synchronous J avascript A nd X ML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需…
21. 深入学习和理解 Redux Redux官网上是这样描述Redux，Redux is a predictable state container for JavaScript apps.（Redux是JavaScript状态容器，提供可预测性的状态管理）。 目前Redux GitHub有5w多star，足以说明 Redux 受欢迎的程度。 一、Why Redux 在说为什么用 Redux 之前，让我们先聊聊组…
22. JavaScript中的this到底指向谁 首先，我们很容易想到， this 它自己本身就是个变量。 这一点很容易理解，在日常我们撸码的时候，用到this，就是为了让我们的代码可以复用的。 function foo() { console.log(‘foo:’, this.name) } var obj1 = { name:’CR7′, foo:foo } var obj2 = { name:’Messi’, foo:foo } obj1.foo() // foo: CR7 o…
23. kube-scan 和 KCCSS 在 Kubernetes 中使用声明式 API 来定义工作负载，因为工作负载的灵活多变，这种定义的随意性是很大的，很容易因为复制黏贴、手工运维等原因给 Pod 分配不需要的特权，造成安全隐患。kube-scan 就是针对这种情况而出现的一个工具，它根据内置的二十几个检查项目，对工作负载描述的安全性进行打分，从最安全的 0 分，到最…
24. 使用纯Java实现一个WebSSH项目 最近由于项目需求，项目中需要实现一个WebSSH连接终端的功能，由于自己第一次做这类型功能，所以首先上了GitHub找了找有没有现成的轮子可以拿来直接用，当时看到了很多这方面的项目，例如：GateOne、webssh、shellinabox等，这些项目都可以很好地实现webssh的功能，但是最终并没有采用，原因是在于这些底层大都是python…
25. 我对JavaScript事件循环的理解 在js代码执行过程中，会有这么几个部分， 任务队列 和 函数调用栈 其中任务队列又分为两种， 宏任务（macro-task） 和 微任务（micro-task） 在最新标准中，它们被分别称为task与jobs，他们的执行顺序是，微任务队列优先于>>>宏任务队列,宏任务也称为分发器，他们的作用就是将任务分发到相应的队列中 …
26. 深入学习 Go 语言的高性能 HTTP 服务器 Go是一门通用的编程语言，想要学习 Go 语言的 Web 开发，就必须知道如何用 Go 启动一个 HTTP 服务器用于接收和响应来自客户端的 HTTP 请求。用 Go实现一个http server非常容易，Go 语言标准库net/http自带了一系列结构和方法来帮助开发者简化 HTTP 服务开发的相关流程。因此，我们不需要依赖任何第三方组件就能构建并启…
27. 上手VueCLi笔记:从两个Vue版本开始 第一次在使用 vue-cli 生成了 vue 项目之后，我是有点懵逼的。 在删除了很多已有的代码和文件之后 此时src目录里有main.js，而public目录里则有index.html。 index.html大概长这样： <body> <div id="app"></div> </body> 复制代码 我们使用模板语法将内容vue实例插入…
28. 玩转webpack笔记02 进阶用法 文件监听是在发现源码发生变化时，自动重新构建出新的输出文件 webpack开启监听模式，有两种方式： 启动webpack命令时，带上 –watch参数(需要手动刷新浏览器) 在配置webpack.config.js中设置watch:true a1 文件监听的原型分析 轮询判断文件的最后编辑时间是否变化 某个文件发生变化，并不会立刻告诉…
29. 谈谈 GitHub Actions 入门 什么是 Github Actions GitHub Actions 是 GitHub 的持续集成服务，于2018年10月推出。是一种可以替换 Travis CI 作为 CI/CD 的解决方案。我也是近期存在一个需求，才开始进行尝试的，毕竟学了用是最好的学习方法。 可能存在一部分同学对持续集成服务（CI/CD）到底能做什么不是特别的有概念，例如：你…

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

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