Vue 实现弹幕效果；转行前端一年大概是什么水平；JDK11的新特性:HTTP API和reactive streams；D3.js库-3-深入理解D3中的update、enter、exit；图解 Promise 实现原理（三）—— Promise 原型方法实现；JavaScript（七）：Generator；D3.js库-4-选择、删除、插入元素；浅谈前端中的圈复杂度
-
这两天又看到有人问 Vue 如何做弹幕效果。 正好我过年的时候做了个活动，其中用户可以摇签，然后 C 位飘屏展示。 Vue 版本效果地址：[链接]网上原生版本：[链接] 实现原理 弹幕动画效果 动画效果其实很简单，从右…
-
刚入行那会儿，整个小团队就我一只前端。我没有参考坐标系，不知道自己水平是什么程度，不知道大家是什么水平，更不知道就业市场对一年工作经验的要求是怎样的。那种感觉，就像是高三了，全班只有自己一个。模拟…
-
JDK11的新特性:HTTP API和reactive streams
reactive streams的介绍大家可以参考reactive stream协议详解,使用reactive streams的目的就是为了解决发送者和消费者之间的通信问题，发送者不会发送超出消费者能力的信息。
-
D3.js库-3-深入理解D3中的update、enter、exit
Update、Enter、Exit是D3.js中十分重要且关键的3个概念。它们三主要处理的是 数据集个数和选择集个数 之间的匹配问题。 图解三者关系 上图的解释： 绿色：如果给定的数据data和节点Nodes中的数据相等，则进行updata操作 蓝色：如果数组中个数多余节点中的元素个数，进行 update 和 e…
-
图解 Promise 实现原理（三）—— Promise 原型方法实现
本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/u8wuBwLpczkWCHx9TDt4Nw 作者：Morrain Promise 是异步编程的一种解决方案，它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。更多关于 Promise 的介绍请参考阮一峰老师的 ES6入门 之 Promise 对…
-
众所周知，传统的JavaScript异步的实现是通过回调函数来实现的，但是这种方式有两个明显的缺陷： 1.缺乏可信任性。例如我们发起ajax请求的时候是把回调函数交给第三方进行处理，期待它能执行我们的回调函数，实现正确的功能 2.缺乏顺序性。众多回调函数嵌套使用，执行的顺序不符合我们大脑常规的思维逻辑，回调逻辑嵌套…
-
本文中介绍的是如何在D3.js库中 选择、插入和删除元素 选择元素 在之前的文章 D3.js库-2-选择元素和绑定数据 中，有介绍过D3.js中的两种选择数据的方法，本部分为重复内容，温故而知新： d3.select()：选择所有指定元素的第一个 d3.selectAll()：选择指定元素的全部 两个函数的返回集都…
-
DevUI是一支兼具设计视角和工程视角的团队，服务于华为云 DevCloud 平台和华为内部数个中后台系统，服务于设计师和前端工程师。 官方网站： devui.design Ng组件库： ng-devui （欢迎Star） 引言 重构，是我们开发过程中不可避免需要进行的一项工作。重构代码，以适配当前模块设计之初未考虑到的多样化场景…
-
因为做过node，所以被问到koa中间件实现原理的问题，整理一下。 koa的执行顺序是这样的： const middleware = async function (ctx, next) { console.log(1); await next(); console.log(6); }; const middleware2 = async function (ctx, next) { console.log(2); await next(); console….
-
原文链接： How To Add a Health Check to Your Node.js App 原文作者：Ali Kamalizade 仓库地址： github 快速检测应用程序的运行情况而无需深挖代码。 随着应用程序用户量的增多，软件的可用性将面临巨大的考验。让我们来看一看为什么应用程序需要高可用性。 我们为什么需要应用程序的高…
-
Go Web 小技巧（四）：在单个仓库中支持多个 go mod 模块
背景 最近在更新内部的工具库的时候发现，工具仓库中其实包含了很多的模块，但是现在的版本发布都是合并在在一起发的，为了管理更加细致和直观，所以想要在一个仓库中实现实现多个模块的发布。 需求 单个仓库中包含多个 go module 模块 版本发布可以根据模块来发版，而不是整个仓库进行…
-
前言 通过插件我们可以扩展 webpack ，在合适的时机通过 Webpack 提供的 API 改变输出结果，使 webpack 可以执行更广泛的任务，拥有更强的构建能力。 本文将尝试探索 webpack 插件的工作流程，进而去揭秘它的工作原理。同时需要你对 webpack 底层和构建流程的一些东西有一定的了解。 想要了解 webpack 的插件…
-
无序的数据集合 键值对的集合 写法 let obj = { ‘name’: ‘frank’, ‘age’: 18 } let obj = new Object({‘name’: ‘frank’}) 复制代码 键值 ‘name’ 为键 ‘frank’ 为值 ‘age’ ’18’ 键名是字符串，不是标识符，可以包含任意字符 就算引号省略了，键名也还是字符串（重要） …
-
该图片由 chulmin park 在 Pixabay 上发布 1. 前言 我有时候会对一些科学的设置进行改动，然后会发现自家的 Git, npm,Yarn 运行会报类似如下这些错误： unable to access ‘…’ Couldn’t resolve host ‘…’ FetchError ‘…’ connect ECONNREFUSED ‘…’ 有时候确实是网络差，但大部…
-
最近看到越来越多的面试题都是手写算法或者手撕代码实现某些功能，我也饶有兴趣做起来，但发现有一个题，js实现进制转换网上的答案实在太少，而这一块部分同学的基础也比较哦啊弱，因此手写实现一个，帮你撸清进制间的转换 利用内置函数实现 说到进制转换，不得不首先说下js中的两个内置方法 toString 和 parseInt …
-
前端网红框架的插件机制全梳理（axios、koa、redux、vuex）
前言 前端中的库很多，开发这些库的作者会尽可能的覆盖到大家在业务中千奇百怪的需求，但是总有无法预料到的，所以优秀的库就需要提供一种机制，让开发者可以干预插件中间的一些环节，从而完成自己的一些需求。 本文将从 koa 、 axios 、 vuex 和 redux 的实现来教你怎么编写属于自己的插件机制。 …
-
JavaScript基于原型链的继承,访问一个对象的属性时,如果找不到,则会顺着原型链向上层查找,以此类推,直到找不到为止 每个构造器都有一个 prototype 属性,代表该构造函数的原型对象 prototype 有个 constructor 属性,指向它的构造函数,构造函数的 constructor 指向自身 实例化对象有个 __proto__ …
-
数据响应式是指我们在 JS 中修改页面中的数据时，修改了的数据会实时响应到/出现在页面上。 1. 数据响应式的实现 在了解数据响应式如何实现之前，我们需要了解一些函数。 getter 是一个获取某个特点属性的值的方法。 setter 是一个设定某个属性的值的方法。 Obejct.defineProperty 函数让我们能够精确地添加或修改…
-
我们以往部署Nuxt到服务器需要pm2进行进程管理，还需要考虑到服务器的性能，负载均衡、网络安全等一系列运维问题。往往我们做的却不是最优的，那么为什么我们不将它交给专业运维的人去配置呢？ 我们只去关心应用层面的业务逻辑，去关心用户的交互体验，这才是我们该做的事~ 所以，云开发它来了！！它可以很完美的帮…
-
JavaScript数组中一些实用的方法(forEach,map,filter,find)
前言 您将在本文中学习到 for循环与forEach/map/filter/find的一个使用对比 同for循环性能的一个比较 是不是一提到循环,就条件反射的只知道for循环呢,那么本文就是你想要知道的 需求场景: 假若后端返回这么一个json数据格式,如下所示,我们需要拿到返回对象中的数组项,或者根据某些指定的条件，取特定…
-
相信很多初学JS的多伙伴对原型和原型链懵懵懂懂很乱，尤其是__proto__和prototype这两个属性搞不清 创建对象的方式 第一种：字面量方式 var person = { name: ‘张三’ } var person = new Object({name:’asdf’}) 复制代码 第二种：构造函数方式 var Person = function () { this.name = ‘张三’ } var p…
-
建议PC端观看，移动端代码高亮错乱 我们在《响应式对象》一章简单介绍了 initProps 会调用 defineReactive 来设置响应式对象。本章来深入介绍 props 相关概念~ 1. 规范化 在初始化 props 之前，首先会对 props 做一次 normalize ，它发生在 mergeOptions 的时候，在 src/core/util/options.js 中： export f…
-
1. 什么是异步 当我们在开发程序时往往需要管理现在运行的代码和将来要运行的代码之中产生的时间间隙，比如当我们等待程序用户输入、通过网络请求或发送数据等待返回或者固定时间间隙执行重复任务时。 事实上，程序中现在运行的部分和将来运行的部分之间的关系就是异步编程的核心。 2. Javascript事件循环 …
-
来源：twitter 作用：Milos 译者：前端小智 点赞再看，养成习惯 本文 GitHub https://github.com/qq44924588… 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。 为了保证的可读性，本文采用意译而非直…
-
浅拷贝只是拷贝了对象(引用类型)的指针，在修改对象时会影响到原来对象（基础类型不会影响） 深拷贝就是为了弥补浅拷贝的不足，说白了就是遇到对象或者数组时进行递归，将他们拆分成基础类型，这样就实现互不影响了。话不多说，直接撸 function deepClone(result,target){ //判断是否为数组 result = Array.is…
-
写在开头 什么是Sketch? 什么场景会需要智能生成代码？ 智能化开发,生成代码的原理是什么？ 什么是Sketch插件，如何开发？（请看公众号第二条，京东凹凸实验室的文章，开发Sketch插件的实践） 带着这些问题，来阅…
-
前段时间写了一篇 前端vue项目实现mock数据方式 的文章，主要是在vue项目里使用mock数据，数据和项目耦合在一起，不太优雅，作为一个有追求的前端，怎么能容忍这种方法呢？特以此篇，记录利用koa2搭建服务端，提供mock数据的方法。 初始化vue项目 这里以vue项目为主，当然别的类型项目依然可以使用这种mock数据的…
-
作者最近遇到了一个有趣的问题,我们都知道文件读取有两种类型 fs.readFileSync(); //同步读取 fs.readFile(); //异步读取 复制代码 而Promise 是异步编程的一种解决方案, 那么我们能否封装一个Promise版本的 readFile呢? 引子 我们来看看阮一峰老师关于javascript是单线程的解释 链接： www.ruanyifeng.com/b…
-
Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 状态管理模式 一个状态自管理应用包含以下几个部分： state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actions，响应在 …
-
基于 Spring Boot 2.0 的实践： WebFlux 集成 MongoDB
1、理论知识 Spring Boot 2.0 – WebFlux framework 2、基于 Spring Boot 2.0 的实践 ① 在 docker 上运行 MongoDB 首先，获取 MongoDB 的镜像： {代码…} 然后启动 MongoDB 容器 {代码…} ② 构建 Spring Boot 2….
-
目前大家常用的webpack打包ts主要为两种方案： ts-loader：将ts转为js，再使用babel将js转为低版本js； @babel/preset-typescript：它是直接移除TypeScript，转为JS，这使得它的编译速度飞快,并且只需要管理Babel一个编译器就行了。 二、方案对比 首先我们需要安装 webpack、webpack-cli、typescri…
-
继承是面向对象语言的基础概念，一般OO语言支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。ECMAScript中函数没有签名，因此无法实现接口继承。ECMAScript只支持实现继承，而其实现继承主要是靠原型链来实现。 一、原型链 原型链作为实现继承的主要方法，其基本思想是利…
-
网上很多手写Promise。根据自己的理解，也写了一份，晒出来希望能被大家指正。也给自己一个梳理的过程。初学者要辩证的看这个文档，你需要对原生Promise很熟悉。 代码其实非常简单，不到100行代码，主要是充分了解原生Promise都能做什么，有什么特征。在根据这些功能特征列出模拟Promise的需求，问题就解决了一大半了…
-
现在的前端应用很多都是单页应用。路由对于单页应用来说，是一个重要的组成部分。本系列文章将讲解前端路由的实现原理。这是系列文章的第三篇：React-Router源码解析。
-
RxJS 介绍 Rx（ReactiveX）是一种用来管理事件序列的理想方法，提供了一套完整的 API，它的设计思想组合了观察者模式，迭代器模式和函数式编程。响应式编程在各个编程语言中都有对应的实现，应用较为广泛的是 RxJava 以及 RxJS。 RxJS 是基于 ReactiveX 实现的 JavaScript 版本的库，它使编写异步或基…
-
ES6解构：es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称之为解构。 解构赋值是对赋值运算符的扩展。 他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。 解构模型 在解构中，有下面两部分参与…
-
友情提示：写此文章是2020-05-16日，遇到的问题可能随着后续升级消失。祝vue越来越好。 安装&版本信息 我先列一下自己的版本信息吧： @vue/cli 4.3.1 node v12.16.3 yarn 1.10.1 安装过程 vue create xxxx // 进行你自己的配置 cd xxxx //进入你刚刚的项目 vue add vue-next // 配置vue 3! // 如果你…
-
管理系统模版 前言 一套管理系统基础模版，提供了些基础功能（包含：系统用户，菜单，权限，调度任务，常量，数据字典等功能） 方便开发人员专注于业务功能开发。 项目前后端分离，前端采用 vue+element-ui，后端…
-
闭包这个东西，很有意思，不管在什么编程语言中，我总能遇到闭包这个玩意(实际是 接触的语言少，运气不好)，所以啊，闭包这个小可爱，并不是某一种编程语言特有的，就像变量、函数、作用域这些，在几乎所有编程语言中都有存在；但，在不同的编程语言中，这个小可爱的设计理念和实现逻辑又有所不同，所以想要更好的理解闭…
-
@ 我们面试的时候经常会问到事件循环，也就是event loop。很多时候我们都是一脸懵，我们通常会背关于事件循环的面试题，讲给面试官的时候自己都不知道自己在讲什么，可能面试官也不太了解事件循环，只是看别人都这么问。那么，仔细了解一下事件循环吧，对以后的编程真的会有帮助的。 1.为什么js是单线程？ js作…
-
避免请求发送者与接收者耦合在一起，让多个对象都有可能接收请求，将这些对象连接成一条链，并且沿着这条链传递请求，直到有对象处理它为止。 上图就是职责链模式的形象表示。 场景 现实工作中的场景: 例子1: 假设一个团队有 产品+设计+前端+后端+测试 ，并且规定每次任务都要从产品开始接入，不能…
-
这个项目最开始建立的是2016年的时候，如今已经过去了4年多，时光匆匆，如今 TS 已经流行起来，并且自己已经在 SSR 方面实践颇多，所以就花了半天的时间使用 Genesis 写了一个完整的 Vue SSR 的demo。 快速开发 # 开发环境启动 npm run dev # 打包生产环境代码 npm run build # 生产环境运行 npm run start 复制代码…
-
Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象 2.作用 1、主要用于异步计算。 2…
更多内容请关注公众号【前端开发博客】每日更新
