20200108 前端开发日报

2020年了,12道高频 JavaScript 手写面试题及答案;Vue 之 Mixins;Vue.js 中的片段;6.用canvas绘制漫天飞舞的雪花1;Vue3中不止composition-api,其他的提案(RFC)也很精彩;基于 HTML5 WebGL 与 WebVR 3D 虚实现实的可视化培训系统;前端面试基础问题梳理;Go:如何解析 JSON 数据?

  1. 2020年了,12道高频 JavaScript 手写面试题及答案 防抖函数原理 : 在事件被触发n秒后在执行回调,如果在这n秒内又被触发,则重新计时。 那么与节流函数的区别直接看这个动画实现即可。 手写简化版 //防抖函数 const debounce = (fn,delay)=>{ let timer = null; return (…args)=>{ clearTimeout(timer); timer = setTi…
  2. Vue 之 MixinsMixins是一种分发Vue组件中可复用功能的非常灵活的一种方式什么时候使用Mixins? 页面的风格不用,但是执行的方法和需要的数据类似,此时应该提取出公共部分// mixin.js {代码…} // modal.vue// 将mixin引入该组…
  3. Vue.js 中的片段作者:Nwose Lotanna翻译:疯狂的技术宅 原文:[链接] 未经允许严禁转载 在本文中将会给你介绍一个令人兴奋的概念,它将帮你精通 Vue.js 。 在 Vue 中实现可访问性 为了实现 Web 上的可访问性,你需要设计每个人…
  4. 6.用canvas绘制漫天飞舞的雪花11.首先我们创建一个canvas并将背景涂黑将00坐标映射到正中间后,通过以前讲过的旋转画布的方法,可以绘制出简单的六个主干线和顶端圆。
  5. Vue3中不止composition-api,其他的提案(RFC)也很精彩 最近一段时间,Vue3带来的新能力composition-api带来了比较大的轰动,虽然是灵感是源React Hook,但是在很多方面却超越了它。但是除了composition-api,其他的改动却比较少有人讨论,本篇文章就由 vuejs/rfcs 这个仓库来看看其他比较让人振奋的RFC。 RFC其实就是(Request For Comments)征求修正意见书,它不代表这…
  6. 基于 HTML5 WebGL 与 WebVR 3D 虚实现实的可视化培训系统2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级的发展趋势。本文所讲的 VR 是…
  7. 前端面试基础问题梳理 HTML Web Worker 特点 同源限制:Worker 线程的脚本文件必须和主线程脚本文件同源 DOM 限制,无法获取 document window ,可以获取 navigator 和 location 通信限制:无法与主线程直接通信,必须通过消息完成 脚本限制:无法执行 alert confirm 函数,但是可以发送 ajax 请求 文件限制:无法读取本地文件,…
  8. Go:如何解析 JSON 数据? 概述 最近掉进需求坑了,刚爬上来,评估排期出现了严重问题,下面三张图很符合当时的心境。 谈需求 估排期 开始干 为啥会这样,我简单总结了下: 与第三方对接。 …
  9. JavaScript Class 完全指南 持续进步的同学都关注了“1024译站” 这是1024 译站的第 48 篇文章 作者:Dmitri Pavlutin 来源:dmitripavlutin.com 翻译:大道至简 JavaScript 使用原型继承:每个对象都从原型对象继承属性和方法。 Java 或 Swift 等语言中作为创建对象的蓝图的传统 Class,…
  10. React团队的技术准则我React团队工作的这段时间,很幸运能够看见 Jordan、Sebastian、Sophie 和其他团队成员是如何解决问题的。在本文中,我会把从他们身上学到的,浓缩为一篇较高层次的技术准则。这些准则未必详细。它们都是我对Rea…
  11. 基于HTML5和WebGL的碰撞测试这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Animate”就能让中间的那一个图元单独绕着某一个…
  12. 未来有望干掉 Python 和 JavaScript 的编程语言 本文最初发表 Hacker Noon 博客,经原作者 Richard Kenneth Eng 授权,InfoQ 中文站翻译并分享。 导读:Python 和 JavaScript 是两门非常有影响力的编程语言,二者都是我们在打造跨平台应用时会用到的主流语言。由于 Python 和 JavaScript 都是脚本语言,因此它们有很多共同的特性,都需要解释器来运行,都是动态类型…
  13. Babel 的工程化实现 Babel 是一款将未来的 JavaScript 语法编译成过去语法的 Node.js 工具。本文从 2019 年 11 月的 master 分支源码入手,介绍 Babel 在解决这类问题时是如何划分模块。 Babel 的模块划分 其中 babel-loader 隶属于 webpack,不在 Babel 主仓库。 框架层 常见的编译器 常见的解析器有 acorn、@babel/p…
  14. 使用 Hyperf 框架的 websocket 客户端和服务端,完成消息推送公司原有的业务消息推送是靠前端 ajax 轮眉请求后端接口完成的。然后我新来的,让我改成 websocket 双向通信的来做消息推送。 业务场景 => PC 端浏览器打开后台系统后,如果有业务订单,然后时时推送到 PC 端…
  15. 一道不一样的前端架构师最终面试题 【实用系列】本次写作来源于一次面试,前端架构师岗位,最后面试官临时给我掏出了一道比较少见的面试题 ,终究斩获offer ,虽然这道题并不难,但是考察的东西挺有趣,加上近期有看到前端防御性编程、优雅处理前端错误的文章,…
  16. 深入聊聊 js 中的 "+" 操作符规则 做前端开发的朋友应该都知道,js是一种弱类型的语言,这是我个人喜欢特别喜欢它的一个点,可能跟自己刚学编程的时候学的是java有关,总觉得强类型的语言约束太多。 但弱类型的语言也有个坏处,如果吃不透,有时候就会自己给自己挖坑。在js其中,"+" 号就特别需要注意,因为它就是典型的弱类型计算,存在隐性的…
  17. webpack打包原理 ? 看完这篇你就懂了前言 [实践系列] 主要是让我们通过实践去加深对一些原理的理解。 [实践系列]前端路由 [实践系列]Babel 原理 [实践系列]实践这一次,彻底搞懂浏览器缓存机制 [实践系列]你能手写一个 Promise 吗?Yes I promise。 …
  18. Oracle 开源 WebAssembly 引擎 GraalWasm 近日 Oracle 开源了其在 GraalVM 中实现的 WebAssembly 引擎 GraalWasm,开发团队介绍,GraalWasm 当前实现了 WebAssembly MVP(最小可行产品)规范,并且可以以二进制格式运行 WebAssembly 程序,该程序是由诸如 Emscripten 之类的编译器后端生成的。 支持 WebAssembly 扩展了 GraalVM 与其它支持的语言一起…
  19. 前端编译原理浅析及应用场景(Babel、PostCSS)分析 本文第一部分主要以一个超简化的编译器实现来理解编译的基本原理。 第二部分我们会对早期的5to6以及Babel、PostCSS的工作流程进行分析,来观察编译原理是如何运用在其上的。 本文3400余字 阅读大概需要15分钟,阅读收益: 理解基本的编译原理 理解Babel的工作流程,通过分析5to6和Babel v7 理解Babel本质 …
  20. 《前端每日实战》第171号作品:用纯 CSS 绘制一朵美丽的雪花昨夜北京下了大雪,让我们用 CSS 绘制一朵雪花,迎接这洁白美好的世界吧! 一、效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 [链接] 二、源代码下载 每日前端实战系列的全部源…
  21. JS:数组索引的有效范围 ECMAScript® 2019 6.1.7 The Object Type 一节引入了数组索引范围的概念。 An integer index is a String-valued property key that is a canonical numeric String (see 7.1.16) and whose numeric value is either +0 or a positive integer ≤ 2 – 1. An array index is an integer index whose numeric value …
  22. react-hooks toolkitReact hooks 发布于 React V16.8.0,想了解 react-hooks 基本概念的同学可以参考 官方文档,想深入了解 useEffect 的同学可以看一下 Dan Abramov 写的 A complete guide to useEffect,对于 react-hooks 的 rules…
  23. HTML5 与 CSS3 基础语法自学教程(二十五) 本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注,第一时间看文章! 导读:本小节主要讲解 CSS 中的结构伪类选择器的内容,其中包含了结构伪类选择器的概念以及各个结构伪类选择器的用法。虽然结构伪类选择器不一定要和表格元素配合使用,但在表格元素中使用结构伪类是最为常见的应用…
  24. 从0搭建一个自己的前端脚手架 下大雪了~ 前言 上篇文章只是简单的说了下前端脚手架的代码,和实现思路,最近又增加了部分的功能,这次就把上篇文章加上这次的进行一个统一的描述,最近看其他人的掘金文章,发现只有大白话才是最好的,能让人迅速理解的的语言,那么这次,就用大白话来进行写一个前端脚手架。 开始 什么是前端脚手架 1.是什…
  25. mac如何运行VUE项目 大家好,我是灰大狼。 最近在做一个前后端分离的项目,前端用的是vue,由于以前没有接触过,所以今天初步学习了下vue,vue我就不介绍了,这里主要给大家分享的是vue项目如何运行,由于我用的是mac,跟windows安装环境不太一样,这里主要说的是mac下如何安装环境以及运行一个vue项目。 安装node.js 下载 进入…

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流