20200517 前端开发日报

HTTP/3 原理与实践；html5 Audio 标签自定义样式 手把手教你用react封装一个audio组件；JS实现在不刷新页面的情况下改变URL之pushState；前端开发的瓶颈与未来之路；"零"学习成本：使用 Web 标准开发动态化 Flutter 应用；【2020Python修炼记】前端开发之 JavaScript 基础；Redux 在原生 JavaScript 中的使用，感受最原汁原味的 Redux；高德前端这五年：动态化技术的研发历程和全面落地实践

1. HTTP/3 原理与实践

   HTTP/3 原理与实践 这是一个视频版的 PPT。

2. html5 Audio 标签自定义样式 手把手教你用react封装一个audio组件

   1 audio简介 audio是html5新标签 audio用来定义声音，比如音乐或其他音频流 2 此篇文章背景 ❝ 业务中经常遇到使用audio场景，比如音乐播放，比如即时聊天语音，最近在实现智能问答机器人，其中涉及到音频这块内容。 大部分情况下，设计稿不会使用浏览器默认的audio样式，而audio样式又不能直接…

3. JS实现在不刷新页面的情况下改变URL之pushState

   今天中午在领完盒饭，吃饭的时候，正吃着深海鳕鱼片，蘸上番茄酱，那美味，简直无以言表。突然产品急匆匆的跑过来说：“ 我们要做一个搜索功能，用户在搜索框输入不同的搜索关键词时，url也要跟着变化，但是页面不能被刷新…保证用户刷新页面的时候还能定位到当前的搜索关键词 ”吧啦吧吧说了一大堆后，留下一句：“ 这…

4. 前端开发的瓶颈与未来之路

   前端开发的瓶颈到底在哪里，前端技术是否已经走到一个十字路口，全栈化的系统架构是否能改变目前的窘境？本文将根据我自己的开发经历谈谈当下前端开发中遇到的一些问题和想法。

5. "零"学习成本：使用 Web 标准开发动态化 Flutter 应用

   简介： Kraken 是由淘系技术部前端架构团队开发的一个基于 Flutter 的动态化框架，本文将带大家了解和认识 Kraken，分享 Kraken 的一些设计思想以及 Flutter 和 Web 技术对接的实践。

6. 【2020Python修炼记】前端开发之 JavaScript 基础

   【目录】 一、什么是JavaScript 二、如何学习JavaScript 三、JavaScript 的三种书写位置 一、什么是JavaScript 1、简介 JavaScript 和 Java 一点关系也没有，有也只是JavaScript 蹭 Java的热度罢了…… # ECMAScrip t和JavaScript的关系 因此ECMAScript和JavaScript的关系…

7. Redux 在原生 JavaScript 中的使用，感受最原汁原味的 Redux

   作为前端开发者，相信即使没有使用过 redux，一定也听过 redux 的大名。我们常常和 react 搭配一起使用 redux，这样更能发挥 redux 的作用，因为这类库允许你通过改变 state 来更新试图。但 redux 同样可以与 Angular、jQuery 等库搭配使用，同样也可以在原生的 js 中使用。了解清楚了在原生 js 中的使用后更容易帮助开…

8. 高德前端这五年：动态化技术的研发历程和全面落地实践

   前言 2015年-2020年，历经5年发展，高德地图应用开发前端团队在业务快速发展中不断成长。一路走来，从小团队主要负责短期运营活动开发的散兵游勇，到现在团队规模100人+，覆盖高德5大业务线，上百个模块的坚甲利…

9. 使用Go开发前端应用（四）- 操作canvas绘制一个表格

   这篇文章会讲下，如果通过Go来操作canvas，然后画一个类似腾讯文档表格一样的，在线的表格。当然，这肯定是个demo（你懂的）。然后，这篇文章主要会讲下面几个点： 使用Go来操作canvas绘制表格 使用js来操作canvas绘制表格 性能问题 使用Go操作canvas绘制表格 这里我们就直接上Go的代码了，如果有对G…

10. Angular 实现 A4 格式分页渲染

    引言 原试卷预览功能如下图所示，按普通的网页格式预览试卷。 最终通过HTML渲染后的PDF如下图所示，存在以下问题： 无法显示试卷页号，目前不知道最终生成几页的PDF。(请教过考研的同学，考研的试卷像书一样，翻…

11. TypeScript 3.9 正式发布

    据说编译性能有较大提升。周刊君在项目中试了下… 嗯，据说。

12. 手把手教你搭建React组件库（超详细）

    概览 准备工作 初始化项目 代码规范 Commit Lint TypeScript 测试 开发与调试 安装 docz 以及自定义配置 编写文档 优化文档编写 优化代码展示 编写 <HappyBox />组件 相关配置变更 改造相关文件 组件库打包…

13. 什么情况下Vue使用index作为key会出问题

    背景 在动态删除v-for渲染的列表的过程中，如果key指定为index，则可能出现渲染错乱的问题。比如，你明明删了第一行，但是视图上却删了第二行。 解析 问题源于key的重复，当你删了第一行，那么第二行的key就变成了第一行的key，这两个key是相同的。基于VirtualDOM的库会把key相同的组件认作同一个组件，因而不会去更…

14. Node.js 应用日志切割原理与踩坑实践

    “ 日志切割是完善 Node.js 服务可观测性的重要前提，是实现日志可视化检索、日志监控告警和全链路日志分析的前置条件之一。本文对通用的日志切割原理进行了阐述，展开说明了 Node.js 应用中两种常用的日志切割方案及其背后的实现机制，并对两种实现方案进行了优劣对比。”

15. 不要过度使用React.useCallback()

    我博客的一位读者在Facebook上联系到我，提出了一个有趣的问题。他说，他的队友不管在什么情况下，都会把每一个回调函数封装在 useCallback() 里面。

16. 用Angular实现一个扫雷的游戏示例

    最近想找些项目练练手，发现去复刻一些小游戏还挺有意思的，于是就做了一个网页版的扫雷。 点击 这里 看看最终的效果。 创建应用 该项目使用的是 monorepo 的形式来存放代码。在 Angular 中，构建 monorepo 方法如下： ng new simple-game –createApplication=false ng generate application mine-sweepe…

17. 实现简易的 Vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态只能通过可预测的方式改变。 查看官网 Why 多组件共享同一个状态时，会依赖同一状态 单一数据流无法满足需求： 深度嵌套组件级属性传值，会变得非常麻烦 同级（兄弟）组件间传值也…

18. reactive stream协议详解

    Stream大家应该都很熟悉了，java8中为所有的集合类都引入了Stream的概念。优雅的链式操作，流式处理逻辑，相信用过的人都会爱不释手。

19. Vue 自定义指令的一个小例子

    前端开发的同学们应该对 Element UI 不陌生，而日常开发中，多少会存在一些组件无法完全满足我们需求的情况，或者说想在原组件的基础上附加一些功能，当遇到需要附加一些不是特别复杂的小东西的时候，采用 Vue 的…

20. 关于 JavaScript 中 Symbol 数据类型你需要了解的一切

    JavaScript 的 Symbol是一个相对较新的 JavaScript “特性”。它于 2015 年作为 ES6 的一部分被引入。在这篇文章中，我将会讲到： 究竟 JavaScript 中的 Symbol 是什么 在语言中加入这种数据类型的动机 Symbol 数据类型是否成功地解决了它所要解决的问题？ 与其他语言中的 Symbol 数据类型的区别，例如 Ru…

21. HTML 页面生成器：使用 JavaScript 和 Node 创建 CLI

    在第 42 期的文章：从零开始使用JavaScript制作自己的命令行(CLI工具) 中我们介绍如何从零开始制作CLI，算是一个入门前传，知道了怎么制作CLI后今天更进一步。 在这篇文章中，我们将构建一个简单的CLI，允许用户生成HTML页面。我们首先要生成一个标准的空白页面，然后让用户输入参数，比如文件名和标题，先通过…

22. 是时候考虑 Spring 非阻塞编程模式？R2DBC pk JDBC 和 WebFlux pk Web MVC 评测数据

    导读：Spring框架中，同时存在WebFlux和R2DBC这样的响应式模块，也存在Web MVC和JDBC这样的阻塞框架。应该在什么情况下使用不同技术栈，可能会困扰很多技术人。本文作者对这两种技术栈做了详细的对比和压力测试，为技术选型提供支持。 2017年9月发布的Spring Framework 5中，引入了Spring WebFlux。WebFlux是…

23. Promise、Generator、Async三者的区别

    Promise有三种状态：pending(进行中)、resolved(成功)、rejected(失败) Promise对象的缺点： 无法取消Promise，一旦新建它就会立即执行，无法中途取消。 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。 当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将…

24. Flutter 在 PLUS 业务中的探索和实践

    2016年京东为向核心客户提供更优质的购物体验，特别推出京东PLUS会员，旨在全方位提升和丰富用户网购体验，目前京东PLUS会员已成为电商行业付费人数最多的会员体系。作为PLUS的前端开发，我们思考最多的就是如何让页面更快更好的呈现在用户面前，如何用技术为用户提供最好的购物体验。 为什么会开始…

25. JavaScript面向对象详解（二）

    JavaScript面向对象(二) 前面, 我们讨论了很多种场景对象的方式: 从Object到字面量, 再到工厂模式, 再到构造函数. 最终我们发现, 构造函数是比较理想的一种方式, 但是它也存在问题. 为了最终解决这个问题, 我们需要学习一个新的知识: 原型(prototype). 一. 理解原型模式 1.1. 什么是原型呢? 你需要先知道…

26. vue-fiction简易版小说网

    基于 Vue(2.6) + Vuex +Vue-Router + Axios + Vant UI + Scss + ES6 等开发一款小说 WebApp，UI 界面参考了移动版的起点中文网、flex 布局适配常见移动端。 在线地址 因为服务器很不给力，所以加载很慢，急性子的大神可以clone下来，运行看效果。如果可以的话一会再访问应该就没什么问题了，出现这样的问题，实在抱…

27. HTML5增加了哪些功能？有什么优势？

    从HTML4.0、XHTML到HTML5，从某种意义上讲，这是HTML描述性标记语言的一种更加规范的过程。因此，HTML5并没有给开发者带来多大的冲击。但HTML5增加了很多非常实用的新功能和新特性，下面具体介绍HTML5的一些优势。 1、 解决了跨浏览器问题 在HTML5之前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各…

28. Vue组件实现百度地图弹窗，Vue组件插入节点

    今天碰巧有位朋友提到了这个问题，记录一下。如今很多人习惯了用主流MVVM框架开发，但是碰到如百度弹窗的这个需求的时候，不知道该如何把vue组件与第三方插件混合使用。其实这类问题都可以通过插入节点的方式实现。 案例是使用的vue框架，话不多说，直接上代码。 <template> <div class="map-window…

29. 十年工作经验的前端高级工程师讲解，如何规划自己的职业生涯

    前端是什么 工作流程为从UI处得到原型图或者效果图，在项目（网站、微信公众号、小程序、WEBAPP）中还原图片效果，然后与后台进行各种数据交互。 在项目中充当一号背锅侠，项目出现问题第一个收到传唤的人。一个不受UI、后台待见，甚至不受协同开发的其他前端待见的岗位。 前端， 一个让我沉迷的岗位 前端， 一个…

30. vue中使用节流函数

    一个常见的业务场景，我们要在input搜索框输入结束后，发送相关请求，获取搜索数据。频繁的事件触发会导致接口请求过于频繁。所以需要我们对此加以限制，来禁止不必要的请求，以免资源的浪费~ 举一个:chestnut: 业务场景 概念： 关于防抖函数的介绍 关于addEventListener 使用示例： function…

更多内容请关注公众号【前端开发博客】每日更新