20200417 前端开发日报

GitHub 宣布向所有团队免费开放核心功能，高级企业功能月费大幅下调；2020 年 Node.js 开发者调查报告；记开发中遇到的两个js最大安全值问题；前端规范的一些理解；React 16.8.6 版本存在内存泄露；Vue 使用websocket + json + protobuf 与后端交互golang；目标是最完善的微前端解决方案 – qiankun 2.0；三大应用场景调研，Webpack 新功能 Module Federation 深入解析

1. GitHub 宣布向所有团队免费开放核心功能，高级企业功能月费大幅下调

   今天凌晨，GitHub 官方发布公告表示向所有团队免费开放核心功能。无论是个人免费账户还是商业项目团队，都可访问 GitHub 的无限私有存储库。

2. 2020 年 Node.js 开发者调查报告

   简介：本次调查由阿里巴巴、腾讯等公司领衔，调查时间从 2020 年 2 月至 4 月，以中文进行。截止至 4 月 10 日共有 1113 名受访者参加调研。本报告将从 Nodejs 开发者人群、应用场景、开发场景等多个维度分析当下…

3. 记开发中遇到的两个js最大安全值问题

   最近开发过程中发现有两种case都是因为js精度导致的问题，记录一下~ Case 1：后端要求前端对某个值限制最大long型 后端大大说线上发现一种报错case，用户输入的id超过了Java Long型最大值，因为Long类型解析异常，直接返回系统异常。后端大大希望前端能加个校验，对输入的id进行下判断，超过Long型最大值时提示下输…

4. 前端规范的一些理解

   推荐使用vsCode进行开发，轻量级界面美观，调试方便，代码自动格式化 vscode相关 推荐使用箭头函数，可以很好地解决了this的指向问题，并且更加简洁明了 常规函数写法 function getPersonList() { // do something return personList } 复制代码 箭头函数 const getPersonList = ()…

5. React 16.8.6 版本存在内存泄露

   发现这个React 内存泄露问题是某一天的晚上一直开着直播页，直播页用的 react 版本是 16.8.6，到了早上跳到这个页面的时候，控制台有点卡，怀疑是有内存泄露，于是就开始分析这个直播页面。

6. Vue 使用websocket + json + protobuf 与后端交互golang

   看这篇文章的时候，千万不要害怕代码，重要的核心的都加注释了，原理很简单！！祝阅读顺利 当学习一门新的语言的时候，总是喜欢先建立一个Demo项目，通过构建一个基本的项目，来了解语言的特点。 对于web的交互，以前常用的技术主要是Ajax、Form表单提交这类，如果要做长连接，可以使用Websocket 关于websocket和sock…

7. 目标是最完善的微前端解决方案 – qiankun 2.0

   2019 年 6 月，微前端框架 qiankun 正式发布了 1.0 版本，在这一年不到的时间内，我们收获了 4k+ star，收获了来自 single-spa 官方团队的问候，支撑了阿里 200+ 线上应用，也成为社区很多团队选用的微前端解决方…

8. 三大应用场景调研，Webpack 新功能 Module Federation 深入解析

   导读：Federated Modules 是一个令人激动的功能，它可能会改变未来几年的前端打包方式，作者深入分析了 Module Federation 的原理及其应用场景，希望能对大家有所启发。 WHAT（Module Federation 是什么？） Module Federation   使 JavaScript 应用得以在客户端或服务器上 动…

9. 说说Vue的几个watcher

   new Vue({ template: `<div>My name is {{name}}<div>`, data: { name: ‘FooBar’, gender: ‘male’ } }) 复制代码 结合上面的代码来看， 响应式 意味着：当name属性值改变时，渲染的内容也应随之变化。 建立联系 如何才能建立视图渲染与属性值之间的联系？先来搞清楚两个问题 谁 …

10. 用 js翻译翻译：什么叫tmd逆波兰式

    A：别急着理解标题，先问你个问题。 A：1+1 是什么？ B：是 2 ？ A：不不不，我要说的不是这个，它由 1 + 1 组成。 B：这不是废话吗。 A：不不不，我说的是。 A：它由 1 + 1 组成。 A：而不是 + 1 1 A：也不是 1 1 + B：你有病吗？ A：哈哈哈，这就引出了我们的标题，符合我们常理的 1+1 …

11. 写一个 react hooks + koa 风格的 web 框架

    最近一直打算写一个 web 框架自用，但是一直头疼于插件之间的互相依赖问题，所以最近暂时停止了开发。 但是最近从 react 的学习中，突然冒出了一些好玩的想法，那就是能不能以 react hooks 风格写 nodejs 代码呢？ 一、设计 api 风格 主应用代码设想 import { Server } from ‘http’ import { useCallback, us…

12. Node.js中的 stream模块详解

    什么是stream 定义 流的英文stream，流（Stream）是一个抽象的数据接口，Node.js中很多对象都实现了流，流是EventEmitter对象的一个实例，总之它是会冒数据（以 Buffer 为单位），或者能够吸收数据的东西，它的本质就是让数据流动起来。可能看一张图会更直观： 水桶管道流转图 注意：stream不是node.js独有…

13. Vue Object 的变化侦测

    Vue 中的对象变化侦测是通过 Object.definePorperty 实现的，但是 Object.definePorperty 的方式有缺陷，比如不能直接代理整个对象，每次都要循环遍历对象的所有属性；尤大大说之后会使用 ES6 中的 Proxy 重写这个部分。这篇博客介绍的是 Object.definePorperty 实现的对象侦测。 我们来看下面这段代码，定义一个 def…

14. 你也许不知道的javascript高级函数

    高阶函数是对其他函数进行操作的函数，可以将它们作为参数或通过返回它们。简单来说，高阶函数是一个函数，它接收函数作为参数或将函数作为输出返回。

15. 如何实现 Vue 自定义组件中 hover 事件以及 v-model

    在CSS中，很容易在鼠标hover时进行更改，只需： .item {    background: blue;  }    .item:hover {    background: green;  }  在Vue中，它会变得更复杂一些，因为我们没有内置这个功能。我们必须自己实现这些。不过别担心，工作量不…

16. 全栈后台管理系统脚手架 gin-vue-admin 2.0版本介绍

    项目文档 在线文档项目地址 前端UI框架：element-ui 后台框架：gin 1. 基本介绍 1.1 项目介绍 在线预览 Gin-vue-admin是一个基于vue和gin开发的全栈前后端分离的后台管理系统，集成jwt鉴权，动态路由，动态菜单，…

17. 一个易迁移、兼容性高的 Flutter 富文本方案

    在闲鱼消息体系中，富文本在 UI 侧占了非常大的比重。最近消息部分在整体 Flutter 化，如何解决 Flutter 侧富文本问题，成为了项目早期的风险点。

18. 为什么 JS 对象内部属性遍历的顺序乱了

    问题重现 需求是要获取一个车型列表，并且输出到页面上按年份排序，故而接口提供的对象简化如下 let obj = { ‘2018’: { modelCode: "204313", modelName: "2018款 Vanquish 6.0L S Coupe" }, ‘2017’: { modelCode: "202479", modelNam…

19. 记一次webpack+typescript+react的优化过程

    项目采用的是react + webpack + typescript + tslint的技术栈，优化之后速度有了大幅度的提高。 优化之前的webpack配置 module.exports = { …, module: { rules : [ { test: /.tsx?$/, use: [ { …

20. GitHub 发了大福利后，羊毛党正在路上

    内容提要：GitHub 从今天起，面向全体个人和团队，免费提供不限制协作人数的私有仓库，所有核心功能也统统免费。不过，全面免费政策背后，也带来一些隐忧。

21. 使用Serverless模式开发部署前端和Node.js

    写在开头： 什么是Server模式？前端、后端现在都可以使用Serverless模式进行开发和部署吗？ 先回答第一个问题： Serverless 圈内俗称为“无服务器架构”，Serverless 不是具体的一个编程框架、类库或者工具。简单来…

22. 基于 HTML5 WebGL 的楼宇智能化集成系统（三）

    前言 2018年7月，信息化部印发了《工业互联网平台建设及推广指南》和《工业互联网平台评价方法》，掀起了 工业互联网  的浪潮，并成为热词写入了报告中。同为信息发展下的产物  建筑智能化集成系统 也是兼具着信息与管理的重要体现，数据化信息通过可视化的管理系统展示出一套互联网智能优化的解决方案，…

23. 关于vue过滤器的原理解析

    又来学习源码系列，今天就看一下vue中的过滤器具体是怎么实现的，我觉得这是一个不常用但是很重要的知识点，开冲！ 01 前言 过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理。我们看一下官方的定义： Vue.js 允许你自定义过滤器，可被用于一些常…

24. 与 JavaScript 模块相关的所有知识点

    每日前端夜话 第312篇 翻译： 疯狂的技术宅 作者：Dixin 来源：weblogs.asp.net 正文共：4953  字 预计阅读时间：10分钟 JavaScript 语言最初是为简单的表单操作而发明的，没有诸如模块或命名空间之类的内置功能。多年以来发明了大量的术语、模式、库、语法和工具来模块化 JavaScrip…

25. 你不一定知道的javascript高级函数

    高阶函数是对其他函数进行操作的函数，可以将它们作为参数或通过返回它们。简单来说，高阶函数是一个函数，它接收函数作为参数或将函数作为输出返回。 例如 Array.prototype.map ， Array.prototype.filter ， Array.prototype.reduce 都是一些高阶函数。 尾调用和尾递归 尾调用（Tail Call）是函数式编程的一个…

26. Nodejs之进程

    本文大部分借鉴自深入浅出Node.js 本文开始讲一下 Node 的进程， Node 是建立在 V8 引擎之上的，程序基本上是运行在单进程的单线程上的，那么这样就会导致机器的资源没有被合理的利用， CPU 使用率低，所以我们需要多开进程，充分利用多核 CPU 服务器，但是多开进程又会面临进程管理方面的问题。下面我们来具体说…

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