Menqq的博客

判断对象中对象长度个数

let time = new Date(); // 当前时间 let y = time.getFullYear(); // 年 let M = time.getMonth() + 1; // 月 let d = time.getDate(); // 日 let h = time.getHours(); // 时 let m = time.getMinutes(); // 分 let s = time.getSeconds(); // 秒 co...

.m.replace(/\"/g, '')

html CSSpch5新增的属性亮点websocketweb wokerservice woker盒模型亮点怪异盒模型标准和模型响应式布局亮点自己实现栅格系统视口BFC移动端300ms延时不同的手机根据什么适配1像素弹性盒JSES5原型原型链面向对象闭包闭包作用域this指向ES6新特性数组常用方法promise异步宏任务微任务并发实现一个多并发怎么操作给两个接口’/api’ ‘/user’，问使用并发怎么实现数据返回,同时启用两

通过禁用右键选项卡的方式来禁用复制粘贴以及其他操作。JS 中的 button 事件属性来实现鼠标右键的禁用。通过弹出提示框来代替右键选项卡。button 事件属性用于当事件被触发时哪个鼠标按键被点击，它返回一个整数，描述参数规定鼠标左键0规定鼠标中键1规定鼠标右键2event.button==0|1|2;function click() { if (event.button==2) { alert('对不起，本页禁用右键！') } }

Axios是尤雨溪大神推荐使用的，它也是对原生XHR的二次封装。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios安装 安装： npm install axios --save 引入： import Axios from './axios' 使用 ：Vue.prototype.axios = Axios;（全局注册 在使用时可以使用this.$axios使用）特性：可以在Node环境中配合Express()使用实现异步的数据交互提

for in 遍历合并var obj1={name:"men",age:24}var obj2={myname:"qq",age:18}//for in 遍历合并for(let err in obj2){obj1[err]=obj2[err];}console.log(obj1)//{name:"men",age:24,myname:"qq",age:18}...语法合并var obj3={...obj1,...obj2};console.log(obj3);//{name.

display: noneDOM 结构：浏览器不会渲染 display 属性为 none 的元素，会让元素完全从渲染树中消失，渲染的时候不占据任何空间；事件监听：无法进行 DOM 事件监听，不能点击；性能：修改元素会造成文档回流（reflow 与 repaint）,读屏器不会读取display: none元素内容，性能消耗较大；继承：是非继承属性，由于元素从渲染树消失，造成子孙节点消失，即使修改子孙节点属性子孙节点也无法显示，毕竟子类也不会被渲染；场景：显示出原来这里不存在的结构；tran..

浏览器使用流式布局模型 (Flow Based Layout)。浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。.

浅拷贝与深拷贝无论是深拷贝还是浅拷贝，必然会产生一个全新的对象，这个全新的对象和原对象的保持一致性的深浅取决于拷贝的深度。要始终明确的一点：拷贝的对象与源对象没有任何关系，它在堆中是一个独立的实体，占据独立的内存地址，与原对象没有任何引用与指向关系。深拷贝与浅拷贝的区别：浅拷贝是将栈内存中的引用复制一份，赋给一个新的变量，本质上两个指向堆内存中的同一地址，内容也相同，其中一个变化另一个内容也会变化。深拷贝是创建一个新的空对象，开辟一块内存，然后将原对象中的数据全部复制过去，完全切断两个对象

call的本质是一个函数Function.prototype.call = function(context){　　// this表示某函数,函数里面的this先被替换成context,然后再执行　　this.bind(context)();}Function.prototype.call.call(context);// 相当于this.bind(context)();// this指Function.prototype.call,于是相当于Function.prototype.cal

浏览器事件循环，那么意味着，必须是个闭环才能称之为循环。JS引擎也被成为，事件队列；JS执行队列，指的是它会按照先后顺序来执行；JS是单线程，之所以说单线程（没有办法去操作JS的多线程），是因为浏览器没有给JS去提供多线程，所以说它就是单线程；它没有给api让你开启一个多线程，它所有的东西都是给你安排好了，然后按照步骤一步一步执行，然后让你感觉它就是一个单线程；实际上，浏览器整个的JS实行机制它是一个多线程，不过这多线程的机制把握在v8内核引擎里面，v8内核引擎它是多线程；刚一开始进入到JS的时

在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了。其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。vue生命周期ke

vuex 同步请求和异步请求vue组件 class组件和函数式组件vue组件传值跨组件传值路由实现的原理a标签和router-link的区别路由守卫指令 v-show 和 v-if区别v-model.lazyv-on:click v-on:click.stopelement使用table上家公司用过什么技术vue技术栈 vuex 流程 state 属性 vue实例中如何调用vuex中的数据vue生命周期单页面项目..

Node 应用由模块组成，采用 CommonJS 模块规范。每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。// example.jsvar x = 5;var addX = function (value) { return value + x;};上面代码中，变量x和函数addX，是当前文件example.js私有的，其他文件不可见。如果想在多个文件分享变量，必须定义为global对象的属性。global.warning =

ECMAscript 6 原生提供了 Promise 对象。PromisePromise 对象代表了未来将要发生的事件，用来传递异步操作的消息，是一套异步操作处理机制。Promise对象解决回调地狱层层嵌套的问题。通过then方法分别制定resolved状态和rejected状态的回调函数。一、Promise特点 可以在一系列异步操作中，灵活地处理错误,避免了层层嵌套的回调函数。Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不

offsetWidth/offsetHeight返回值包含content + padding + border，如果有滚动条，也不包含滚动条,效果与e.getBoundingClientRect()相同clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸参考：https://docs.microsoft.com/e.

什么是web语义化如今互联网都到了web2.0的时代了，HTML语言在不断的进化并发挥着越来越重要的地位；而我们制作网页也从当初的table表格嵌套发展到了div+css，这是进步的标志。然而，我们似乎看到了一个不太好的现象：整个网页大量的使用div标签进行分隔页面内容，有的甚至整个页面只有div一种html标签存在。这种现象(使用习惯)非常的不好，滥用现象使得网页制作似乎就只剩下了div。刚才说了，时代是在进化着的，所以，诞生了web语义化这个概念。而它又包含两个方面：html语义化及css命名

display:block将元素显示为块级元素。block元素的特点是：总是在新行上开始；处于常规流中，width没有设置会自动填满父容器高度没有设置的情况下，会被处于常规流中的子元素撑开高度，行高以及顶和底边距都可控制；margin，pading生效vertical-align无效宽度缺省是它的容器的100%，除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

visibility: hidden;和baidisplay: none; 在作用、对HTML元素的影响、定义上有所不同;1、作用不同visibility: hidden：将元素隐藏，但是在网页中该占的位置还是占着。display: none：将元素的显示设为无，即在网页中不占任何的位置。2、使用后HTML元素不同visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。display

GIF：256色无损，编辑 保存时候，不会损失。支持简单动画。支持boolean透明，也就是要么完全透明，要么不透明JPEG：millions of colors有损压缩， 意味着每次编辑都会失去质量。不支持透明。适合照片，实际上很多相机使用的都是这个格式。PNG：无损，其实PNG有好几种格式的，一般分为两类：PNG8和truecolor PNGs；与GIF相比：它通常会产生较小的文件大小。它支持阿尔法（变量）透明度。无动画支持与JPEG相比：文件更大无损

specified value（规范值）: 计算方法如下： 如果样式表设置了一个值，使用这个值 如果没有设置值，这个属性是继承属性，从父元素继承 如果没设置，并且不是继承属性，使用css规范指定的初始值computed value（计算值）:以specified value根据规范定义的行为进行计算，通常将相对值计算为绝对值，例如em根据font-size进行计算。一些使用百分数并且需要布局来决定最终值的属性，如width，margin。百分数就直接作为computed value。lin

建议使用link，慎用@import1. 兼容性不同link是XHTML的标签,无兼容性问题；@import是在CSS2.1时候提出的，由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别2.从属关系link：link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性@import：@import是css提供的语法，只有导入样式表的作用,只能加载CSS3.加载顺序不同link：link在页面加载时CSS同时被加载@impor

什么是CSS Hack由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS Hack!CSS Hack的原理由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览

概念将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。优点减少 HTTP 请求数，极大地提高页面加载速度增加图片信息重复度，提高压缩比，减少图片大小更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现缺点图片合并麻烦维护麻烦，修改一个图片可能需要重新布局整个图片，样式联系它们都能让元素不可见区别display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidd

*通用选择器：选择所有元素，不参与计算优先级，兼容性 IE6+#X id 选择器：选择 id 值为 X 的元素，兼容性：IE6+.X 类选择器： 选择 class 包含 X 的元素，兼容性：IE6+X Y 后代选择器： 选择满足 X 选择器的后代节点中满足 Y 选择器的元素，兼容性：IE6+X 元素选择器： 选择标所有签为 X 的元素，兼容性：IE6+:link，:visited，:focus，:hover，:active 链接状态： 选择特定状态的链接元素，顺序 LoVe HAte，兼容性: I

观察者模式（Observer Pattern）观察者模式是一种对象行为模式，它定义对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新，在观察者模式中，主体是通知的发布者，它发出通知时并不需要知道谁是它的观察者，可以有任意数目的观察者订阅并接收通知。观察者模式不仅被广泛应用于软件界面元素之间的交互，在业务对象之间的交互、权限管理等方面也有广泛的应用。观察者模式（Observer）完美的将观察者和被观察者的对象分开，假如说用户界面可以作为一个观察者，业务数

Proxy 是什么?Proxy 是由 ES6 原生提供的一个构造函数Proxy 指在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。作用Proxy 的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。使用方法参数Proxy 作为一个构造函数，它接受两个参

javaScript具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中使用的内存。而在C和C++之类的语言中，开发人员的一项基本任务就是手工跟踪内存的使用情况，这是造成许多问题的一个根源。在编写javaScript程序时，开发人员不用关心内存使用问题，所需内存的分配以及无用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实很简单：找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间），周期性的执行这一操作；如上图：java

防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。防抖函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。// 防抖function debounce(fn, wait) { var timeout = null;

一. Sass/Scss、Less是什么?Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。Sass与S

闭包（closure）是 JavasSript 的一大难点，也是它的特色。很多高级应用都要依靠闭包来实现。闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。为什么要使用闭包？先介绍一下全局变量和局部变量的优缺点全局变量：可以重用、但是会造成全局污染而且容易被篡改。局部变量：仅函数内使用不会造成全局污染也不会被篡改、不可以重用。所以，.

newnew 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一模拟 new 之前，先看看 new 实现了哪些功能。例子：// Otaku 御宅族，简称宅function Otaku (name, age) { this.name = name; this.age = age; this.habit = 'Games';}// 因为缺乏锻炼的缘故，身体强度让人担忧Otaku.prototype.strength = 60;Otaku.p

cookie能存储内容较小，在4k左右，一般用作保存用户登录状态、记住密码，记住账号使用。不清除的话会一直存在，可以设置过期时间自动清除，设置的时候可以设置在不同的域下面。每次在和服务端交互都会放在header里面，所以若是储存太多会影响性能。localStoragelocalStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。sessio

为什么需要原型及原型链？看一个例子：function Person(name, age) { this.name = name; this.age = age; this.eat = function() { console.log(age + "岁的" + name + "在吃饭。"); }}let p1 = new Person("menmen", 24);let p2 = new Person("menmen", 24);console.log(p1.eat =

一、bind、call、apply函数的实现改变函数的执行上下文中的this指向，但不执行该函数(位于Function构造函数的原型对象上的方法)Function.prototype.myBind = function (target) { if (typeof this !== 'function') { throw Error('myBind is not a function') } var that = this var args1 = [...a