20200624 前端开发日报

学习Vue源码(17)再探生命周期之初始化实例属性及事件;你不知道的 TypeScript 泛型(万字长文,建议收藏);学习vue源码(18)三探生命周期之初始化provide与inject;从零开始的Flutter之旅: Provider;GraphQL + Koa + React 项目实践;从零搭建一个react-hooks项目(二);从头开始创建自己的Vue.js—第2部分(虚拟DOM基础);在Vue开发过程中使用Vite更快的热加载

  1. 学习vue源码(17)再探生命周期之初始化实例属性及事件

    在前一篇文章 学习vue源码(16)初探生命周期各阶段都在干嘛 Vue.js生命周期可以分为4个阶段:初始化阶段、模板编译阶段、挂载阶段、卸载阶段。 而初始化阶段又可分为 在Vue.js实例上初始化一些属性、事件以及响应式数据,如props、methods、data、computed、watch、provide和inject等。 这一次,我们就来探究第...

  2. 你不知道的 TypeScript 泛型(万字长文,建议收藏)

    泛型是 TypeScript(以下简称 TS) 比较高级的功能之一,理解起来也比较困难。泛型应用场景非常广泛,很多地方都能看到它的影子。平时我们阅读开源 TS 项目源码,或者在自己的 TS 项目中使用一些第三方库(比如 R...

  3. 学习vue源码(18)三探生命周期之初始化provide与inject

    上篇文章 学习vue源码(17)再探生命周期之初始化实例属性及事件 讲解了初始化阶段的 initLifecycle(vm) initEvents(vm) initRender(vm) 复制代码 即beforeCreate钩子函数触发前对实例 属性和事件的初始化。 // src/core/instance/init.js Vue.prototype._init = function (options?: Object) { ...

  4. 从零开始的Flutter之旅: Provider

    往期回顾 从零开始的Flutter之旅: StatelessWidget 从零开始的Flutter之旅: StatefulWidget 从零开始的Flutter之旅: InheritedWidget 在上篇文章中我们介绍了InheritedWidget,并在最后引发出一个问题。 虽然Inhe...

  5. GraphQL + Koa + React 项目实践

    项目背景 源于 2019 年 11 月 16 日 FCC 成都社区主办的 web 全栈大会上尹吉峰老师的 GraphQL 的分享,让我产生了浓厚的兴趣。GraphQL 是一个用于 API 的查询语言,是使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。一个 GraphQL 服务是通过定义类型和类型上的字段来创建的,然后给每个...

  6. 从零搭建一个react-hooks项目(二)

    上一篇搭建了基本的webpack项目,可以支持react,less的基本使用,但是没有考虑到项目中的实际情况,例如生产环境的代码混淆,代码压缩,开发环境的热启动等。 下面我们就针对开发与生产环境的不同需求,对webpack进行下一步的配置 生产环境的配置与开发环境的配置有很多的不同点,所以我们需要分别建对应的配置文件...

  7. 从头开始创建自己的Vue.js—第2部分(虚拟DOM基础)

    作者: Marc Backes 翻译:张全玉 这是从头开始创建 Vue.js 系列文章的第二部分,在这里我教您如何创建诸如 Vue.js 之类反应式框架的基础。 在第一部分中,描述了我们需要的部分以及遵循的路线图。 如果您还没有阅读过,建议您在阅读本文之前先阅读。 我只有1年的 Vue.js 工作经验,但是我参加了 Evan You 本人...

  8. 在Vue开发过程中使用Vite更快的热加载

    作者: Andy Li                                    翻译:张全玉 以 ES6 模块的形式编写 JavaScript 代码已经成为一种常见的行业实践。现在的浏览器已经支持 ES6 模块,但正如 web 开发中的大多数其他问题一样,...

  9. 译文:2020的十大JavaScript图像处理库【渡一教育】

    原文翻译自: https://blog.bitsrc.io/image-manipulation-libraries-for-javascript-187fde1ad5af,作者:Mahdhi Rezvi 。 如有翻译不准确,请多指正! 使用JavaScript处理图像可能非常困难且繁琐,但值得庆幸的是,有许多可以使处理变得简单的库,以下是我最喜欢的不同类别的库。 如果你在其中发现有用的东西...

  10. 一文搞懂JavaScript原型链与继承

    “面向对象”有三个基本特性,即”封装,继承,多态“。一般来说,三个特性都完全满足的话,我们称为“面向对象语言”,而称满足其中部分特性的语言为“基于对象语言”。 “对象系统 ”的继承特性,有三种实现方案,包括基于类(class-based)、基于原型(prototype-based)和基于元类(metaclass-based )。 JavaScript 没有采用...

  11. 学习vue源码(16)初探生命周期之各阶段都在干嘛

    一、概述 每个Vue.js实例在创建时都要经过一系列初始化,例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。 同时,也会运行一些叫作生命周期钩子的函数,给在不同阶段添加自定义代码的机会。 二、生命周期 Vue.js生命周期可以分为4个阶段:初始化阶段、模板编译阶段、挂载阶段、卸载阶...

  12. RTSP?不存在的 -> 前端实时流探索记

    作为一个从未接触过实时流(直播流)的人,我之前对实时视频一直没有概念,而最近参与的项目刚好有视频监控的需求,在参与技术选型之前,我对前端实时流的展示进行了一下摸底。

  13. 原生javascript组件开发之Web Component实战

    前言 作为一名前端工程师,我们每天都在和组件打交道,我们也许基于 react/vue 使用过很多第三方组件库,比如 ant design , elementUI , iView 等,或者基于它们进行过组件的二次开发,比如 业务组件 , UI组件 等,亦或者觉得团队能力很强,可以不依赖第三方而独立开发属于自己的组件库。无论何种形式,组件开发已...

  14. [GitHub] JavaScript 趋势榜项目(第26周)

    1. tobspr/shapez.io 项目地址: https://github.com/tobspr/shapez.io :star::642 | forks:180 | 218 stars this week shapez.io 是一个受 factorio 启发的开源的用于构建游戏的基础平台! 在网络和桌面上可用。 2. twbs/bootstrap 项目地址: https://github.com/twbs/bootstrap :star::141874 | fork...

  15. 从头开始创建自己的Vue.js-第3部分(构建VDOM)

    作者: Marc Backes 翻译:张全玉 从头开始创建自己的Vue.js-第3部分(构建 VDOM ) 这是从头开始创建Vue.js的系列文章的第三部分,我将在这里教您如何创建诸如Vue.js之类的反应式框架的基础。 要关注此博客文章,我建议您阅读本系列的第一部分和第二部分。 这篇文章起初可能很长,但可能不像它看起来那样...

  16. 了不起的 Webpack 构建流程学习指南

    最近原创文章回顾: 《了不起的 tsconfig.JSON 指南》 《了不起的 Webpack HMR 学习指南(含源码分析)》 《《你不知道的 Blob》番外篇》 《《你不知道的 WeakMap》番外篇》 Webpack 是前端很火的打包工具,它本...

  17. 图形处理:给 Canvas 文本填充线性渐变

    Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。

  18. 学习vue源码(14)深入学习diff

    大白话简述 这一节,先对diff进行简单的描述,不会出现任何的源码,只是为了帮助大家建立一种思路,了解下 Diff 的大概内容。 1、Diff 的作用 2、Diff 的做法 3、Diff 的比较逻辑 4、简单的例子 复制代码 1. Diff 作用 Diff 的出现,就会为了减少更新量,找到最小差异部分DOM,只更新差异部分DOM就好了 ...

  19. 酷工作丨阿里巴巴内推、高顿教育高级前端工程师、中原银行多岗位招聘

    SegmentFault 思否社区致力于成为科技企业和开发者沟通的桥梁。为此特设「酷工作板块」,以便企业发布相关招聘信息,也为社区开发者提供招聘信息参考。

  20. ReactNative JS 层渲染之 diff 算法

    为什么讲 ReactNative JS 层渲染,重点讲 diff 算法呢? 使用 React 写过 Web 和 ReactNative 的,能很明显的感觉到,除了组件命名不一样之后,生命周期、刷新机制等几乎是完全一样的,这也就是 facebook 所说的 “learn once, write anywhere” ,只要会写 React,就能无压力同时开发 Web 和 ReactNative。而 React 框...

  21. 学习vue源码(15)手写$forceUpdate,vm.$destroy方法

    vm.$forceUpdate (1)作用 迫使Vue.js实例重新渲染。注意它仅仅影响实例本身以及插入插槽内容的子组件,而不是所有子组件。 (2)实现 只需要执行watcher的update方法,就可以让实例重新渲染。 Vue.js的 每一个实例都有一个watcher 。当状态发生改变时,会通知到组件级别,然后组件内部使用虚拟DOM进行更详...

  22. Android 上的 WebRTC:多设备如何启用硬件编码?(一)

    Badoo 和 Bumble 是海外的社交、交友约会平台与应用,于 2006 年在伦敦创立。据公开报道显示,其活跃用户达1.3 亿。 我们在Badoo和Bumble上的视频通话功能,采用的是支持 H.264 编解码标准的 WebRTC实现的。凭着以往经验,你可能会觉得这个编解码器应该可以在任何Android设备(Android 5.0及更高版本)上顺...

  23. webpack构建过程的进度条实现原理

    文/墨筝 前言 我们在使用webpack的时候经常会用到 webpackbar 或者 progress-bar-webpack-plugin 之类的webpack插件通过进度条等方式来展示webpack的构建进度,以提升构建过程中的反馈体验。对于不同的插件来说,它们只是进度条的UI展示形式不同而已,但最核心的webpack构建的实时进度的数据来源却是一致的,均由we...

  24. 学习vue源码(19)四探生命周期之初始化props

    前面文章已经 把 created钩子函数触发前,beforeCreate触发后 的initInjections和initProvide讲完了,现在开始讲 initState的props部分。 // src/core/instance/init.js Vue.prototype._init = function (options?: Object) { …… vm._self = vm initLifecycle(vm) initEvents(vm) initRender(v...

  25. 一文带你彻底学会 Git Hooks 配置

    你好,我是小桔,是一个没有感情的代码崽。 今天给大家介绍一下 Git Hooks,相信 Git 大家都在用吧,Git 除了用作版本控制,还有许多高级功能,Git Hooks 就是其中之一。 本文环境: Git 版本:2.27.0 Husky 版本:4.2.5 Node.js 版本:12.16.2...

  26. 如何优雅的处理前端开发中的File

    前端开发中,我们经常会遇到对文件的操作,特别是对图片的操作。在Node端,提供了file相关的接口,供我们使用。在浏览器中,Html5提供了File相关的Web Api。

  27. Node.js Stream —— 可写流

    什么是可写流 可写流是对数据流向设备的抽象,用来消费上游流过来的数据,通过可写流程序可以把数据写入设备,常见的是本地磁盘文件或者 TCP、HTTP 等网络响应。看一个之前用过的例子 process.stdin.pipe(process.stdout);复制代码 process.stdout 是一个可写流,程序把可读流 process.stdin 传过来的数据写入...

  28. 深入理解 Vue3 Reactivity API

    前言 今日早读文章由字节跳动@HcySunYang授权分享。 正文从这开始~~ TOC: effect() 和 reactive() shallowReactive() readonly() shallowReadonly() isReactive() ...

  29. 前端进阶:跟着开源项目学习插件化架构

    微内核架构(Microkernel Architecture),有时也被称为插件化架构(Plug-in Architecture),是一种面向功能进行拆分的可扩展性架构,通常用于实现基于产品的应用。微内核架构模式允许你将其他应用程序功能作为...

  30. Webpack 学习教程(三): 资源处理 & devtool

    点击前端充电营,关注我们 前言 上一篇文章我们介绍了webpack的安装和使用,没有看过的小伙伴可以从下面链接进入。 webpack学习教程(二):起步 2020-06-13 为了方便小伙伴们的学习,每一章我都会把当前demo的项目代码放在百度云盘上,想要的小伙伴直接公众号...

  31. Vue.js 组件复用和扩展之道

    软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复。组件扩展可以避免重复代码,更易于快速开发和维护。那么,扩展 Vue 组件的最佳方法是什么? Vue 提供了不少 API 和模式来支持组件复用和扩展,你可以根据自己的目的和偏好来选择。 本文介绍几种比较常见的方法和模...

  32. Github标星34K+Star,这款开源项目助你秒建Git服务

    以前使用Gitlab搭建过Git服务,如果服务器配置低的话启动和访问都会特别慢。最近发现了Gogs这个开源项目,安装方便,特别轻量级,推荐给大家!

  33. 前端工程师,一定要了解可视化

    最近这段时间,我们每天都在关注疫情,通常都是通过这样的信息图展示出来。 来源:北京大学可视化与可视分析实验室 这种信息图跟普通的网页差别很大,无法用传统 Web 开发技术实现,叫作 数据可视化 。作为前端领域中一个几乎不用写网页的特殊分支,可视化利用计算机的图形学和图像处理技术,将数据...

  34. 前端面试的那些事儿(28)~ JavaScript 排序算法

    数据结构和算法本身解决的是“快”和“省”的问题,即如何让代码运行得更快,如何让代码更省存储空间。所以,执行效率是算法一个非常重要的考量指标。那如何来衡量你编写的算法代码的执行效率呢?时间、空间复杂度分析。 时间复杂度 大 O 时间复杂度实际上并不具体表示代码真正的执行时间,而是表示代码执行时间随数据规...

  35. 有了 vite,还需要 webpack 么?

    前两天尤大在 vue 3.0 beta 直播中提到了一个 vite 的工具,而且还发推表示再也回不去 webpack 了, 还引来了 webpack 核心开发人员肖恩的搞笑回复, 那就让我们一起来看一下 vite 到底有啥魔力? evernotecid://F8C40634-B31F-4F08-81FD-EE7189DF2F84/appyinxiangcom/4070474/ENResource/p1713 什么是 Vit...

  36. js函数与arguments存在的价值有多大?

    function fn(n,m){//=>形参:入口 //函数体 var total =0; //=>total是私有变量 total = n+m; console.log(total); } fn(10,20) ; //=>实参:给形参传递的具体值 var a=12; fn(a,1===1?10:0);//实参一定是值,即使我们写的是变量或者表达式,也是把变量或者表达式计算的结果作为值传递...

  37. 我不知道的JS之delete操作符

    delete简介 MDN:delete 操作符用于删除对象的某个属性;如果没有指向这个属性的引用,那它最终会被释放。 这个简单的解释不禁引发了以下几个疑问: delete和内存释放有什么关系? 从MDN的这个介绍我们可以知道,delete操作符一般是用于对象的,它是用来删除对象上的属性的;而你使用了delete操作符之后,并不是立刻...

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

原文:20200624 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20200624.html)