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