20200507 前端开发日报

面试官一脸邪乎的问:一个 TCP 连接能发多少个 HTTP 请求?;React hooks + Mobx + typescript + EggJs从0到1打造一款仿网易云音乐APP(一);D3.js 力导向图的显示优化;前端Vue项目实现mock数据方式;效率噌噌噌 – 搭建高效好用的前端开发环境(外设篇);如何用css绘制三角形?;利用 Canvas 实现将一个视频字符化(可以跳舞的字符);源码实现系列之vue-router

  1. 面试官一脸邪乎的问:一个 TCP 连接能发多少个 HTTP 请求?

    一道经典的面试题是从 URL 在浏览器被被输入到页面展现的过程中发生了什么,大多数回答都是说请求响应之后 DOM 怎么被构建,被绘制出来。但是你有没有想过,收到的 HTML 如果包含几十个图片标签,这些图片是以什...

  2. React hooks + Mobx + typescript + EggJs从0到1打造一款仿网易云音乐APP(一)

    该项目会以 React 全家桶 (会使用 16.8 最新 API 及 hooks) 以及 mobx 数据流方案为基础打造的一款高质量的移动端音乐类 WebApp 。 涉及的技术栈主要有: react v16.8 全家桶 (react,react-router) : 用于构建用户界面的 MVVM 框架 mobx 前端数据流方案 immutable: Facebook 历时三年开发出的进行持久性...

  3. D3.js 力导向图的显示优化

    作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有  ECharts 、 Chart.js ,这两个库功能也很强大,但是有一个共同特点是 封装层次高 ,留给开发者可设计和控制的部分太少。和 EChart、Chart.js 等相比,D3.js**  的相对来说自由度会高很多,得益于 D3.js **中的 SVG 画图对事件处理器的支...

  4. 前端vue项目实现mock数据方式

    前后端分离开发已成大势所趋,基本上大部分公司的开发模式都是如此,那如何自己本地实现一个数据mock呢?当然你也可以使用在线的工具,比如 easymock 也可以实现mock数据,但是如果追求稳定性,还是本地搭一套环境吧。下面我介绍的是使用了vue-cli本身自带的功能实现mock 数据。 初始化项目 (1)使用vue-cli初始...

  5. 效率噌噌噌 – 搭建高效好用的前端开发环境(外设篇)

    这几天换设备,就跟搬新家似的,难免又要布置一番,加上疫情爆发,凸显了在家办公的重要性,故借此机会做个分享与记录。 系列篇幅较长,我会分次更新。 本文环境基于 Mac 系统,分享我的外设和常用的软件、配置,...

  6. 如何用css绘制三角形?

    首先,我们知道用边框实现一个三角形很简单,直接上代码上图。 {代码...} {代码...} 可以看到用样式的border-width来实现一个三角形很简单,但是本文会从原理上来讲解,为什么会这样展示。 {代码...} 可以看到,...

  7. 利用 canvas 实现将一个视频字符化(可以跳舞的字符)

    对标题不是很理解?先看效果( 请在 PC 端看效果 ),地址: http://www.liguixing.com/lgxpc/video-to-text.html 之前在抖音上看到有人发的视频,是一个极乐净土的舞蹈视频,被做成了一堆字母在跳舞的效果,感觉新鲜。因为自己有一些 PS 和 canvas 的基础,大概明白其中的实现原理,所以打算自己也尝试一下,果然...

  8. 源码实现系列之vue-router

    这个月会实现一下 Vue , Vuex , vue-router 。我会以 倒推 的模式边开发边写文章。话不多说开始跟着我一起撸。 仓库地址 本文只是实现了一个基础版本的 vue-router .本文所写的代码,不会每个地方都做异常判断。实现一个能够体现 vue-router 核心逻辑即可。 我大致捋了下 vue-router 的流程图如下: ...

  9. 万事不求人,一篇教你js语句从入门到入土

    语句通常使用一个或多个关键字完成特定任务,可以很简单,也可以很复杂。这篇文章会细微的讲解语句,有不足的可以指出,多多交流 认为有用的点个赞鼓励下吧 if语句 if (condition) statement1 else statement2 复制代码 大多数编程语言最常用的语句就是 if ,其中condition(条件)可以是任意表达式,如果对condit...

  10. vue3.0实战从0到1实战电商管理系统(第三天)

    任何事情都需要时间的沉淀,技术也不例外,今天编写Vue3.0系列的章节文章,只是希望能够比别人更早的去尝鲜一些新的技术,毕竟Vue3.0已经Beta版本了,所以里正式版本也不远了,提前去学习和了解,我们就会比别人有更多的时间去充分理解Vue3.0的特性,只有当你真正理解一门技术的时候,才能够正确的判定它是否合适、是否...

  11. 30分钟,带你实现一个符合规范的 Promise(长文慎入)

    关于 Promise 原理解析的优秀文章,在掘金上已经有非常多了。但是笔者总是处在 看了就会,一写就废 的状态,这是笔者写这篇文章的目的,为了理一下 Promise 的编写思路,从零开始手写一波代码,同时也方便自己日后回顾。 Promise 的作用 Promise 是 JavaScript 异步编程的一种流行解决方案,它的出现是为了解决 回...

  12. 基于 HTML5 的 PID-进料系统可视化界面

    前言 随着 工业物联网  和  互联网技术  的普及和发展,人工填料的方式已经逐渐被机械设备取代。工业厂商减小误操作、提升设备安全以及追求高效率等制造特点对设备的要求愈加高标准、严要求。同时机械生产以后还需遵从整个项目流程的规范管理,如何实行管理与交接也是一大严峻的挑战。因此,整个生产...

  13. 25.JavaScript执行上下文

    JavaScript执行上下文 1.this指向 1).直接调用函数,this指向全局对象 2).在函数外,this指向全局对象 3).通过对象调用或new一个函数,this指向调用的对象或新对象 2.使用new关键字生成一个对象的过程: 1).确定所有形参值以及特殊变量arguments 2).确定函数中通过var声明的变量,将它们的值设置为undefin...

  14. Electron + Vue开发一款音乐播放器

    劳动节放假了,给大家分享一个轻松的开源项目,一个基于 Electron + Vue 开发的音乐软件。项目的一大特色就是多平台搜索歌曲,并支持下载功能(有些平台的vip歌曲也可以哦!)。 二、开发环境搭建 2.1 前提 VSCode 2.2 本地构建 下载项目 项目地址: github.com/lyswhut/lx-… 直接下载项目源码包,如...

  15. 23.JavaScript原型和原型链

    1.原型:prototype,所有的 函数 都有一个属性prototype,称之为函数原型 默认情况下, prototype是一个普通的Object对象 默认情况下, prototype中有一个属性constructor,它也是一个对象,它指向构造函数本身 function Test(){} Test.prototype:函数Test的原型 Test.prototype.constructor:函数Test的...

  16. 前端定级赛,你到底是青铜还是王者(前端进阶之路)

    召唤师们,欢迎来到英雄联盟。大家是不是还在为上分遥遥无期而苦恼呢,不要慌,本代练为你们解忧。 这次我们会先通过定级赛,让大家对自己的能力有一个认知,然后通过不同的套餐,帮助大家上分,希望大家可以早日上王者,走向人生巅峰。 说人话 通过对前端知识进行一个评级,确定现在阶段,然后提供清晰的学习路...

  17. Typescript中以变量方式传递类

    最近尝试用TypeScript写一个工具库,需要实现这样一个场景: 声明一个抽象类Parent 声明一组子类ChildA、ChildB继承这个Parent,实现它的抽象方法 实现一个方法,根据参数返回对应的子类 用拿到的子类创建实例 代...

  18. 从精通JS到golang入门 – 基础入门

    指南的使用 欢迎来到Go编程语言指南。本指南涵盖了该语言的大部分重要特性,主要包括: 欢迎! 学习如何使用本指南:包括如何在不同的课程之间切换,以及如何运行代码。 复制代码 基础 一开始,将学习关于语言的所有基础内容。 定义变量,调用函数,以及在您学习下一课之前所需要了解的全部内容。 包,变量...

  19. nest.js + vue实现用户组织权限系统

    前端:Vue + ElementUi + TypeScript 后端:nest.js + mysql + redis 演示地址 用户组织管理系统(演示地址) github 功能设计 数据库设计 用户实体 @Entity() export class User { @PrimaryGeneratedColumn() id: number; @Column({ length: 500 }) name: string; @Column({...

  20. Vue keep-alive 使用及缓存机制详解

    在VUE项目中,有些组件或者页面没必要多次渲染,所以需要将部分组件有条件的在内存中进行"持久化",不过这里的持久化不是简单的数据持久化,而是整个组件(包括数据和视图)的持久化,刚好VUE提供了这个内置组件来完成这件事情。 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽...

  21. JS变量赋值

    一、基本数据类型: Number, String等都是按值传递 var a = 10 function add(num){ num+=10 } add(a) console.log(a) 最后输出a时,仍然是10,说明a与函数内部的num互不干扰。其实此时可以把命名参数看成是局部参数,函数运行结束,它也随之销毁。而它是按值传递的,复制了内存中的一份值给num。所以内部对num的...

  22. 2020 十大 JavaScript 图像处理库

    用 JavaScript 处理图像可能非常困难且繁琐。幸运的是,有许多库可以使这事变得非常简单。以下是我最喜欢的不同类别的库。 如果你发现有用的东西,尝试将其封装成所选框架的组件。通过这种方式,你将拥有一个具备声明式 API 的可复用组件,并随时可用。 1. Pica 此插件可助你减小大图的上传大小,从而节省上传时间...

  23. 这些算法,有助于你理解JS 中相等和全等操作符比较规则

    点赞再看,养成习惯本文 GitHub [链接] 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

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

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