面试梳理
关注
分享
扫一扫
前端面试梳理
luckybing~
一个积极向上、乐观开朗、遇到Bug想一晚上、没秃顶、会写段子的web前端工程师
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
koa 中间件模型
面试时候让手写来着。。。写的一半一半吧，周末来深入研究一下。。。（一）前言有三个函数，一次调用取结果，可见最终运行结果如下：function add (a, b) { return a + b}function square (a) { return a * a}function minus (a) { return --a}console.log(minus(square(add(1, 2)))) // 8（二）封装函数封装一个componse .原创 2020-12-27 17:50:22 · 198 阅读 · 0 评论 -
知识小结
（1）vuex 和 全局变量有什么区别？（1）vuex用于做状态管理，主要是应用于vue.js中管理数据状态的一个库，通过创建一个集中的数据存储，供程序中所有组件访问，实现组件之间的传值。并且一个组件的数据变化会映射到使用这个数据的其他组件。（2）vuex由统一的方法修改数据，全局变量可以任意修改。（3）全局变量多了会造成命名污染，vuex不会，同时解决了父组件与孙组件，以及兄弟组件之间通信的问题。（2） 如何做到渲染几十万条数据不卡桢？主要是两个技术：document.create原创 2020-12-27 15:46:18 · 276 阅读 · 0 评论 -
console不止console.log
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met原创 2018-07-12 16:30:50 · 372 阅读 · 0 评论 -
使用 socket.io 开发聊天室（四）
（一）socket.io 的基本使用socket.io 是一个库，可以在浏览器和服务器之间实现实现实时、双向和基于事件的通信，它可以在Node.js 服务器、浏览器客户端运行。他其中一部分用到了 websocket ，但是不是 websocket 的封装（二） 安装 socket.ionpm i socket.io（三）socket.io 的使用客户端：index.html:<!DOCTYPE html><html lang="en"><.原创 2020-11-28 17:28:26 · 288 阅读 · 0 评论 -
websocket + node聊天室开发（三）
对第二篇文章的改造：将消息包装成一个对象（1）type：消息的类型 0 : 进入聊天室的消息 1: 用户离开聊天室的消息 2: 正常的聊天消息（2）msg：消息的内容（3）time：聊天的具体时间服务端：// 引入 nodejs-websocketconst ws = require('nodejs-websocket')// 当前聊天室的人数let count = 0// 定义消息类型const TYPE_ENTER = 0const TYPE_LEAVE = 1原创 2020-11-28 14:37:32 · 226 阅读 · 0 评论 -
使用 websocket 开发简单聊天室（三）
聊天室功能：1. 所有人可以看到 某某某 进入了聊天室、某某某 退出了聊天室2. 一个人发送了消息，整个聊天室的人都能看到原创 2020-11-27 17:10:08 · 214 阅读 · 0 评论 -
使用 node.js 开发服务端 websocket （二）
1. 安装依赖包npm i nodejs-websocket2. 使用 node 实现 websocket 服务器// 引入 nodejs-websocketconst ws = require('nodejs-websocket')// 创建一个server 监听连接// 每次只要有用户连接 函数就会被执行 会给当前连接的用户创建一个 connect 对象const server = ws.createServer((connect) => { console.log.原创 2020-11-25 17:34:41 · 369 阅读 · 0 评论 -
node + koa + websocket 开发即时通讯聊天室（一）
（一）通讯过程红色就是消息流动过程，A给B发送消息，A先发给服务器，服务器再发给B，B 回复 A 的消息，B 将消息先发给服务器，服务器将消息发送给A（二）什么是 websocket（1）websocket 协议是基于 TCP 的一种新的网络协议，它实现了浏览器 与 服务器 的 全双工通信（全双工通信：浏览器既可以主动给服务端发消息，服务券也可以主动给浏览器发消息）而 http 是无法实现这种功能的，http 是 发送 ---> 请求流程，如果不发送请求，服务端是不能主动给浏览器.原创 2020-11-25 12:15:04 · 1275 阅读 · 0 评论 -
大文件上传和断点续传（一）
（一）重点核心（1）FileReader 及 文件流处理方案（2）基于 Promise 管理文件异步上传（3）文件上传的两种方案（4）大文件切片上传（5）基于 Node 的服务端处理（二）知识点1. 文件上传有两种方案：第一种是基于文件流（form-data)，把需要上传的文件放入 form-data 中，最后将 form-data 传入服务器第二种是基于客户端，客户端需要把文件转化 base64 编码，以 base64 的格式上传服务器...原创 2020-11-15 00:55:47 · 403 阅读 · 0 评论 -
vue 实现文件上传
（一）首先实现html、css布局代码：<template> <div class="image-uploader"> <img :src="uploadIcon" class="icon"/> <p>Drag your images here</p> <p>OR</p> <div class="real-btn"> SELECT A FiLE原创 2020-11-14 18:53:21 · 3861 阅读 · 0 评论 -
手写数组分块 chunk
（一）chunk 的实现结果（1）如果size 大于等于1 并且 小于数组长度var arr = [1, 2, 3, 4, 5, 6, 7]var res = arr.chunk(7)console.log(res)var arr = [1, 2, 3, 4, 5, 6, 7]var res = arr.chunk(3)console.log(res)（2） 不传值默认1var arr = [1, 2, 3, 4, 5, 6, 7]var res = arr..原创 2020-10-09 23:17:36 · 371 阅读 · 0 评论 -
npm 发包
1. 准备好要发包的代码2. 确保 npm 配置的中央仓库不能是淘宝镜像，不知道是不是的话，都执行一下以下代码npm config set registry https://registry.npmjs.org 3. 注册 npm 账号4. 在项目终端中登陆npm addUser输入账号密码邮箱5. 发布npm publish --access public因为我的npm账号是刚刚注册的，所以提示要验证邮箱，验证后这样就算是发布成功了，看你的npm仓库个原创 2020-10-05 14:46:00 · 204 阅读 · 0 评论 -
手写 数组 reduce 函数
（一）reduce 语法array.reduce(function(total, currentValue, currentIndex, arr), initialValue)reduce 接收两个参数例子：let arr = [1, 2, 3, 4, 5]// 下标是奇数的元素和var result = arr.reduce((total, item, index) => { total += (index % 2 ? item : 0) return total原创 2020-10-03 00:29:07 · 338 阅读 · 0 评论 -
手写 call、apply、bind
（一）callcall 的基本用法function person () { console.log(this.name)}let me = { name: 'zfb'}person.call(me) // zfbperson.call(me) 的意思是，调用 person 这个函数，并且把 person 函数中的 this 指向 me 这个对象，call 传参数是一个一个传function person (a, b) { console.log(this.nam原创 2020-10-02 22:59:59 · 176 阅读 · 0 评论 -
知识点汇总
1. 获取地址栏参数 一个新的APInew URLSearchParamsfunction query(name) { const search = location.search // ?a=10&b=20&c=30 const p = new URLSearchParams(search) return p.get(name) // 使用 get 方法}使用：var res = query('a')console.log(res) // 10需要考原创 2020-09-30 22:42:24 · 128 阅读 · 0 评论 -
查缺补漏
A~Z ：65~90a~z ：97~122charCodeAt原创 2020-09-30 21:34:21 · 161 阅读 · 0 评论 -
手写深度比较 模拟 lodash 的 isEqual
// 实现效果let a = { name: 'zfb', age: 18, major: { main: 'math', other: 'chinese'} }let b = { name: 'zfb', age: 18, major: { main: 'math', other: 'chinese'} }console.log(a === b) // false正常情况下，两个对象是不可能相等的，虽然 键 和 值 一样，因为他们有着不同的内存指向，实现 isEqual 函数var re.原创 2020-09-30 12:34:36 · 805 阅读 · 0 评论 -
混合开发 Hybrid 介绍
（一）开发移动三种模式（1）Native App：（原生APP）写App的同学，比如 ios，安卓等（2）Hybrid App：（混合开发），h5 页面嵌入 App 中（3）Web App：用手机浏览器打开 h5 页面（二）优缺点：（1）Native App：基本可以操作任何手机系统，比如（视频、扫码、获取通讯录、打电话）等（2）Hybrid App：混合开发，如果想要h5操作手机系统，需要 app 同学配合前端，给前端提供相应的操作api前端也可以自己做混合开发，需要借助.原创 2020-09-27 22:12:36 · 1412 阅读 · 0 评论 -
h5 离线存储 manifest
（一）背景通过离线存储，我们通过把需要离线存储的文件列入manifest的配置文件中，这样即使在离线的情况下，用户也可以正常看见网页（二）配置（1）在需要缓存的页面上加上 manifest="缓存配置文件名称" 最好将文件放在根目录下<html lang="en" manifest="cache.manifest">（2）在当前文件夹根目录，新建cache.manifest，manifest文件，基本格式为三段： cache， network与 fallback，其中n原创 2020-09-27 11:24:51 · 331 阅读 · 0 评论 -
盒模型的应用
实现这样的一个 布局代码初步实现是这样的：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *原创 2020-09-27 10:49:24 · 170 阅读 · 0 评论 -
手写 Promise (二)
then 实现据说是作难的，其余就简单了1. 实现catchcatch (failFun) { return this.then(undefined, failFun) }catch 也要返回一个Promise，在 then基础上改一下2. reject() 和 resolve() 的实现先说用法Promise.reject(1) // 失败Promise.resolve(2) // 成功Promise.resolve(Promise.resolve(2)) //原创 2020-09-20 14:51:45 · 100 阅读 · 0 评论 -
Promise.all Promise.race
1. Promise.all()参数是一个数组，数组中每一个元素都是一个Promise，返回结果也是一个数据，返回的结果顺序与传入的参数Promise顺序一致let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('P1') }, 2000) }) let p2 = new Promise((resolve, reject) => {原创 2020-09-20 01:06:39 · 307 阅读 · 0 评论 -
手写Promise
（一）前置查缺补漏知识点1. 常见错误类型Error：所有错误的父类型ReferenceError：引用的变量不存在 （refer 是引用的意思）TypeError：数据类型不正确的错误RangeError：数据类型不在其所允许的范围内SyntaxError：语法错误2. Promise 具体描述（1）从语法上来说，Promise 是一个构造函数（2）从功能上来说，Promise 对象来封装异步操作并可以获取其结果3. 如何改变Promise的状态？（1）reso原创 2020-09-20 01:01:50 · 103 阅读 · 0 评论 -
super 是什么？
1. 先来一个题外话class Parent { constructor (name) { console.log('this', this) // person1 this.name = name } getName () { return this.name }}let person1 = new Parent('zs')constructor 中的 this 指向的是类的实例2. 在 es6 类的继承中，当子类 extends 父类的时候，需原创 2020-09-17 22:12:42 · 288 阅读 · 0 评论 -
查缺补漏。。。
1. es6 和 js 的关系？es6 又叫 ECMA Script 规范，js 是对这个规范的实现let a = 3a = 44console.log(a) // 442. const 定义了不能更改 指的是 基本数据类型，引用数据类型没有这个限制3. Map 的键可以是任意类型，对象的键只能是字符串4. 箭头函数简写const test = v => v相当于：function test (v) { return v}箭头函数没写 return原创 2020-09-16 15:16:41 · 200 阅读 · 0 评论 -
原型 和 原型链
（一） 原型function Person() {}var person = new Person()console.log(person.__proto__ === Person.prototype)//trueconsole.log(Person.prototype.constructor===Person)//true__proto：隐式原型prototype: 显式原型（二）原型链class Person {}class Student extends P原创 2020-09-16 11:38:56 · 178 阅读 · 0 评论 -
CDN
（一）什么是CDNCDN：又叫做内容分发网络，是前端性能优化的一种手段，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。从而降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。（二）CDN 大致描述当我们在 地址栏中 输入https://www.baidu.com/的时候，DNS解析 会把域名转变为相应的 ip 地址假设百度目前有3万台服务器，分布在全球各地，我...原创 2020-09-14 16:29:10 · 568 阅读 · 0 评论 -
手写深拷贝、浅拷贝
（一）浅拷贝var obj1 = { name: 'zs', school: 'qq', major: { math: 'gs' }}var obj2 = obj1obj1.major.math = 'zh'console.log(obj2.major.math) // zh两个对象指向同一个引用地址，其中一个变了，其他对象的相应字段也都会改变，这是浅拷贝（二）深拷贝深拷贝实现的目的就是：其中一个变了，其他对象的相应字段不会改变，仍然保持原有的值，原创 2020-09-14 16:07:39 · 561 阅读 · 0 评论 -
js小知识拼凑
1. Symbol 也是基本数据类型之一2. Promise 解决了什么问题？答：解决回调函数 回调地狱 的问题，通过 .then().then 的方式 成为链式操作3. 每次请求的时候，cookie 都会把 数据发送到服务端，localStorage、sessionStorage 不会，所以说cookie对性能不是很友好，占用带宽4. git 命令相关git diff // 查看改动了哪些（全部）git diff 文件 // 查看具体哪个文件改动了什么git show 提交i原创 2020-09-14 15:34:30 · 117 阅读 · 0 评论 -
js 查缺补漏 （二）
1. DOM 的本质是什么数据结构？DOM 的本质就是一棵树，从HTML 文件解析出来的一棵树2. 移动节点如果一个已存在的节点，appendChild、append 插入到其他节点，就是移动节点的意思<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i原创 2020-09-16 10:47:34 · 165 阅读 · 1 评论