学习vue源码（17）再探生命周期之初始化实例属性及事件；你不知道的 TypeScript 泛型（万字长文，建议收藏）；学习vue源码（18）三探生命周期之初始化provide与inject；从零开始的Flutter之旅: Provider；GraphQL + Koa + React 项目实践；从零搭建一个react-hooks项目（二）；从头开始创建自己的Vue.js—第2部分（虚拟DOM基础）；在Vue开发过程中使用Vite更快的热加载
-
在前一篇文章 学习vue源码（16）初探生命周期各阶段都在干嘛 Vue.js生命周期可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段、卸载阶段。 而初始化阶段又可分为 在Vue.js实例上初始化一些属性、事件以及响应式数据，如props、methods、data、computed、watch、provide和inject等。 这一次，我们就来探究第…
-
你不知道的 TypeScript 泛型（万字长文，建议收藏）
泛型是 TypeScript（以下简称 TS） 比较高级的功能之一，理解起来也比较困难。泛型应用场景非常广泛，很多地方都能看到它的影子。平时我们阅读开源 TS 项目源码，或者在自己的 TS 项目中使用一些第三方库（比如 R…
-
学习vue源码（18）三探生命周期之初始化provide与inject
上篇文章 学习vue源码（17）再探生命周期之初始化实例属性及事件 讲解了初始化阶段的 initLifecycle(vm) initEvents(vm) initRender(vm) 复制代码 即beforeCreate钩子函数触发前对实例 属性和事件的初始化。 // src/core/instance/init.js Vue.prototype._init = function (options?: Object) { …
-
往期回顾 从零开始的Flutter之旅: StatelessWidget 从零开始的Flutter之旅: StatefulWidget 从零开始的Flutter之旅: InheritedWidget 在上篇文章中我们介绍了InheritedWidget，并在最后引发出一个问题。 虽然Inhe…
-
项目背景 源于 2019 年 11 月 16 日 FCC 成都社区主办的 Web 全栈大会上尹吉峰老师的 GraphQL 的分享，让我产生了浓厚的兴趣。GraphQL 是一个用于 API 的查询语言，是使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。一个 GraphQL 服务是通过定义类型和类型上的字段来创建的，然后给每个…
-
上一篇搭建了基本的webpack项目，可以支持react，less的基本使用，但是没有考虑到项目中的实际情况，例如生产环境的代码混淆，代码压缩，开发环境的热启动等。 下面我们就针对开发与生产环境的不同需求，对webpack进行下一步的配置 生产环境的配置与开发环境的配置有很多的不同点，所以我们需要分别建对应的配置文件…
-
作者： Marc Backes 翻译：张全玉 这是从头开始创建 Vue.js 系列文章的第二部分，在这里我教您如何创建诸如 Vue.js 之类反应式框架的基础。 在第一部分中，描述了我们需要的部分以及遵循的路线图。 如果您还没有阅读过，建议您在阅读本文之前先阅读。 我只有1年的 Vue.js 工作经验，但是我参加了 Evan You 本人…
-
作者： Andy Li 翻译：张全玉 以 ES6 模块的形式编写 JavaScript 代码已经成为一种常见的行业实践。现在的浏览器已经支持 ES6 模块，但正如 web 开发中的大多数其他问题一样，…
-
译文：2020的十大JavaScript图像处理库【渡一教育】
原文翻译自： https://blog.bitsrc.io/image-manipulation-libraries-for-javascript-187fde1ad5af，作者：Mahdhi Rezvi 。 如有翻译不准确，请多指正！ 使用JavaScript处理图像可能非常困难且繁琐，但值得庆幸的是，有许多可以使处理变得简单的库，以下是我最喜欢的不同类别的库。 如果你在其中发现有用的东西…
-
“面向对象”有三个基本特性，即”封装，继承，多态“。一般来说，三个特性都完全满足的话，我们称为“面向对象语言”，而称满足其中部分特性的语言为“基于对象语言”。 “对象系统 ”的继承特性，有三种实现方案，包括基于类（class-based）、基于原型（prototype-based）和基于元类（metaclass-based ）。 JavaScript 没有采用…
-
一、概述 每个Vue.js实例在创建时都要经过一系列初始化，例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。 同时，也会运行一些叫作生命周期钩子的函数，给在不同阶段添加自定义代码的机会。 二、生命周期 Vue.js生命周期可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段、卸载阶…
-
作为一个从未接触过实时流（直播流）的人，我之前对实时视频一直没有概念，而最近参与的项目刚好有视频监控的需求，在参与技术选型之前，我对前端实时流的展示进行了一下摸底。
-
原生javascript组件开发之Web Component实战
前言 作为一名前端工程师，我们每天都在和组件打交道，我们也许基于 react/vue 使用过很多第三方组件库，比如 ant design ， elementUI ， iView 等，或者基于它们进行过组件的二次开发，比如 业务组件 ， UI组件 等，亦或者觉得团队能力很强，可以不依赖第三方而独立开发属于自己的组件库。无论何种形式，组件开发已…
-
[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…
-
作者： Marc Backes 翻译：张全玉 从头开始创建自己的Vue.js-第3部分（构建 VDOM ） 这是从头开始创建Vue.js的系列文章的第三部分，我将在这里教您如何创建诸如Vue.js之类的反应式框架的基础。 要关注此博客文章，我建议您阅读本系列的第一部分和第二部分。 这篇文章起初可能很长，但可能不像它看起来那样…
-
最近原创文章回顾： 《了不起的 tsconfig.json 指南》 《了不起的 Webpack HMR 学习指南（含源码分析）》 《《你不知道的 Blob》番外篇》 《《你不知道的 WeakMap》番外篇》 Webpack 是前端很火的打包工具，它本…
-
在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现，而带角度的渐变就复杂很多；就好像下面这样，假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。
-
大白话简述 这一节，先对diff进行简单的描述，不会出现任何的源码，只是为了帮助大家建立一种思路，了解下 Diff 的大概内容。 1、Diff 的作用 2、Diff 的做法 3、Diff 的比较逻辑 4、简单的例子 复制代码 1. Diff 作用 Diff 的出现，就会为了减少更新量，找到最小差异部分DOM，只更新差异部分DOM就好了 …
-
酷工作丨阿里巴巴内推、高顿教育高级前端工程师、中原银行多岗位招聘
SegmentFault 思否社区致力于成为科技企业和开发者沟通的桥梁。为此特设「酷工作板块」，以便企业发布相关招聘信息，也为社区开发者提供招聘信息参考。
-
为什么讲 ReactNative JS 层渲染，重点讲 diff 算法呢？ 使用 React 写过 Web 和 ReactNative 的，能很明显的感觉到，除了组件命名不一样之后，生命周期、刷新机制等几乎是完全一样的，这也就是 facebook 所说的 “learn once, write anywhere” ，只要会写 React，就能无压力同时开发 Web 和 ReactNative。而 React 框…
-
学习vue源码（15）手写$forceUpdate,vm.$destroy方法
vm.$forceUpdate （1）作用 迫使Vue.js实例重新渲染。注意它仅仅影响实例本身以及插入插槽内容的子组件，而不是所有子组件。 （2）实现 只需要执行watcher的update方法，就可以让实例重新渲染。 Vue.js的 每一个实例都有一个watcher 。当状态发生改变时，会通知到组件级别，然后组件内部使用虚拟DOM进行更详…
-
Android 上的 WebRTC：多设备如何启用硬件编码？（一）
Badoo 和 Bumble 是海外的社交、交友约会平台与应用，于 2006 年在伦敦创立。据公开报道显示，其活跃用户达1.3 亿。 我们在Badoo和Bumble上的视频通话功能，采用的是支持 H.264 编解码标准的 WebRTC实现的。凭着以往经验，你可能会觉得这个编解码器应该可以在任何Android设备（Android 5.0及更高版本）上顺…
-
文/墨筝 前言 我们在使用webpack的时候经常会用到 webpackbar 或者 progress-bar-webpack-plugin 之类的webpack插件通过进度条等方式来展示webpack的构建进度，以提升构建过程中的反馈体验。对于不同的插件来说，它们只是进度条的UI展示形式不同而已，但最核心的webpack构建的实时进度的数据来源却是一致的，均由we…
-
前面文章已经 把 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…
-
你好，我是小桔，是一个没有感情的代码崽。 今天给大家介绍一下 Git Hooks，相信 Git 大家都在用吧，Git 除了用作版本控制，还有许多高级功能，Git Hooks 就是其中之一。 本文环境： Git 版本：2.27.0 Husky 版本：4.2.5 Node.js 版本：12.16.2…
-
在前端开发中，我们经常会遇到对文件的操作，特别是对图片的操作。在Node端，提供了file相关的接口，供我们使用。在浏览器中，Html5提供了File相关的Web Api。
-
什么是可写流 可写流是对数据流向设备的抽象，用来消费上游流过来的数据，通过可写流程序可以把数据写入设备，常见的是本地磁盘文件或者 TCP、HTTP 等网络响应。看一个之前用过的例子 process.stdin.pipe(process.stdout);复制代码 process.stdout 是一个可写流，程序把可读流 process.stdin 传过来的数据写入…
-
前言 今日早读文章由字节跳动@HcySunYang授权分享。 正文从这开始~~ TOC： effect() 和 reactive() shallowReactive() readonly() shallowReadonly() isReactive() …
-
微内核架构（Microkernel Architecture），有时也被称为插件化架构（Plug-in Architecture），是一种面向功能进行拆分的可扩展性架构，通常用于实现基于产品的应用。微内核架构模式允许你将其他应用程序功能作为…
-
Webpack 学习教程（三）： 资源处理 & devtool
点击前端充电营，关注我们 前言 上一篇文章我们介绍了webpack的安装和使用，没有看过的小伙伴可以从下面链接进入。 webpack学习教程（二）：起步 2020-06-13 为了方便小伙伴们的学习，每一章我都会把当前demo的项目代码放在百度云盘上，想要的小伙伴直接公众号…
-
软件编程有一个重要的原则是 D.R.Y（Don’t Repeat Yourself），讲的是尽量复用代码和逻辑，减少重复。组件扩展可以避免重复代码，更易于快速开发和维护。那么，扩展 Vue 组件的最佳方法是什么？ Vue 提供了不少 API 和模式来支持组件复用和扩展，你可以根据自己的目的和偏好来选择。 本文介绍几种比较常见的方法和模…
-
Github标星34K+Star，这款开源项目助你秒建Git服务
以前使用Gitlab搭建过Git服务，如果服务器配置低的话启动和访问都会特别慢。最近发现了Gogs这个开源项目，安装方便，特别轻量级，推荐给大家！
-
最近这段时间，我们每天都在关注疫情，通常都是通过这样的信息图展示出来。 来源：北京大学可视化与可视分析实验室 这种信息图跟普通的网页差别很大，无法用传统 Web 开发技术实现，叫作 数据可视化 。作为前端领域中一个几乎不用写网页的特殊分支，可视化利用计算机的图形学和图像处理技术，将数据…
-
前端面试的那些事儿（28）~ JavaScript 排序算法
数据结构和算法本身解决的是“快”和“省”的问题，即如何让代码运行得更快，如何让代码更省存储空间。所以，执行效率是算法一个非常重要的考量指标。那如何来衡量你编写的算法代码的执行效率呢？时间、空间复杂度分析。 时间复杂度 大 O 时间复杂度实际上并不具体表示代码真正的执行时间，而是表示代码执行时间随数据规…
-
前两天尤大在 vue 3.0 beta 直播中提到了一个 vite 的工具，而且还发推表示再也回不去 webpack 了, 还引来了 webpack 核心开发人员肖恩的搞笑回复, 那就让我们一起来看一下 vite 到底有啥魔力？ evernotecid://F8C40634-B31F-4F08-81FD-EE7189DF2F84/appyinxiangcom/4070474/ENResource/p1713 什么是 Vit…
-
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);//实参一定是值，即使我们写的是变量或者表达式，也是把变量或者表达式计算的结果作为值传递…
-
delete简介 MDN：delete 操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放。 这个简单的解释不禁引发了以下几个疑问： delete和内存释放有什么关系？ 从MDN的这个介绍我们可以知道，delete操作符一般是用于对象的，它是用来删除对象上的属性的；而你使用了delete操作符之后，并不是立刻…
更多内容请关注公众号【前端开发博客】每日更新
