weixin_40659167的博客

最近在学习webpack的一些配置，学习的期望就是通过可以通过webpack给html文件中引用的资源例如css、js、img文件加上版本号，避免由于浏览器的缓存造成线上请求的资源依旧是旧版本的东西。首先新建一个webpack的项目(默认大家已经安装node的了)npm init 项目中安装webpacknpm webpack --save-devnpm webpack-cli -...

场景重现之前在做一个IM的模块，有一个撤回消息后两分钟之内可以重新编辑的功能，项目是用react做的，按照正常的思路，只需传入一个消息撤回的时间markTime，然后用现在时间Date.now()去判断是否已经超时两分钟。然而理想总是美好的，由于没有去出发react的重新渲染机制，即使超时了重新编辑的按钮也不会消失，等到去点击重新编辑按钮再提示已超时的话这个极大的影响用户体验。解决方案...

1.描述一下渐进增强和优雅降级优雅降级(graceful degradation)：一开始就构建站点的完整功能，然后针对浏览器测试和修复。渐进增强(progressive enhancement)：一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。2.为什么利用多个域名来请求网络资源会更有效？动静分离请求，使用不同的服务器处理请求，提高效率；突破浏览器的并发限制，同一时间针对同一...

1.apply,call,bind有什么区别？三者都可以把一个函数应用到其他对象上，apply,call是直接执行函数调用，bind是绑定，执行需要再次调用。apply和call的区别是apply接受数组作为参数，而call是接受逗号分隔的无限多个参数列表。代码如下：function Person() { } Person.prototype.sayName() { ale...

1.XML和JSON的区别？1）数据体积方面JSON相对于XML来讲，数据的体积小，传递的速度更快些2）数据描述方面JSON和JavaScript交互更加方便，更容易解析处理，更容易交互3）数据描述方面JSON对数据的描述性比XML差4）传输速度方面JSON的速度要远远快于XML2.前端需要注意哪些SEO？合理的title、description、keywords：搜索对着三项...

1.说说前端中的事件流？事件流描述的是从页面接收事件的顺序，DOM2级事件流包括下面几个阶段。事件捕获阶段处理事件阶段事件冒泡阶段（addEventListener：addEventListener是DOM2级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。最后的布尔值如果为true，表示在捕获阶段调用事件处理程序；如果为fal...

1.var的变量提升的底层原理是什么？JS引擎的工作方式是1)先解析代码，获取所有被声明的变量；2)然后再执行。也就是分为预处理和执行这两个阶段。变量提升：所有用var声明变量的语句都会被提升到代码头部。另外function也可看作变量声明，也存在变量提升的情况。2.垂直水平居中的方式？1)定位父元素设置为：position: relative;子元素设置为：position: ...

1.实现三栏布局（左右两边固定宽度，中间自适应）1)浮动布局左右两边固定宽度，并分别设置float:left和float:right。（但这会带来高度塌陷的问题，所以要清除浮动。清除浮动的方式有：a. 给父级盒子设置height；b.给父级盒子设置overflow:hidden；c.在父级盒子结束前的盒子添加clear:both；d.父级盒子也设置浮动；e.父级div定义伪类：aft...

1.CSS的盒子模型包含元素内容content、内边距padding、边框border、外边距marginbox-sizing:border-box;content-box;inherit;content-box:总宽度=margin+border+padding+width，即为标准模型；border-box:总宽度=margin+width，即为IE模型；inherit:继承父元素...

当菜单栏作为路由转换的router-link的时候，在el-menu标签中添加 :default-active="this.$route.path"而且还要记得加个router

什么是Node.js官方解释：Node.js 是一个基于 Chrome V8引擎的 JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型（ Node.js的特性），使其轻量级又高效。 Node.js的包管理器 npm 是全球最大的开源库生态系统。上图所示：Node内部采用Google Chrome的V8引擎，作为JavaScript语言解释器通过自...

1.数组方法1）join()把数组上午所有元素放入一个字符串。元素通过指定的分隔符进行分隔。该方法只接收一个参数，用作分隔符的字符串，然后返回包含所有数组项的字符串，如果不给join()方法传入任何值，则使用逗号作为分隔符。var a = [1,2,3];console.log(a.join());//'1,2,3'console.log(a.join(' '));//'1 2 3'c...

1.ES6中的let，const，var的区别是什么？var：声明全局常量；let：声明块级常量，即局部常量，定以后可以修改；const：用于声明常量，定义后不能再修改值或者引用值的常量，也具有块级作用域；2.对数组进行去重，es5或者es6方法//es5四种方式://方式一:Array.prototype.unique1 = function() { // 1. 定义数组...

1.栈的压入和弹出输入两个整数序列，第一个序列表示栈的压入顺序，请判断第二个序列是否可能为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如序列1,2,3,4,5是某栈的压入顺序，序列5,4,3,2,1或3,2,1是该压栈序列对应的一个弹出序列，但4,3,5,1,2就不可能是该压栈序列的弹出序列。function IsPopOrder(pushV,popV){ if(pushV.len...

1.Vue 常用的指令：v-modelv-ifv-elsev-showv-forv-bind----简写: :class=“qq”、:type=“text”v-on----简写: @click=“qq”2.v-model的原理text和textarea元素使用value 属性和 input事件；checkbox 和radio使用checked 属性...

在ant-design-vue的文档中，menu有两个可以传的参数，分别为defaultOpenKeys和openKeys，但在接手做一个项目时，openKeys这个参数前人已经写了，可能是从文档中直接复制demo没有删除掉，我也没去管。等到需要用到这个defaultOpenKeys的时候，想做每次刷新还会再次打开上次打开的菜单的效果，但一直无效，网上也没有查到有类似的情况，后面只能自己去看源...

一、项目预览之前看一个写聊天器的教程，自己也跟着教程做了一遍，由于懒得去找图片和一些图标我就用教程中的素材来做，主要是用了react+react-router+redux+Node.js+socket.io的技术栈，接下来就是项目的预览1.首先在/login下能看到有登录和注册按钮2.点击注册按钮，路由跳到/register，注册一个账号，用户和密码都为LHH，选择“牛人”，点击注册，之后...

1.以下递归函数存在栈溢出的风险，请问如何优化？function factorial(n){ return n*factorial(n-1)}解答：function factorial(n){ if(n === 1) { return 1;}; return n*factorial(n-1)}2.请实现一个计算最大公约数的函数：function great...

1.JavaScript实现二分法查找？二分法查找，也称折半查找，是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤：（1）首先，从有序数组的中间的元素开始搜索，如果该元素正好是目标元素（即要查找的元素），则搜索过程结束，否则进行下一步。（2）如果目标元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半区域查找，然后重复第一步的操作。（3）如果某一步数组为空，...

编程题：1.输入某年某月某日，判断这一天是这一年的第几天？ // 判断是否为闰年 function isRun(a) { return a % 4 == 0 && a % 100 != 0 || a % 400 == 0 } // 判断是这一年的第几天 function daysNum(year,month,day) {...

1.apply,call,bind有什么区别？三者都可以把一个函数应用到其他对象上，apply,call是直接执行函数调用，bind是绑定，执行需要再次调用。apply和call的区别是apply接受数组作为参数，而call是接受逗号分隔的无限多个参数列表。代码如下：function Person() { } Person.prototype.sayName() { ale...

MVVM由以下三个内容组成View：视图模板Model：数据模型ViewModel：作为桥梁负责沟通View和Model，自动渲染模板在JQuery时期，如果需要刷新UI时，需要先取到对应的DOM再更新UI，这样数据和业务的逻辑就和页面有强耦合。在MVVM中，UI是挺数据驱动的，数据一旦改变就会刷新相应的UI，UI变化也会改变相应的数据。这种方式在开发中只需要关心数据的变化，不用直接...

重绘 、回流首先了解页面的呈现流程浏览器把获取到的HTML代码解析成一个DOM树，HTML中的每个tag都是DOM树的1个节点，根节点就是document对象（html tag）。用firebug或者IE Develop Toolbar等工具可看到DOM树，包括display:none隐藏，还有js动态添加的元素；浏览器把所有样式（主要包括css和浏览器的样式设置）解析成样式结构体。在解...

前端路由原理本质就是监听 URL的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式hashhistorywww.test.com/##/ 就是 Hash URL，当##后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到URL 的变化，从而进行跳转页面。vue-router hash实现源码（完整源码...

JS JavaScript中的thisthis是JavaScript语言中的一个关键字它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。function test() {　this.x = 1;}那么，this的值是什么呢？函数在不同使用场合，this有不同的值。总之，this就是函数运行时所在的环境对象。情况一：纯粹的函数调用这是函数的最常通用法，属...

Promise面试题题目一const promise = new Promise((resolve, reject) => { console.log(1); resolve(); console.log(2);})promise.then(() => { console.log(3);})console.log(4);解析首先Prom...

什么是Promise？MDN对Promise的定义：Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。在学习Promise之前得先了解同步与异步：JavaScript的执行环境是单线程。所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会阻塞其他任务。这个任务可称为主线...

JavaScript深拷贝、浅拷贝浅拷贝：浅拷贝只是复制了内存地址，如果原地址中的对象改变了，浅拷贝出来的对象也会相应改变。深拷贝：开辟了一块新的内存存放地址和地址指向的对象，原地址的任何对象改变了，深拷贝出来的对象不变。浅拷贝数组（只拷贝第一级数组）：1.直接遍历var arr = [1,2,3,4];function copy(arg){ var newArr = [...

ES6是什么？JavaScript的第六版，在ES5的基础上增加了许多特性：箭头函数、字符串插值、代理、生成器、结构赋值、块级作用域等等。一、let和const1.作用：声明变量ES6中明确规定，如果区块中存在let和const命令，则这个区块对这些命令声明的变量从一开始就形成封闭作用域。只要在声明之前就使用这些变量，就会报错（暂时性死区）。2.let使用注意：作用域只局限于当前...

JS JavaScript事件循环机制首先区分进程和线程进程是cpu资源分配的最小单位（系统会给它分配内存）不同的进程之间是可以同学的，如管道、FIFO(命名管道)、消息队列一个进程里有单个或多个线程浏览器是多进程的，因为系统给它的进程分配了资源（cpu、内存）（打开Chrome会有一个主进程，每打开一个Tab页就有一个独立的进程）浏览器的渲染进程是多线程的GUI渲染线程JS...

js 事件委托 事件代理JavaScript高级程序设计上解释：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。通过例子类比：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM为签收。现实中，我们大都采用委托的方案。前台MM收到快递后，会判断收件人是谁，然后按照收件人的要求签收。这种方案的优势就是无论有多...

js 防抖 节流 JavaScript实际工作中，通过监听某些事件，如scroll事件检测滚动位置，根据滚动位置显示返回顶部按钮；如resize事件，对某些自适应页面调整DOM的渲染；如keyup事件，监听文字输入并调用接口进行模糊匹配等等，这些事件处理函数调用的频率如果太高，会加重浏览器的负担，减弱性能，造成用户体验不好。此时需要采用debounce（防抖）和throttle（节流）的方式来减...

前端错误监控一、错误分类1.运行时错误：这个错误往往是在写代码是造成的。如语法错误、逻辑错误等，这种错误一般在测试过程也能够发现。2.资源加载错误：这个错误通常是找不到文件或者是文件加载超时造成的。二、错误捕获1.代码错误捕获try…catch…try{ //运行可能出错的代码 }catch(e) { //捕获错误}window.onerrora.w...

第一次大公司面试的面经此次面试说来也有点匆忙，本没想过自己会那么快就想去面试大公司，并且把自己第一次面大公司的各种不足展现得一览无余。当时11月20号左右身边一位朋友给了一位人超nice的师兄的内推，并且鼓励我去投简历。最终战胜了自己的胆怯，投了一份简历给内推的师兄。一两天后hr就打电话安排面试了。没想到面试是要连续着面的，当时面花了一个多小时过了一面，再花一个小时面二面，最终也止于二面。接下...

reduxreact中状态管理工具，用来管理应用中的数据。核心Action：行为的抽象，视图中的每个用户交互都是一个action。比如：点击按钮。Reducer：行为响应的抽象，也就是：根据action行为，执行相应的逻辑操作，更新state。比如：点击按钮后，添加任务，那么，添加任务这个逻辑放到Reducer中；创建State。Store：1.Redux应用只能有一个store；...

new和instanceofnew代码例子var Func=function(){};var func=new Func ();new共经过4个阶段创建一个空对象设置原型链让Func中的this指向obj，并执行Func的函数体。判断Func的返回值类型，如果是基本值类型，返回obj；如果是引用类型，就返回这个引用类型的对象。模拟实现newfunction creat...

从输入网址到页面呈现的详细过程面试题经典题目，简要回答如下：a.域名解析b.发起TCP连接的三次握手c.建立TCP连接后发起http请求d.服务端响应http请求，返回响应报文e.浏览器页面渲染f.断开TCP连接下面详细介绍：a.域名解析DNS解析，当在浏览器中输入一个URL，如“www.baidu.com”时，这个地址并不是百度网站真正意义的地址。每一台连上网计算机都有一...

JavaScript中的文档碎片 DocumentFragement文档碎片是什么：如果我们要在一个ul中添加100个li，如果不使用文档碎片，那么我们就需要使用append经常100次的追加，这会导致浏览器一直不停的渲染，是非常消耗资源的。但是如果我们使用文档碎片了，我们可以先将100个li添加到文档碎片中，然后直接把这个文档碎片追加到ul中即可。所以文档碎片其实就是一个临时的仓库。如下代...

实现虚拟(Virtual) Dom把一个div元素的属性打印出来，如下：可以看到仅仅是第一层，真正DOM的元素是非常庞大的，这也是DOM加载慢的原因。相对于DOM对象，原生的JavaScript对象处理起来更快，而且更简单。DOM树上的结构、属性信息都可以用JavaScript对象表示出来：var element = { tagName: 'ul', // 节点标签名 props...

前端DOM知识点DOM即文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。DOM把网页和脚本以及其他的编程语言联系起来。DOM属于浏览器的，而非JavaScript语言规范里规定的核心内容。W3C规范中常用的DOM节点类型有以下几种：一、查找元素1.直接查找d...