20200112 前端开发周报

2020年了,12道高频 JavaScript 手写面试题及答案;Vue3 尝鲜;人工智能时代,web 前端能做什么?;Vue中的组件从初始化到挂载经历了什么;5个提升你JS编码水平的实例;Vue 之 Mixins;如何优雅的使用Web Worker;6.用Canvas绘制漫天飞舞的雪花1

  1. 2020年了,12道高频 JavaScript 手写面试题及答案 防抖函数原理 : 在事件被触发n秒后在执行回调,如果在这n秒内又被触发,则重新计时。 那么与节流函数的区别直接看这个动画实现即可。 手写简化版 //防抖函数 const debounce = (fn,delay)=>{ let timer = null; return (...args)=>{ clearTimeout(timer); timer = setTi...
  2. Vue3 尝鲜 也没啥好说的,直奔主题 Vue3 相对于 Vue2 有那些更改? Object.defineProperty => Proxy 重构了虚拟DOM OptionApi => Composition API 如何调试 首先,在GitHub上拉取最新代码 $ git pull https://github.com/vuejs/vue-next.git 复制代码 下载完成之后打开代码, 开启sourc...
  3. 人工智能时代,Web 前端能做什么? 最近做了一个项目,通过爬虫去抓取页面快照,然后对页面兼容性进行全面测试。但是遇到一个问题,抓取到海量页面之后,难道还要人工去分析吗? 类似的场景并不会少,是否可以让机器去帮我们实现,最终输出一个可靠报告?答案是肯定的,快照生成后,我们可以对大量快照进行分析,结合 OpenCV 跨平台计算机视觉库,实现...
  4. Vue中的组件从初始化到挂载经历了什么 下面的所有解析都以这段代码为基准: new Vue({ el: "#app", render: h => h(AppSon) }); 复制代码 其中 AppSon 就是组件,它是一个对象: const AppSon = { name: "app-son", data() { return { msg: 123 }; }, render(h) { return h("span", [this...
  5. 5个提升你JS编码水平的实例 作者:陈大鱼头 github: KRISACHAN 虽然 2020 的今天,各种前端框架、工具林立,而这些框架跟工具也帮我们提前解决了不少麻烦的问题,但是工具始终是工具,扎实的基本功才是最核心的,现在一起来通过几个实际的代码片段来提高我们原生 JS 的编码水平。 判断数据类型 首先来提问一个: typeof 是否能正确...
  6. Vue 之 MixinsMixins是一种分发Vue组件中可复用功能的非常灵活的一种方式什么时候使用Mixins? 页面的风格不用,但是执行的方法和需要的数据类似,此时应该提取出公共部分// mixin.js {代码...} // modal.vue// 将mixin引入该组...
  7. 如何优雅的使用Web Worker 欢迎star: complex-calculations-worker Web Worker是HTML5中提出的概念,用来处理独立于主线程处理高费时的任务,从而不会阻塞主线程。目前绝大部分浏览器都支持Web Worker功能,不过使用时要注意它不能操纵DOM元素、同源政策等问题。 Web Worker的使用一般是指定一个脚本的URI来执行worker线程,通过 postMe...
  8. 6.用canvas绘制漫天飞舞的雪花11.首先我们创建一个canvas并将背景涂黑将00坐标映射到正中间后,通过以前讲过的旋转画布的方法,可以绘制出简单的六个主干线和顶端圆。
  9. 优雅绝妙的Javascript跨域问题解决方案 关于Javascript跨域问题的解决方案已在之前的一片文章中详细说明,详见: http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx ; 除了文中提到的3种解决方案之外,在今年的baidu salon分享会上黄方荣主讲的《WEB数据交互的艺术》中提到一个非常优雅绝妙的解决方案!话不多说,直接上解决方案原理图: 该...
  10. 关于几道前端面试题我在 github 上新建了一个仓库 日问,每天一道面试题,有关前端,后端,devops以及软技能,促进职业成长,敲开大厂之门,欢迎交流
  11. js跳出forEach循环的骚姿势 今天修改一个BUG。当forEach循环中满足某个条件时候就不在循环了。内心第一反应 添加return false 搞定~ 但是代码他依旧继续循环。。 我的表情是: 只能说自己是真菜。。需要努力把基础学扎实。。 然后就去度娘一下。。答案是 如果想跳出forEach 只能通过 throw err 才可以~ 当然这个是使程序中断-算跳出 严...
  12. Vue.js 中的片段作者:Nwose Lotanna翻译:疯狂的技术宅 原文:[链接] 未经允许严禁转载 在本文中将会给你介绍一个令人兴奋的概念,它将帮你精通 Vue.js 。 在 Vue 中实现可访问性 为了实现 Web 上的可访问性,你需要设计每个人...
  13. 手把手带你掌握新版Webpack4.0 课程介绍: Webpack 目前无论在求职还是工作中,使用越来越普及。而想要学懂,学会Webpack更绝非易事。本课程完整讲清最新版本下的 Webpack 4 知识体系,通过 基础 + 实例 + 原理代码编写 + 复杂案例分析 完成Webpack4的分析与讲解。更重要的是让你对整个前端项目的构建有一个全局化的认识,实现能力思想双升级。 课...
  14. 浅谈TypeScript基础以及项目用法 TypeScript对于前端人员甚至后台人员都不算是特别陌生的东西了(身边很多java朋友看ts都觉得还不错),今天来聊聊这玩意,基础用法,以及项目中大家都是怎么用的。 顺便一说,ts这东西实在是太大了,因为他的类型可以很灵活的去组合,不过放心,本文不会涉及太多概念性的东西(也说不完),因为其实一个大项目,往往就是...
  15. JS垃圾回收和内存泄露 1.JS垃圾回收有几种方式 2.什么方式会引起内存泄露 3.如何避免内存泄漏,有几种方式 4.JS的栈内存和堆内存 复制代码 垃圾回收的方式 原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。 JS具有自动垃圾回收机制,GC(Garbage collection)不是实时的,因为开销比较大,所以回收会按照固定...
  16. 前端面试基础问题梳理 HTML Web Worker 特点 同源限制:Worker 线程的脚本文件必须和主线程脚本文件同源 DOM 限制,无法获取 document window ,可以获取 navigator 和 location 通信限制:无法与主线程直接通信,必须通过消息完成 脚本限制:无法执行 alert confirm 函数,但是可以发送 ajax 请求 文件限制:无法读取本地文件,...
  17. 一道不一样的前端架构师最终面试题 【实用系列】本次写作来源于一次面试,前端架构师岗位,最后面试官临时给我掏出了一道比较少见的面试题 ,终究斩获offer ,虽然这道题并不难,但是考察的东西挺有趣,加上近期有看到前端防御性编程、优雅处理前端错误的文章,...
  18. 【THE LAST TIME】深入浅出 JavaScript 模块化 前言 The last time, I have learned 【THE LAST TIME】一直是我想写的一个系列,旨在厚积薄发,重温前端。 也是对自己的查缺补漏和技术分享。 欢迎大家多多评论指点吐槽。 系列文章均首发于公众号【全栈前端精选】,笔者文章集合详见GitHub 地址: Nealyang/personalBlog 。目录和发文顺序皆为暂定 ...
  19. 前端ssr技术探究 :rocket:前言 随着react、angular以及vue的兴起,spa技术使得前端开发效率显著提升,同时也带来了一些问题,如不利于seo,首屏加载缓慢,造成白屏问题。那么为什么会造成这些问题,什么是spa技术,什么ssr技术呢? spa(single page application) 简述: single page application单页面应用,只有一张Web页面的...
  20. 前端每日实战:苦练 CSS 基本功——图解辅助线的原理和画法在用 CSS 进行绘图和布局时,除了借助浏览器开发工具之外,还经常需要绘制一些辅助线,以便定位参考。今天就以第 170 号作品中使用的网格线为例,详细讲解一下辅助线的原理和画法。
  21. 未来有望干掉 Python 和 JavaScript 的编程语言 本文最初发表 Hacker Noon 博客,经原作者 Richard Kenneth Eng 授权,InfoQ 中文站翻译并分享。 导读:Python 和 JavaScript 是两门非常有影响力的编程语言,二者都是我们在打造跨平台应用时会用到的主流语言。由于 Python 和 JavaScript 都是脚本语言,因此它们有很多共同的特性,都需要解释器来运行,都是动态类型...
  22. 前端世界中的路由 在前端架构中,路由的设计的合理与否决定了这个项目的是否优秀。现在前端的框架angular,vue react都有对应的路由插件,在页面渲染方便基本都不用我们前端工程师考虑,基本上我们安装他们的文档配置好路由都能良好的运行,但是这并不意味我们不需要去掌握路由的实现原理。 发展 初始的web路由(后端控制) 后台控...
  23. 从vuecli3学习webpack记录(零)整体流程 今天看了下自己之前写的从vuecli3学习webpack记录系列,感觉自己居然没有在一开始的时候把vuecli的 npm run serve 的整体流程在一篇文章里面完整的讲完,可能是因为打字打的手疼,不想写了吧。今天特来补充一下。 这里是整体脉络,所以不会讲细节,细节在本系列里面已经讲到了。 const Service = require('../lib/Se...
  24. Vue解析剪切板图片并实现发送功能 我们在使用QQ进行聊天时,从别的地方 Ctrl+C 一张图片,然后在聊天窗口 Ctrl+V ,QQ就会将你刚才复制的图片粘贴到即将发送的消息容器里,按下Enter键,这张图片将会发送出去。接下来跟各位开发者分享下这项功能在Vue中如何来实现。先跟大家展示下最终实现的效果。 在线体验地址 实现思路 页面挂载时...
  25. Vue3中不止composition-api,其他的提案(RFC)也很精彩 最近一段时间,Vue3带来的新能力composition-api带来了比较大的轰动,虽然是灵感是源React Hook,但是在很多方面却超越了它。但是除了composition-api,其他的改动却比较少有人讨论,本篇文章就由 vuejs/rfcs 这个仓库来看看其他比较让人振奋的RFC。 RFC其实就是(Request For Comments)征求修正意见书,它不代表这...
  26. 基于 HTML5 WebGL 与 WebVR 3D 虚实现实的可视化培训系统2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级的发展趋势。本文所讲的 VR 是...
  27. vue组件的生命周期钩子 组件生命周期指的是组件从创建到销毁的过程,在这个过程中的一些不同的阶段, vue 会调用指定的一些组件方法 基本生命周期函数有下面几个阶段: 创建阶段 挂载阶段 更新阶段 卸载阶段 每一个阶段都对应着 之前 和 之后 两个函数 <!DOCTYPE html> <html lang="en"> <head&...
  28. 学习 nodejs+mongodb+koa2 写接口(二) koa2教程入门由于koa2是基于async/await操作中间件,目前node.js 7.x的harmony模式下才能使用,所以启动的时的脚本如下:
  29. Go:如何解析 JSON 数据? 概述 最近掉进需求坑了,刚爬上来,评估排期出现了严重问题,下面三张图很符合当时的心境。 谈需求 估排期 开始干 为啥会这样,我简单总结了下: 与第三方对接。 ...
  30. Vue 相关原理学习笔记 响应式原理 方案一:Object.defineProperty 基于 Object.defineProperty 通过 setter/getter 方法来监听数据的变化。 getter 进行依赖收集,setter 在数据变更的时候通知订阅者,递归调用监听对象的所有属性。 缺点: 无法检测到对象属性的添加或删除 不能监听数组的变化,需要重写数组方法 functio...
  31. 最近从 0 学习 Git,详细分类总结了这份 Git 命令宝典 来源:帅地玩编程 作者:帅地 虽然之前学过 Git,不过用的比较少,很多原理也不是很清楚,所以最近是买了个视频,静下心来从零学习了下 Git,不过 Git 用来用去其实也就那几个命令,今天这篇文章,我把那些命令都分类总结了一下(当然,是参考别人的分类的),这些总结大部分来自于我买的...
  32. js中进行数字,超大金额(千位符)格式化处理 最近遇到一个需求,对于社区里讨论的帖子展示一个访问量的计数显示问题,当超过多少页面访问量时,就让其显示xxx万,xx亿 对于后台返回该字段的数据类型是number,需要进行格式化数字的输出 这个应用场景在前端开发中其实很普遍,例如:音乐app里面音乐歌曲播放数量,微博里的点赞数,评论留言条数,页面的访问量,超大金额(千...
  33. JSON.parse和JSON.stringify的巧用JSON.parse和JSON.stringify是对json数据的转换,在js中使用的频率还是非常高的,比如localStorage,cookie中对复合型数据的存储,与服务器进行数据交互的格式转换等等。
  34. webpack打包原理 ? 看完这篇你就懂了前言 [实践系列] 主要是让我们通过实践去加深对一些原理的理解。 [实践系列]前端路由 [实践系列]Babel 原理 [实践系列]实践这一次,彻底搞懂浏览器缓存机制 [实践系列]你能手写一个 Promise 吗?Yes I promise。 ...
  35. Web防护自给自足:给Express写一个WAF中间件 NodeJS做为后端神器是很流行的。 Node的后端程序,绝大多数都用大名鼎鼎的Express做Web服务。 本文将展示如何为Express写一个WAF中间件,为Web服务做安防,防止常见的如SQL注入、XSS等黑客攻击。 首先奉上完整演示代码: var express = require('express'); var app = express(); //当访问根目录时触发 ...
  36. vue的开发总结 https://github.com/bailicangdu/vue2-elm 一、router.go ;router.push和 router.replace的区别 1. router.go(n) 这个方法的参数是一个整数,意思是在history记录中向前或者后退多少步,类似window.history.go(n) 2. router.push(location) 想要导航到不同的URL,则使用router.push方法,这个方法会向history...
  37. React团队的技术准则我React团队工作的这段时间,很幸运能够看见 Jordan、Sebastian、Sophie 和其他团队成员是如何解决问题的。在本文中,我会把从他们身上学到的,浓缩为一篇较高层次的技术准则。这些准则未必详细。它们都是我对Rea...
  38. 从0搭建一个自己的前端脚手架 下大雪了~ 前言 上篇文章只是简单的说了下前端脚手架的代码,和实现思路,最近又增加了部分的功能,这次就把上篇文章加上这次的进行一个统一的描述,最近看其他人的掘金文章,发现只有大白话才是最好的,能让人迅速理解的的语言,那么这次,就用大白话来进行写一个前端脚手架。 开始 什么是前端脚手架 1.是什...
  39. VUE学习|使用v-for和checkbox中遇到的问题 本文记录了我在实现一个简单的TodoList的过程中遇到的问题即解决方法。由于我目前水平较低,仍有未明白的地方,同时文中也可能出现纰漏或者错误指出,若是有人可以看到此文,希望可以解答我的疑惑或者指出不正之处,谢谢。 需求 在一个简单的TodoList应用中,使用 v-for 指令绑定待办事项列表进行渲染。待办事项列...
  40. Vue2.0源码阅读笔记(十一):自定义事件   Vue 事件分为两类:原生DOM事件、自定义事件。其中原生DOM事件既可以在元素上使用,也可以在组件上使用,在组件上使用时要添加.native修饰符。   Vue 通过调用原生API来处理元素和组件上绑定的原生DOM事件,在组件上的自定义事件则是由基于 发布/订阅模式 的事件中心机制完成的。 一、手动实现事件中心   ...
  41. JavaScript Class 完全指南 持续进步的同学都关注了“1024译站” 这是1024 译站的第 48 篇文章 作者:Dmitri Pavlutin 来源:dmitripavlutin.com 翻译:大道至简 JavaScript 使用原型继承:每个对象都从原型对象继承属性和方法。 Java 或 Swift 等语言中作为创建对象的蓝图的传统 Class,...
  42. JavaScript核心知识点(上篇) 看了很多 JS 的书籍和教程,往往会模糊焦点,这篇文章会做一个梳理,将 JS 中的重难点进行总结。 文章分为上下两篇。上篇是基本知识,下篇是进阶知识。 #变量类型和计算 引例: 值类型和引用类型的区别 typeof能判断哪些类型? 何时使用 === 何时使用 == ? 手写深拷贝 变量类型 ...
  43. Babel 的工程化实现 Babel 是一款将未来的 JavaScript 语法编译成过去语法的 Node.js 工具。本文从 2019 年 11 月的 master 分支源码入手,介绍 Babel 在解决这类问题时是如何划分模块。 Babel 的模块划分 其中 babel-loader 隶属于 webpack,不在 Babel 主仓库。 框架层 常见的编译器 常见的解析器有 acorn、@babel/p...
  44. nodejs调用外部接口在日让的工作开发中,我们不仅仅要使用node来封装提供一些http接口,也会在node服务中调用一些第三方的HTTP接口,那么如何操作?
  45. CSS实现一个粒子动效的按钮按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢?
  46. 7 个好用的 TypeScript 新功能TypeScript 语言小组一直在以惊人的速度推出新功能。从最新的《 Javascript 语言状况调查》([链接])中可以看出,该语言的使用率越来越高。
  47. vue移动端开发总结 相对于PC端来说,移动端设备分辨率百花齐放,千奇百怪,对于每一个开发者来说,移动端适配是我们进行移动端开发第一个需要面对的问题。 在移动端我们经常可以在head标签中看到这段代码: <meta name='viewport' content='width=device-width,initial-scale=1,user-scale=no' /> 复制代码 通过meta标签对view...
  48. vue 下评论实现@ mention提及功能 原生的textarea是不能换行自适应高度的,所以有2种方案 textarea js 实时计算高度 div contenteditable="true"模拟一个textarea。但需要模拟placeholder 一开始我是使用的textarea js 计算高度(微博就是这种方式), 但是产品要求; 评论框要@他人,并且颜色高亮。 找了个插件 vue-tribute ...
  49. Webpack 核心库 Tapable 的使用与原理解析 前言 Webpack 本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是 Tapable , Webpack 中最核心的负责编译的 Compiler 和负责创建 bundles 的 Compilation 都是 Tapable 的实例,并且实例内部的生命周期也是通过 Tapable 库提供的钩子类实现的。 class Compiler extends Tapa...
  50. JS的模块化编程 模块化是将系统分离成独立功能的方法,这样我们需要什么功能,就加载什么功能。 当一个项目开发得越来越复杂时,会遇到一些问题,例如:命名冲突、文件依赖等。 文件依赖就是,A负责 a.js 组件的开发,B负责 b.js 组件的开发,在 a.js 文件里面可能引用了 b.js 里面的某一个变量,而在项目运行时 a.js 在 b.js ...
  51. 11 个 JavaScript 精简技巧点赞再看,养成习惯本文 GitHub [链接] 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。
  52. 前端知识点:js 动画原理 前言 动画是一个创造运动假象的过程。几乎所有的投影运动媒体都采用帧实现运动。—— 《HTML5+JavaScript动画基础》 相关知识 静态动画和动态动画 静态动画 我们知道,投影动画由一帧帧的图像切换而得到,而每一帧的内容是事先已经存在的,不可变的。 这种动画不会与用户产生交互效果(你关闭电源,动画暂停不...
  53. vue-cli3携手rollup、github-actions打造自动部署的vue组件模板(使用篇)前言 旨在让开发者在开发时拥有 享受组件开发 一个长得还不错的demo rollup类库打包工具对代码的抚摸 eslint代码风格检查、自动格式化带来的快感 github-actions把demo自动部署到gh-pages身上 的一条龙服务。(接...
  54. vuex Getters基本用法vuex基础参考[链接]一.什么是getters?vuex中的getters用于对state中存储的数据进行过滤操作。比如等级:假设1代表初级,2代表中级,3代表高级。在state中存储level值为1或2或3.想在页面中获取对应等级就需要进行...
  55. 重新认识一下JS声明变量的六种方式吧 先说一下JS中有哪六种变量的声明方法吧,然后我们带着三个问号去看文章:what?how? where? 六种声明变量的方法: var let const function import class 没有对比就没有伤害(var、let、const) 面试中,有不少的面试官喜欢问let、var、const的区别,虽然这个问题很简单,但是从这道题中,...
  56. Vue v-model组件封装(类似弹窗组件) v-model是vue的一个语法糖,限制在input和textarea等这些表单元素中,官网所给的例子也是仅限于表单组件 Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bin...
  57. 仿照Vue实现模板与数据的绑定 拿到模板 let tmpNode = document.querySelector('#root'); 复制代码 拿到数据 let data = { name:'张三', age:'24' } 复制代码 将数据与模板结合 使用递归实现 匹配 {{ xxx }} 的正则 let reg = /{{(.+?)}}/g; // . 匹配除换行符以外的其它任意字符, () 组的意思,g 全局匹配 function compiler(...
  58. 如何准备20K+的大厂前端面试 程序员的简历不用太花哨,markdown即可,但是一定要突出自己的技术亮点,简历就像是你和心仪妹子约会介绍自己一样,小时候拿过三好学生就别说了 就像你面试高级前端,就不要写会html+css了,也别写会vuejs写todolist了 公司 公司在天眼查,知乎,脉脉上搜一下即可 ,看一下高管,工作氛围等即可 面试题 其实我很...
  59. 数据结构与算法 javascript描述-队列 常见的使用队列的场景 常见的队列操作 JS通过数组实现一个队列结构 const assert = require('assert') class Queue { constructor(items = []) { this.items = items } enqueue(item) { return this.items.push(item) } dequeue() { re...

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

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

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