20200508 前端开发周报

前端面试必备技巧;简明扼要聊聊 Vue3.0 的 Composition API 是啥东东;正则表达式在JS的使用;前端人应该有的网站和工具;前端宅男五一总结;如何用css绘制三角形?;JS数据类型的强制转换;聊一聊Observable和RxJS

  1. 前端面试必备技巧

    2020最全的前端面试指南,一个多月 1.8w 字的面试经验积累,凭借它最终成功入职大厂…… 今年的金三银四刚好赶上疫情,很多大公司都停止招聘甚至裁员,想跳槽的小伙伴被打的措手不及。 需求减少要求肯定随之提高,谨以此面经献给在如此艰难之时逆风而动、勇敢坚强的你~ 前言 今年问的难度和深度应该比前几年有所增...

  2. 简明扼要聊聊 Vue3.0 的 Composition API 是啥东东

    对于没太了解 Vue3.0 的同学,在看到 Composition API 时,除了看起来会有一个“高大上”的感觉,可能更多的是有点懵逼,心中不免泛起一堆疑惑,这到底是何方神圣?干了何等大事?承担了何种重任? 下面我们就一起来简明扼要聊聊,用人人都听得懂的话来阐述 Vue3.0 Composition API。 What 首先,这两单词是啥意思...

  3. 正则表达式在JS的使用

    一、写在前面 看完上一篇正则表达式的文章,应该对它的功能有了了解,现在我们看他在js中的使用 二、开始 新建正则表达式有两种方法。一种是使用字面量,以斜杠表示开始和结束。 var regex = /xyz/; 复制代码 另一种是使用 RegExp 构造函数。 var regex = new RegExp('xyz');复制代码 第一种方法在引擎编译代...

  4. 前端人应该有的网站和工具

    最近有很多初学者在后台留言说:“我是一个小白,怎么才可以快速入门前端呀?”。关于这个问题其实不太好回答,因为这个问题就好像说我是一个穷光蛋如何快速致富一样的道理。但是也不是没有办法回答你这个问题,毕...

  5. 前端宅男五一总结

    节前发沸点立了一个flag,五一不出去浪了,待在家里看书写代码,对于在职人士来说,五天的完整时间 ,还是很宝贵的 完成状况 早起游戏九连胜 达到历史最高段位钻一 中学偷偷去网吧才能早起的策略 现在依然适 看了一本产品的书 里面的求职信让我重新思考职业的热情,另外一本《增长黑客》读了一...

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

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

  7. JS数据类型的强制转换

    想要搞明白数据类型的转换,首先得清楚js有哪几种数据类型 1.数据类型 ES最新标准现共有8种数据类型,其中基本数据类型7种,引用数据类型1种 基本数据类型 Boolean 布尔值,只含有两个关键字(true,false) String 字符串 Undefined 一个声明的但未定义的值,拥有全局属性unde...

  8. 聊一聊Observable和RxJS

    Pull 和 Push 是两种用来描述数据生产者(Data Producer)与数据消费者(Data Consumer)通信的不同协议。 什么是Pull模式? 在一个Pull数据系统中,消费者Consumer决定了何时从生产者Producer接收数据,而生产者Producer本身对于何时传递数据是无感的。 比如我们最熟悉的Function,每一个JavaScript Function...

  9. JS常见简单算法排序

    冒泡排序的比较次数是 1 + 2 +3 + ... + N - 1 = N(N - 1)/2,大O表示法为O(N^2)。如果每两次比较交换一次那么冒泡排序的交换次数为 N(N - 1)/4。

  10. HTTP 的基本概念

    前言(废话) 今天同事说电话面试遇到了一些http相关的问题,在这里记录一下。(梳理完发现确实有很多遗漏的知识点) 主题 今天主要分以下五个主题 HTTP是什么 超文本传输协议 HTTP中常见字段 ...

  11. JavaScript+Canvas实现自定义画板

    最近研究了HTML5一些新的元素属性,发现确实好用,特别是里面的Canvas这个新的标签元素。官方介绍:Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以...

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

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

  13. Vue 的主要内容

    v-show 通过 css display 控制显示和隐藏的 v-if 是组件真正的渲染和销毁,不是显示和隐藏 频换切换的时候使用 v-show , 否则使用 v-if 2、v-for中key的作用 diff 算法中通过 tag 和 key 来判断是否是 sameNode ,减少渲染次数,提升渲染性能。key 必须使用的 不能是 index 和 random 。 3、v-for 和 v-i...

  14. 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 历时三年开发出的进行持久性...

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

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

  16. 将Vue组件库更换为按需加载

    我司前端团队拥有一套支撑公司业务系统的UI组件库,经过多次迭代后,组件库体积非常庞大。 组件库依赖在npm上管理,组件库以项目根目录的 index.js 作为出口导出,文件中导入了项目中所有的组件,并提供组件安装方法。 index.js import Button from "./button"; import Table from "./table&quot...

  17. 你了解JS的递归遍历吗?谈谈你的见解

    JavaScript的递归遍历会经常遇到,适当的运用递归遍历,可以提高代码性质量。 1.某些时候递归能替换for循环 我们先看一下下面2个例子。 {代码...} 运行结果: 可以看到,for循环去遍历一个数组和用递归遍历去遍历...

  18. 前端异步是什么?哪些情况下会发生异步?

    这里就不拿官方的解释来解答了,只以个人理解来回答问题,轻喷。我们知道 JavaScript 是单线程的,不像 java 等语言是多线程的,所以一般情况下,js代码是一行一行的执行的。但是某些时候需要用异步来提升性能,比如说一个网络请求需要服务端返回数据30s,js不可能一直等待服务器返回再执行其他代码,这时候js就会跳过这...

  19. 如何在 JavaScript 中创建自定义排序方法

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

  20. vue3.0实战电商系统:高解耦式mock 订单列表查询(第四天)

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

  21. 使用 JavaScript 编写 JSON 解析器

    原文地址: JSON Parser with JavaScript 原文作者: Tan Li Hau 译文出自: 掘金翻译计划 本文永久链接: github.com/xitu/gold-m… 译者: Gavin-Gong 校对者: vitoxli , Chorer 这周的 Cassidoo 的每周简讯有这么一个面试题: 写一个函数,这个函数接收一个正确的 JSON 字符串并将...

  22. CSS 中你需要知道 auto 的一切

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

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

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

  24. Node.js:记一次使用gRPC重构http服务的实践

    背景 最近在业务开发过程中,发现同时维护多个服务间的业务通信,存在较高的开发成本。在窥视了部分同僚们的代码后,发现他们普通使用了 rpc 去构建服务,所以我决定尝试使用 gRPC 重构服务。这里介绍一些项目的基本情况: http │ ├── controller │ ├── service │ ├── route ├── app.ts 复制代码 ...

  25. 深入webpack打包原理,loader和plugin的实现

    本文讨论的核心内容如下: webpack 进行打包的基本原理 如何自己实现一个 loader 和 plugin 注: 本文使用的 webpack 版本是 v4.43.0 , webpack-cli 版本是 v3.3.11 , node 版本是 v12.14.1 , npm 版本 v6.13.4 (如果你喜欢 yarn 也是可以的),演示用的 chrome 浏览器版本 81.0.4044.129(正式版本...

  26. JS逆向破解码云,曲线加快github下载速度

    github 下载速度太慢了。先用导入到码云再下载下来,然后到.git/config 修改git repo url 为原来的还是有点麻烦,那就做成一个工具吧。

  27. JS学习计划:深浅拷贝的那些事

    自己迷茫了一段时间,技术很low,想想现在勉强算年轻,必须要努力一番。所以记录下这个过程。只是一个记录自己学习的过程。 感谢掘金上的各位大神,跟着你们一路混分。 复制代码 浅拷贝 浅拷贝的属性如果是基本数据类型,拷贝的是这个基本数据类型的值;如果属性的引用类型,拷贝的是内存地址,所以如果一个对象改变...

  28. 前端面试每日 3+1 —— 第382天

    今天的知识点 (2020.05.02) —— 第382天 [html] 说说html5手势检测原理是什么? [css] 说说sroll-snap-type属性的运用场景有哪些?相关联的属性还有哪些? [js] 在DOM上同时绑定两个点击事件(一个用捕获,一个用...

  29. 高性能前端架构解决方案

    来自公众号:code秘密花园 这篇文章介绍了一些使前端应用程序加载更快并提供良好用户体验的技术。 我们将研究前端的总体架构,如何首先加载必需的资源,并最大化资源缓存的概率。 无论你的页面是否需要成为客户端应用程序,还是如何优化应用程序的渲染时间,我都不会说太多后端如何传递资源...

  30. JS解密入门——有道翻译

    扫码或搜索: 进击的Coder 发送 即可 立即永久 解锁本站全部文章 JS解密入门——有道翻译 此篇文章省略了很多基础的,例如json格式数据的提取啊。试试手,练练感觉。似乎也没啥用。 一 了解加密与解密 : 什么是加密,什么是解密? 加密:数据加密的基本过程,将原为 明文 的文件...

  31. 在 Node.js 中用 Puppeteer 实现网络爬虫

    你是否曾想要用你最喜欢的公司或网站的 API 做一个新的 App 项目,结果发现人家要么压根没有 API 支持,要么已经不对外开放了?(说的就是你,Netflix)好吧,这事儿就发生在我身上,而鉴于我是一个不达目的不罢休的人,我最终还是找到了破局的办法:网络爬虫。 网络爬虫是一种使用软件从一个网站中自动提取和收集数据...

  32. Vue 学习笔记:$attrs 和 $listeners 的用法

    学习 vueAdmin-template 这个项目时,看到两个属性 v-bind="$attrs" 和 v-on="$linteners" ,于是就这两个属性的用法作了一下深入了解,通过一个简单的 demo 测试并理解了它们的用法。 我们知道,向子组件传递数据,是通过 v-bind 子类组件定义的 props 属性完成的,这只适用于单向、两层组件之...

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

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

  34. JS夯实之执行上下文与词法环境

    JavaScript是一门解释性动态语言,但同时它也是一门充满神秘感的语言。如果要成为一名优秀的JS开发者,那么对JavaScript程序的内部执行原理要有所了解。 本文以最新的ECMA规范中的第八章节为基础,理清JavaScript的词法环境和执行上下文的相关内容。这是理解JavaScript其他概念(let/const暂时性死区、变量提升、闭包...

  35. Vue 学习笔记:v-for 循环引用组件

    前端开发过程中,需要动态添加操作面板,而操作面板可以封装成独立的组件,被父组件引用。比如这个添加收货信息的场景,父组件中可以添加多个收货地址: 要实现在父组件中动态添加组件的功能有哪些技术点呢?本文来讨论一下这个简单场景里面的技术要点。 v-for 循环创建子组件 显然,父组件应该使用 v-...

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

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

  37. React(二)-组件和数据

    一、元素和组件 const div = React.createElement( 'div',...) 这是一个React元素(d小写) const Div = ( )=>React.createElement('div',... ) 这是一个React组件(D大写) JSX文件/JS文件中一个返回 React 对象的函数就是组件,(前者用标签后者用React API) 二、类组件和函数组件 定义组件最简单的方式就是编写 ...

  38. 你不知道的CSS国际化

    我遇到过一些人,他们根本不认为CSS与国际化有关,但如果你仔细想想,国际化不仅仅是把你网站上的内容翻译成多种语言,然后就收工了。该内容的呈现方式有各种细微的差别,这些细微的差别会影响到母语人士使用您的...

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

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

  40. HTML5、CSS3完全使用手册(万字详解)

    目前HTML5和css3在各大浏览器上的普及率已经比较高,日常开发中也是经常使用,但对于这两者的知识点一直没有做一个比较详细的整理,这里我总结了HTML5和CSS3新增的特性详解和使用问题。 本篇文章预计占用三十分钟阅读,如果你已经熟练于HTML5和CSS3,阅读本文将带你回顾其中知识点遗漏补缺。如果你还没有对HTML5和CSS3...

  41. JavaScript 引擎、事件循环、任务队列

    引擎:解释并编译代码,让它变成能交给机器人运行的代码(runnable commands);单线程,负责维护任务队列,按照顺序把任务放入函数栈执行。

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

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

  43. JavaScript性能优化–创建表格

    JavaScript创建表格的方法很多。 方法1: 可以使用createElement方法来创建table,tbody,tr,td,然后使用createTextNode创建文本,最后使用appendChild来添加元素。 http://cssrain.cn/demo/cccreatetable/demo1.html 方法2: 也可以使用HTML专门的创建表格行,列的方法(insertRow(),insertCell() )。 ...

  44. 使用 Reactor 响应式编程

    Contents 1 介绍 1.1 响应式编程 1.2 Reactor 2 Spring Boot中使用Reactor 2.1 添加依赖 3 Reactor使用示例 3.1 创建操作 3.2 联合操作 ...

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

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

  46. 前端架构之 JAMStack

    JAMStack(JAM 代表JavaScript,API 和Markup)是一种使用Static Site Generators(SSG) 技术、不依赖 web Server 的前端架构。

  47. Node.js理论实践之《Koa原理浅析》

    学习Koa框架之前,不得不提到Express。 Express 是一个基于Node.js平台的极简、灵活的 web 应用开发框架,主要基于 Connect 中间件,并且自身封装了路由、视图处理等功能,使用人数众多。 Koa 相对更为年轻,是 Express 原班人马基于 ES6 异步流程控制重新开发的框架, 框架自身不包含任何中间件,很多功能需要借...

  48. 21.JavaScript实现无缝轮播图

    JavaScript实现无缝轮播图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &...

  49. 一段超级简单的js代码了解执行上下文,执行栈,变量对象和作用域链

    var a = 'hello' function test() { console.log(a) } test() 复制代码 解析过程 全局代码 创建阶段 创建全局执行上下文 全局执行上下文 = { } 复制代码 预处理阶段 创建全局的变量对象,我们给变量对象取个名字叫做 VO(G) 变量对象里面有未赋值的变量,函数,this对象 全局执行上下文 = { ...

  50. 初识vue ——总结

    Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

  51. 《JavaScript 20 年》中文版(二):创立标准

    上篇文章中,我们已经详述了 JavaScript 的诞生始末与其最早的语言特性。在它开始流行后,绕不开的自然就是语言的标准化了。这次我们将讲述历史上 TC39 委员会与 ECMA-262 标准建立背后的故事,看看一门编程语言的行业标准,是如何在当年商业巨头的角力之中形成的。 关于本章节 本章节覆盖的历史从 1996 年...

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

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

  53. 25.JavaScript执行上下文

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

  54. 动图学CS: 有用的 Git 命令(上)

    尽管 Git 是一个非常强大的工具,但是我相信大部分同学有时候学起 Git 来,感觉很难搞~ 笔者总是习惯于在脑海中重现学习的知识,Git 也一样:当我们执行了切换分支命令,分支之间是如何交互的?又是如何影响历史...

  55. javascript与众不同的this

    一直以来都知道js的this让初学者很困惑, 但由于在学angularjs的时候潘老师早早的就教我们写代码时先定义self = this , 然后通过操作self, 再之后学习angular又一直使用的箭头函数, 所以js的this用起来和java的用...

  56. 彻底理解JS的内存机制

    先进先出的数据结构,JS引擎的时间循环(Event Loop)的基础结构 JS中变量的存放 基本类型:基本类型都是保存在栈结构中,这些类型在内存中占有固定的大小空间,通过按值访问,ES6有6种基本类型,undefined、null、boolean、number、string、symbol,ES9新增了bigInt 引用类型:保存在堆内存中,因为这种值的大小...

  57. Vue(2.x 和 3.0) 双向绑定原理及实现(Object.defineProperty 和 Proxy)以及常见错误区分

    vue实现双向绑定原理,主要是利用Object.defineProperty 来给实例data的属性添加 setter和getter. 并通过发布订阅模式(一对多的依赖关系,当状态发生改变,它的所有依赖都将被通知)来实现响应。 这个环节中包含了三个部分 Observer 用来监听拦截data的属性为监察者。 Dep用来添加订阅者,为订阅器 ...

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

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

  59. 23.JavaScript原型和原型链

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

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

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