07 2019 档案
摘要：单页面：SPA，只有一个主页面，浏览器一开始就加载所有的html、css、js。在交互时用路由动态载入，页面切换只刷新局部内容，不进行跳转。 多页面：MPA，一个应用中有多个页面，页面跳转时是整页刷新。 单页面的优点： 用户体验好 前后端分离 页面效果比较炫酷（比如切换页面内容时的专场动画） 单页面
阅读全文
摘要：当组件修改数据的时候必须通过store.dispatch来调用actions中的方法，当actions中的方法被触发的时候通过调用commit的方法来触发mutations里面的方法，mutations中的方法用来修改数据。因为数据是响应式的，因此视图的数据也会改变。
阅读全文
摘要：前端监控：获取用户行为以及跟踪产品在客户端的使用情况，以监控数据为基础，指明产品优化的方向。 分类：数据监控、性能监控、异常监控。 前端埋点：在系统中植入一些代码，检测用户行为，采集用户行为数据，进行后续的数据分析工作。 分类：手工埋点、可视化埋点、无埋点。
阅读全文
摘要：1、AMD requireJS规范，CMD seaJS规范。 2、AMD依赖前置，CMD依赖就近。 3、AMD的api默认是一个当多个用，CMD的api严格区分，推崇职责单一。
阅读全文
摘要：起因：每个模块完成系统要求的独立子功能，模块与模块之间的联系少并且接口简单。 高内聚：内聚 块内联系，单个模块内部各个元素彼此配合的程度，高内聚就是模块内部个元素紧密联系。 低耦合：耦合 快间联系，模块与模块之间配合的程度，低耦合就是降低各个模块间的联系。 优点：模块独立化，降低各模块间的联系，减少
阅读全文
摘要：http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name 协议：http: //为分隔符 域名：www.aspxfans.com :为域名和端口之间的分隔符 端口：8080 端口不是必须的，如果省略端口将使用
阅读全文
摘要：keep-alive：vue的一个内置组件，被keep-alive包裹的组件，第一次被创建后就会被保存在内存中，不会经历销毁，下次进行页面切换的时候会从缓存中读取。 属性： include：包括，需要被缓存的组件（字符串、正则） exclude：排除，不需要被缓存的组件（字符串、正则） max：最多
阅读全文
摘要：插槽：默认情况下，组件内部嵌套的标签或组件默认不会显示，如果需要显示就需要插槽。 作用：可以让封装的组件更加灵活。 匿名插槽： 1、在组件内部写<template>标签，需要嵌套的内容放在<template>标签内部，接一个指令v-slot。 2、在组件内部通过<slot></slot>接收嵌套的数
阅读全文
摘要：1、引入vue 2、引入插件 3、通过vue.use()调用 例子：使用router插件 import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter);
阅读全文
摘要：1、接口文档 2、postman接口测试 3、项目接口管理，将所有的接口放在同一个文件夹中进行管理
阅读全文
摘要：//数据序列化 和queryString字符串一样 config.headers["content-type"] = "application/x-www-form-urlencoded" //利用qs将数据进行二次转换 序列化 config.data=qs.stringify(config.dat
阅读全文
摘要：当父组件给子组件传递数据的时候，子组件只能读取，不能改写。因为如果子组件改变父组件传递过来的数据时会造成数据流难以理解。
阅读全文
摘要：const eventList = {} const $on = (eventName,callback)=>{ if(!eventList[eventName]){ eventList[eventName] = []; } eventList[eventName].push(callback) } const $emit = (eventName,par...
阅读全文
摘要：什么是路由？ 根据不同的url展示不同的页面或者数据。 分类：路由分为前端路由和后端路由。 前端路由：主要用于单页面的开发，根据用户请求的地址来渲染不同的页面。前端路由不会经过后端，而是根据hash值的变化进行页面数据的渲染，所以不会刷新，不跳转。 原理：通过hashRouter（onhashcha
阅读全文
摘要：defer async、await 动态创建DOM jQ的getScript()方法 window.onload()、$(document).ready() Promise setTimeout、setInterval 将script标签放在body底部
阅读全文
摘要：1、回调 2、Promise 3、generator 4、async，await
阅读全文
摘要：ES5新增：（IE9级以上支持）1、forEach()：遍历数组，无返回值，不改变原数组。2、map()：遍历数组，返回一个新数组，不改变原数组。3、filter()：过滤掉数组中不满足条件的值，返回一个新数组，不改变原数组。4、reduce()：让数组的前后两项进行某种计算，然后返回其值，并继续计
阅读全文
摘要：Object.is() 判断是否全等，和 一样Object.assign() 对象的复制Object.keys() 以数组的形式返回所有可遍历属性的键名，原型上的属性不能遍历Object.values() 以数组的形式返回所有可遍历属性的键值，原型上的属性不能遍历Object.entries() 以
阅读全文
摘要：js操作DOM时发生了什么？ js每次操作DOM都出发了回流，这非常的消耗性能。 什么是文档碎片容器？ document.createDocumentFrgement() 用于暂时存放创建的DOM元素。 文档碎片容器有什么用？ 将需要添加到body中的元素先添加到碎片容器中，再把碎片容器插入到对应的
阅读全文
摘要：元素出现在可视区 scorll滑动的距离>=当前元素距离浏览器最顶端的高度+当前元素自身的高度-当前可视区的高度 触底 scorll滑动的距离>=当前scroll总高度-当前可视区的高度
阅读全文
摘要：第一种方法： 1 var arr = [1, 4, 5, 7, 3, 2, 1, 5, 6, 7, 1, 3, 5, 7, 2, 4, 6, 7]; 2 var arr1=[]; 3 for(var i=0;i<arr.length;i++){ 4 var item=arr[i]; 5 var fl
阅读全文
摘要：bind() 直接绑定在元素上 live() 通过冒泡的方式绑定到元素上，更适合于列表类型的绑定，和bind()相比，支持动态数据 delegate() 精确的小范围的适用事件代理，性能优于live() on() 1.7版本整合前面三种的事件绑定机制
阅读全文
摘要：中间件：请求和回复之间的一个应用。 分类：内置中间件、第三方中间件、自定义中间件、报错中间件、日志中间件、路由中间件…… 使用：app.use([path],(req,res,next)=>{}) 参数一：request 客户端向服务端请求发送的数据 参数二：response 服务端返回给客户端的数
阅读全文
摘要：第一次握手：建立连接时，客户端向服务端发送SYN（同步序列编号），其中包含客户端的初始序号seq（序列号）=x，并进入SYN_SENT（请求连接）状态，等待服务器确认。 第二次握手：服务器收到请求后，必须确认客户端的数据包，同时自己也发送一个SYN（同步序列编号）包，即SYN（同步序列编号）+ACK
阅读全文
摘要：判断global对象，如果是window，就是运行在浏览器中，如果global对象是undefined，则运行在node中。
阅读全文
摘要：组件：页面上的任何一个部分都是一个组件，组件由html，css，js组成。 特点：灵活、复用、便于维护。 创建方式： 全局组件：任何vm都可以用 Vue.component() Vue.component("navTo",options); 参数一：组件名称 参数二：组件的配置项，vue的配置中有什
阅读全文
摘要：生命周期：一个组件从创建到销毁的过程。 beforeCreate：创建前。 当组件初始化的时候会执行beforeCreate，在当前生命周期中无法访问data中的属性和methods中的方法，因为当前生命周期是初始化阶段，因此我们可以在当前生命周期中加一个loading等待组件加载完以后再移除loa
阅读全文
摘要：webpack：模块打包机。 分析项目结构，找到js模块和其它一些浏览器不能直接运行的拓展语言（scss、typescript等），并将其打包为合适的合适供浏览器使用。 工作方式：把项目当做一个整体，通过一个给定的文件（index.js），webpack从这个文件开始找到项目的所有依赖，使用load
阅读全文
摘要：如果两个实例引用同一个对象，当其中一个实例的属性发生改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会相互干扰。 这是因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。 组建中的data写成一个函数，数据以函数返回值的形
阅读全文
摘要：1、获取事件对象： var e=e||event; 2、阻止冒泡： e:stopPropagation?e:stopPropagation():e.cancelBubble=true; 3、阻止浏览器默认行为： e.preventDefaule?e.preventDefault():e.return
阅读全文
摘要：伪数组：length属性为非负整数，索引值为非负整数，没有数组的方法。 ES6：Array.from(伪数组) let newArr = [...arr] ES5：Array.prototype.slice.call(伪数组) ES5：Array.prototype.concat.apply([],
阅读全文
摘要：递归：函数自己调用自己。 循环：设置初始值和终止条件，在一个范围内重复运算。 递归的代码简洁性更高，但是会占用更多的内存，循环的代码可读性不如递归，但是效率会高一点。 应用场景：递归用于树状结构的查询，查询地区，菜单，对象的深复制。遍历的时候，需要多次进行同样的运算用循环。
阅读全文
摘要：v-if调用的是display的block和none，v-show是直接操作元素的创建和删除。 v-if应用于权限的验证，v-show应用于页面的展示，如果是频繁的切换页面，会比较消耗性能，这时候用v-show比较好。
阅读全文
摘要：computed：通过属性计算而得来的属性 1、computed内部的函数在调用时不加()。 2、computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行。 3、computed中的函数必须
阅读全文
摘要：Vue.directive() 全局自定义指令 Vue.filter() 全局过滤器 Vue.$set() 为响应式对象添加一个响应式属性 Vue.$delete() 删除属性 Vue.component() 创建全局组件 Vue.use() Vue.extend() Vue.nextTick()
阅读全文
摘要：1、解析HTML，构建DOM 2、解析CSS，构建CSSOM 3、JS脚本加载 4、将DOM和CSSOM组合生成Render Tree（渲染树） 5、遍历渲染树，将渲染树每个节点，进行页面的回流与重绘，生成页面 上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，
阅读全文
摘要：ES6新增：（IE9级以上支持） 1、forEach()：遍历数组，无返回值，不改变原数组。 2、map()：遍历数组，返回一个新数组，不改变原数组。 3、filter()：过滤掉数组中不满足条件的值，返回一个新数组，不改变原数组。 4、reduce()：让数组的前后两项进行某种计算，然后返回其值，
阅读全文
摘要：1、typeof：只能判断基本数据类型，不能判断引用数据类型 判断出来的都是Object string、number、boolean、undefined、object、function、symbol 2、instanceof：判断一个对象是否是一个类的实例 只能进行类型的对比，不能进行类型的判断 3
阅读全文
摘要：width: 200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 超出2行显示省略号： width: 200px; overflow: hidden; display: -webkit-box; -webkit
阅读全文
摘要：1、IE的事件流是冒泡流，火狐支持冒泡流和捕获流。 2、阻止事件冒泡：IE e.cancelBubble = true; 火狐 e.stopPropagation();
阅读全文
摘要：1、用户向服务器发送用户名和密码。 2、服务端收到请求，验证用户名和密码。 3、验证成功后，服务端会签发一个token，并将这个token发送到客户端。 4、客户端收到token后将token存储起来，存在cookie或者localStorage里。 5、用户之后的每次请求都将token发送到服务器
阅读全文
摘要：节点：html文档中的每一个成分都是一个节点。 节点的分类：元素节点和普通节点。 细分：根节点 html 元素节点 标签 属性节点 元素的属性 文本节点 元素中的文本 注释节点 注释 节点的属性： 节点的遍历： 所有子元素：children 所有子节点：childNodes 父元素：parentEl
阅读全文
摘要：innerHTML：返回标签内部嵌套的子元素的所有html标签+文本内容content。 innerText：返回标签内部嵌套的子元素的文本内容content。 outerHTML：返回标签本身+嵌套的子元素的所有html标签+文本内容content。 outerText：返回标签本身+嵌套的子元素
阅读全文
摘要：什么是ES5？ ECMA Script5：ECMA（欧洲计算机制造联合会）的第五次改版，2009年。 js中的'use strict'是什么？ js的严格模式 目的： ①添加更多报错的场合，消除代码的一些不安全之处，保证代码运行的安全。 ②提高编辑器效率，提高运行速度。 ③为新版本的JavaScri
阅读全文
摘要：arguments：函数的实参副本，它是一个类数组。 使用场景：只能在函数内调用，严格模式下不能用。 函数的形参个数：fn.length 函数的实参个数：arguments.length arguments的下标：arguments[] 下标值[0,arguments.length-1] 当前函数：
阅读全文
摘要：变量的生命周期： js中有两种变量，全局变量和局部变量，局部变量在函数运行完自动删除，而全局变量在浏览器关闭时删除。 什么是垃圾？ 没有被引用的对象。 什么叫内存泄漏？ 当一块内存已经不需要了，但是它还存在，这种东西多了就会造成内存泄漏。 什么情况会引起内存泄漏？ 1、全局变量 解释：局部变量在函数
阅读全文
摘要：什么叫jQuery的核心对象？ $ $ jQuery 什么叫jQuery的原型对象？ $.fn $.fn $.prototype 什么叫静态方法？ 在构造函树上定义的方法，静态方法通过构造函数去调用。例如：Math.random() 什么叫动态方法？ 动态方法也叫实例方法，在原型对象上添加的方法叫动
阅读全文
摘要：id选择器>类选择器>元素选择器 规则：选择器的权重值表述为4个部分，用0,0,0,0表示。 通配符*的权重为0,0,0,0 标签选择器、伪元素选择器的权重为0,0,0,1 类选择器、属性选择器、伪类选择器的权重为0,0,1,0 id选择器的权重为0,1,0,0 行内样式的权重为1,0,0,0 !i
阅读全文
摘要：content-box：默认标准盒模型，总宽=width+padding+border+margin border-box：IE标准，怪异盒模型，总宽=width+margin inherit：从父元素继承box-sizing属性
阅读全文
摘要：什么是跨域：不符合同源策略，也就是协议、IP、端口有一个不一致就是跨域，从而限制交互行为。 为什么会出现浏览器跨域限制：避免数据出现安全问题，如果没有跨域限制，可以随意读取任意域名下的cookie，很容易发生CSRF攻击。 对于浏览器来说，哪些资源会受到同源策略的限制：DOM、cookie、XMLH
阅读全文
摘要：浮动：使元素脱离文档流，按照指定的方向，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。 特性：浮动分为左浮动和右浮动，可以使块级元素横着排。 浮动的内联元素可以设置宽高。 支持margin，但是不可以设置auto值。 脱离文档流 提升半层级 问题：浮动会造成父级盒子高度塌陷，因为飘起来了嘛，要
阅读全文
摘要：document.getElementById();//id名 document.getElementsByTagName();//标签名 document.getElementsByClassName();//类名 document.getElementsByName();//name属性值，一般
阅读全文
摘要：盒子模型：可以看做是一个盒子，包括外边距、边框、内边距、实际内容。 flex布局：弹性布局，灵活性好。 当给元素设置display:flex时，它就是flex容器，它的所有子元素自动成为容器成员，称为flex项目，简称项目。 容器所具有的属性：display、flex-direction、flex-
阅读全文
摘要：function cloneObj(source, target) { if (!target) { if (source.constructor RegExp) { target = new RegExp(source.source, source.flags) } else { target =
阅读全文
摘要：String.prototype.trim1=function(){ return this.replace(/(^\s*)|(\s*$)/g,""); }; 写一个function，清除字符串前后的空格（兼容所有的浏览器） function trim1(str){ return str.repla
阅读全文
摘要：原理：利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。 作用：减少DOM操作，节省内存空间，提高性能。
阅读全文
摘要：①get比post快 ②get体积小，post可以无限大 ③get在浏览器退回时无害，post会再次请求 ④get的url参数可见，post不可见 ⑤get请求数据放在url，post数据放在http包体（request body） ⑥get请求参数会保留历史记录，post不会保留（无痕浏览） ⑦g
阅读全文
摘要：var ul = document.querySelector("ul"); ul.addEventListener("mousedown", mouseHandler); function mouseHandler(e) { e.preventDefault(); if (e.target.nod
阅读全文
摘要：<script> console.log(getUrlArr()); function getUrlArr() { var arr = []; var url = "http://192.1.1.1:1111/test.html?a=1&b=2&c=3&d=4"; var str = url.spl
阅读全文
摘要：存储大小： cookie在4K以内。 sessionStorage和localStorage在5M以内。 有效时间： cookie：如果未设置过期时间，关闭浏览器时清空；如果设置了有效时间则在到期后清空。 sessionStorage：关闭浏览器时清空。 localStorage：关闭浏览器不清空，
阅读全文
摘要：①给父元素单独定义高度 优点：简单快速、代码少。 缺点：无法进行响应式布局。 ②在标签结尾处加空div标签<div style="clear: both"></div> 优点：简单快速、代码少，兼容性较高。 缺点：增加空标签，不利于页面优化。 ③父级定义overflow:hidden 优点：简单快速
阅读全文
摘要：1、存储数据：localStorage.setItem("属性","属性值") 2、获取本地存储的值：localStorage.getItem("属性") 3、删除指定key：localStorage.removeItem("属性") 4、清楚网站在本地保存的所有数据：localStorage.cl
阅读全文
摘要：1、小于12px的字体，如果内容固定，可以将内容切除做图片，没有兼容问题。 2、-webkit-text-size-adjust:none;老版本谷歌，27版本之后无用 3、-webkit-transform:scale(0.8);c3的新属性，但是使用这个之后，如果该标签有背景图，那背景图也会被缩
阅读全文
摘要：1、服务器端代理：在服务器端设置一个代理，由服务器端向跨域下的网站发出请求，再将请求结果返回给前端。 属于后端的技术，实现起来最麻烦。 2、jsonP，只支持get方式调用。 3、XHR2（cors），只支持H5，IE10以下不支持。
阅读全文
摘要：1、forEach遍历： map.forEach(function(value,key){ console.log(value,key); }); 函数中第一个参数是属性值，第二个参数是属性 2、for-of遍历： ①for(let item of map){ } 遍历结果是数组 ②for(let
阅读全文
摘要：display:none隐藏时不占位，当再次显示时会发生页面回流和重绘，visibility:hidden隐藏时占位，当再次显示时不会回流和重绘，所以display:none是彻底隐藏了，visibility:hidden的性能要高一些。 display:none不会被子元素继承，visibilit
阅读全文
摘要：prototype：每个函数都有一个prototype属性，这个属性指向一个对象，这个对象叫原型对象。 作用：节约内存、扩展属性和方法、可以实现类之间的继承 __proto__：每个通过构造函数new出来的实例对象都有一个__proto__属性，它指向创建自己的构造函数的原型对象，即fn.__pro
阅读全文
摘要：innerHTML 输出当前标签的文本内容，如果标签内有子标签，会连子标签本身和子标签内的文本内容一起输出。 #outer输出子标签本身和子标签的内容：<span id="inter">text</span> #inter输出当前标签内容：text innerText 只输出当前标签内的文本内容，如
阅读全文
摘要：三个方法的参数1都代表子串开始位置，参数2在slice和substring中表示结束位置，而在substr中代表的则是子串长度； 对于负数态度，当出现在参数1的位置时，slice和substr从末尾开始计算，而substring不支持末尾计数法直接视为0；当出现在参数2位置时，slice和subst
阅读全文
摘要：对象的地址（变量名）存在栈中，对象的引用（值）指向堆中，比较对象的时候，是比较对象的引用是否相等。两个内容一样的对象，他们的引用地址分别指向堆中的两块数据，所以他们不相等。
阅读全文
摘要：①var obj1=obj;这是将obj在堆中的引用地址赋值给obj1，这样复制的对象一改全改。 ②assign()方法：仅可以复制可枚举属性（此处应注意原型链属性是不可枚举属性）,assgin()复制对象时，第一层没有引用关系（当对其中一个对象进行更改和删除时，另外一个不受影响），后面层有引用关系
阅读全文
摘要：this的值是在【函数执行时】决定的，而不是【函数定义时】决定的 ①一般情况下，普通函数里，this window ②在对象的方法中，this 该对象 ③在事件函数中，this 事件侦听的对象 ④call、apply、bind中的this，指向第一个参数对象,如果传入的参数是null，那么this原
阅读全文
摘要：Promise是一个异步加载的方式，处理时使用new Promise返回一个对象，该对象可以调用then方法，then方法中有两个参数，第一个参数是加载成功时执行，第二个参数是加载失败时执行，then方法中可以通过返回Promise进行链式调用。 Promise的三个状态： 初始化：状态：pendi
阅读全文
摘要：加载优化：1、合并css、JavaScript 2、合并小图片，使用精灵图 3、缓存一切可缓存的资源 4、使用长cache 5、使用外联式引用css、JavaScript 6、压缩HTML、CSS、JavaScript 7、使用Gzip压缩内容 8、使用首屏加载 9、使用按需加载 10、使用滚屏加载
阅读全文
摘要：节流：在input输入框中，每隔n毫秒执行一次判断。 防抖：在input输入框中，不停地输入字符，当过了n毫秒后，执行判断，如果在n毫秒中又输入了字符，则重新计算等待时间。
阅读全文
摘要：前言： 闭包是js中最强大的特性，也是js相较于其他语言最令人着迷的地方，如果你对它研究的透彻，你会为它着迷，否则你会被吓住。 请仔细阅读文中的判断句，如果对某句话不理解可以留言，我会回复的，或者一起讨论怎么描述更为准确。 闭包的前置知识点： 1、在函数中如果不使用var定义变量，那么js引擎会自动
阅读全文
摘要：const：ES6新增关键字，用于声明创建一个值的只读引用。 我们都知道，const一般用来定义常量，在声明的时候需要赋初始值，而且初始值一旦赋值，便不能改变。 但是以上说的是针对于基本类型数据的定义，对于引用类型的定义，不可变的是const绑定的指针，而它的属性可以任意修改。 说人话： 如果我用c
阅读全文
摘要：var：定义变量，没有块的概念，可以跨块访问，不能跨函数访问。 let：定义变量，只能在块级作用域中访问，不能跨块访问，不能跨函数访问。 const：定义常量，定义时必须赋初始值，一旦定义不能修改，只能在块级作用域里访问。 let和const作为ES6语法，有作用域：
阅读全文
摘要：服务端渲染：DOM树在服务端生成，然后返回给前端。 客户端渲染（SSR）：前端去后端取数据生成DOM树。 服务端渲染的优点： 1、尽量不占用前端的资源，前端这块耗时少，速度快。 2、有利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息。 服务端渲染的缺点： 1、不利于前后端分离，
阅读全文
摘要：报文：网络中交换与传输的数据单元，即站点一次性要发送的数据块（百度百科）。 HTTP报文：用于HTTP协议交互的信息，它是由字符串文本组成。客户端的HTTP报文叫做请求报文，服务端的HTTP报文叫做响应报文。 一次完整的HTTP请求经历的7个步骤： 1、建立TCP连接 2、WEB浏览器向WEB服务器
阅读全文
摘要：当我们输入地址的时候，浏览器就开始在匹配可能的url，在书签、历史记录等地方查找，然后给出提示，让用户可以补全url地址。 当网址完全输入，按下回车键时，浏览器做的第一件事就是DNS解析。浏览器会先去本地的hosts文件中看看有没有和这个域名对应的ip，如果有就打开这个ip，没有的话浏览器会发送DN
阅读全文
摘要：模块：简而言之就是一个一个的功能。 模块化：将一个大文件拆分成独立并相互依赖的小模块，这个过程就叫模块化。 好处：①避免命名冲突。 ②更好的分离，按需加载。 ③具有良好的复用性。 ④方便维护。 常用的模块化开发的方案： 1、commonJS 用module.exports将模块导出，可以导出对象、函
阅读全文
摘要：什么是DOM渲染： DOM渲染是浏览器展现给用户的DOM文档的生成的过程。 DOM渲染的演化过程： ①纯后端渲染 ②纯前端渲染 ③服务端的js渲染结合前端渲染 纯后端渲染：DOM树的生成完全是在后端服务器中完成，服务器的程序会把各种的数据拼成一个DOM树。采用这样的渲染方式，就是每一个页面中，在Ch
阅读全文
