04 2020 档案
摘要：XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。 最早，微软在IE 5引进了这个接口。因为它太有用，其他浏览器也模仿部署了，ajax操作因此得以诞生。 但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。HTML 5的概念形成后，W3C开
阅读全文
摘要：简单请求 对于简单请求，浏览器直接发出 CORS 请求。具体来说，就是在头信息之中，增加一个Origin字段。 下面是一个例子，浏览器发现这次跨域 AJAX 请求是简单请求，就自动在头信息之中，添加一个Origin字段。 GET /cors HTTP/1.1 Origin: http://api.b
阅读全文
摘要：本地存储 sessionStorage、localStorage File API H5在DOM中为文件输入元素添加了一个files集合，在选择了一或多个文件时，files集合中将包含一组File对象，每个File对象对应着一个文件。每个File对象都有下列只读属性： name: 本地文件系统的文件
阅读全文
摘要：object-fit和object-position里面都出现了object，这个object是什么呢？多方了解(MDN)，其实这个object是指的替换元素(Replaced element) 比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比如,img元素的内容通常
阅读全文
摘要：diff算法使只更新我们修改的那一小块dom而不要更新整个dom： 在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较： 判断是否是相同节点： function sameVnode (a, b) { return ( a.key b.key && // key值 a.tag
阅读全文
摘要：vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的： 1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者； 2.实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视
阅读全文
摘要：babel配置 https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md vue cli3下的vue.config.js配置 https://segmentfault
阅读全文
摘要：CDN全称：Content Delivery Network，即内容分发网络。 前端性能优化有一条就是把静态资源放到CDN上。那CDN是啥？为什么又快呢？ 其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访
阅读全文
摘要：CommonJS与ES6 Module最本质的区别在于CommonJS对模块依赖的解决是“动态的”而ES6 Module是“静态的”； 即commonjs是运行时加载模块，ES6是在静态编译期间就确定模块的依赖； ES6在编译期间会将所有import提升到顶部，commonjs不会提升require
阅读全文
摘要：1、通过配置入口文件来进行分割包，这是最简单和最直接的方式，但是这种方式有一定缺点，可能造成重复引用的模块重复被打包； 2、使用splitChunksPlugin来进行公共模块的提取（被optimizition.splitchunk取代）； 3、通过动态代码加载来分割代码，使用import()方法，
阅读全文
摘要：基于 Proxy 的观察者机制 目前，Vue 的反应系统是使用 Object.defineProperty 的 getter 和 setter。 但是，Vue 3 将使用 ES2015 Proxy 作为其观察者机制。 这消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。 为了继续支持 IE1
阅读全文
摘要：原因 Java和JavaScript中计算小数运算时，都会先将十进制的小数换算到对应的二进制，一部分小数并不能完整的换算为二进制，这里就出现了第一次的误差。待小数都换算为二进制后，再进行二进制间的运算，得到二进制结果。然后再将二进制结果换算为十进制，这里通常会出现第二次的误差。 解决办法 加法 fu
阅读全文
摘要：组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响。
阅读全文
摘要：1 实现数组的reduce方法 if (!Array.prototype.reduceC) { Array.prototype.reduceC = function(callback /*, initialValue*/) { 'use strict'; if (this null) { throw
阅读全文
摘要：fetch 1 fetch是基于promise实现的，用的时候可以结合async/await；2 fetch请求默认是不带cookie的，需要设置fetch（URL，{credentials:’include’})，Credentials有三种参数：same-origin，include，omit：
阅读全文
摘要：基本使用 axios({ method: 'get', // get，获取数据;post，提交数据（表单提交以及文件上传）;put，更新数据 （提交所有的数据）;patch，提交数据 （提交修改的数据）;delete，删除数据 url: '', params: {} }).then(res => {
阅读全文
摘要：减少http请求 1 合理使用http缓存； 2 CSS Sprites，通过合并 CSS图片减少请求数； 把非常多小图片集中到一张图片上这样在仅仅须要一个HTTP请求-响应，下载一次之后不管是该页面还是网站其他页面使用这张大图上的图片的时候就能够使用缓存，不会带来重复下载的开销。所以仅仅有一个HT
阅读全文
摘要：模块化、组件化、规范化、自动化 模块化 模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。 js模块化 用浏览器的<script type="module">加载； 用Webpack将所有模块打包成一个文件同步加载，也可以搭乘多个chunk异步加载； css模块化 资源模块化 规
阅读全文
摘要：单页面 缺点： 首屏加载时间长； 不利于seo（搜索引擎优化）； 浏览器的前进后退的导航不可用； 页面的复杂度提高很多； 优点： 页面切换快； 服务器压力小； 页面切换时效果炫酷（可以加切换动画）； 为什么单页面首屏加载时间长？ 首屏要加载很多需要的js文件，会阻碍页面渲染，导致白屏或加载缓慢 优化
阅读全文
摘要：常用的数据结构有：数组，栈，链表，队列，树，图，堆，散列表等 每一种数据结构都有着独特的数据存储方式 数组 使用场景：频繁查询，对存储空间要求不大，很少增加和删除的情况
阅读全文
摘要：产生原因 有时候，我们在添加图片img标签后并没有给该标签设置magrin属性的margin-bottom值，在浏览器中打开就会出现图像底部留白，为什么为造成这个原因？ 下面就来进行分析：由于img元素默认为inline-block元素（有inline元素特点），而inline元素的vertical
阅读全文
摘要：var arr = [1, 2, 3, 4, 5]; arr.sort((a, b) => { return Math.random() > 0.5 ? -1 : 1; // 如果a<b不交换，否则交换，即升序排列；如果a>b不交换，否则交换，即将序排列 }); console.log(arr);
阅读全文
摘要：var arr = [-1, 1, 101, -52, 10, 1001, 1001]; Math.max(...arr); // 1001 var arr = [-1, 1, 101, -52, 10, 1001, 1001], max; arr.forEach((item, i) => { ma
阅读全文
摘要：js兼容问题 1 阻止事件冒泡： //js阻止事件传播，这里使用click事件为例 document.onclick=function(e){ var e=e||window.event; if (e.stopPropagation) { e.stopPropagation();//W3C标准 }e
阅读全文
摘要：[a-z] ：匹配小写字母从a-z中的任一字符；[0-9a-zA-Z] ：匹配数字从0-9，小写字母从a-z或者是大写字母从A-Z的任一字符；[abcd] ：匹配字符abcd中的任一字符；[^a-z] ：匹配除小写字母从a-z以外的任一字符；[^abcd] ：匹配除abcd以外的任一字符； \d ：
阅读全文
摘要：babel是js的编译器 注意很重要的一点就是，Babel 只是转译新标准引入的语法，比如： 箭头函数 let / const 解构 哪些在 Babel 范围外？对于新标准引入的全局变量、部分原生对象新增的原型链上的方法，Babel 表示超纲了。 全局变量 Promise Symbol WeakMa
阅读全文
摘要：通配符选择器：* id选择器： #item； 类选择器：.item； 元素选择器： li； 子选择器：ul>li； 相邻选择器：div+p； 和div下边紧挨着的第一个p元素 匹配选择器：div~p； 匹配所有在div之后出现的所有同级的元素p 属性选择器： [attr] <div id="3">3
阅读全文
摘要：flex-grow:：当父控件还有剩余空间的时候，是否进行放大(grow)，其中数值代表的是放大比例，值为0的时候表示不放大； flex-shrink：当父控件空间不够的时候，是否进行缩小(shrink)，其中数值代表的是缩小比例，值为0的时候表示不缩小； flex-basis：表示在flex it
阅读全文
摘要：instanceof用于判断引用类型，不能判断普通数据类型！ instanceof 用于判断某个对象是否是另一个对象（构造方法）的实例。instanceof会查找原型链，直到null如果还不是后面这个对象的实例的话就返回false，否则就返回true function instanceofFun(o
阅读全文
摘要：1 如何判断一个对象为纯对象： var obj={a: 1}; console.log(Object.prototype.toString.call(obj) '[object Object]'); // true 2 实现如下效果，点击另一个时候下划线有一个移动的动画效果： 使用transitio
阅读全文
摘要：encodeURI和encodeURIComponent 这两个方法可以对url进行编码 encodeURI方法不会对下列字符编码： ASCII字母、数字、~!@#$&*()=:/,;?+' encodeURIComponent方法不会对下列字符编码 ： ASCII字母、数字、~!*()' 所以en
阅读全文
摘要：1 实现多维数组去重排序： var arr = [8,5,4,7,3,2,[2,9,5,3,0,4,[4,3,1,9,0,5]]], a = [], item; function s(arr){ for(item of arr){ if(Array.isArray(item)){ s(item);
阅读全文
摘要：模板转换成视图的过程 在底层实现中Vue会将模板编译成渲染函数，当然我们也可以不写模板，直接写渲染函数，以获得更好的控制。 渲染函数：渲染函数是用来生成Virtual DOM的；VNode虚拟节点：vnode可以理解成dom节点的描述对象，它描述了应该怎样去创建真实的DOM节点；patch(patc
阅读全文
摘要：单点登陆：在多个应用系统中，只需要登录一次，就可以访问其他相互信任的应用系统； 多点登陆：多个端同时登录一个帐号，同时收发消息； 消息漫游：在任何一个终端的任何一个实例登录qq，都能够拉取到所有历史聊天消息，这个就是消息漫游；
阅读全文
摘要：html中，<canvas>标签规定一个图形容器（画布），然后通过脚本（ JavaScript等）来绘制具体图形 1 <canvas>标签常用的属性有id属性、width属性、height属性。id属性经常被脚本引用，width属性、height属性用来规定画布（容器）的宽高。2 在该标签中建议写一
阅读全文
摘要：ES6中引入了一种新的数据类型：Symbol，可以作为对象属性的标识符使用； ES6引入Symbol的原因：防止属性名的冲突（ES5的对象属性名都是字符串，容易造成属性名的冲突）； Symbol值不能与其他类型的值进行运算； Symbol函数可以接受一个字符串作为参数（可选），表示对 Symbol
阅读全文
摘要：Javascript的Object本身就是键值对的数据结构，但实际上属性和值构成的是”字符串-值“对，属性只能是字符串 map是ES6提供的”值-值“对的数据结构，键名不仅可以是字符串，也可以是对象等： const map = new Map(); const objkey = {p1: 'v1'}
阅读全文
摘要：set是一个能够存储无重复值的有序列表，无法随机访问其中的值 set类型还拥有forEach()方法，用于处理每个值 let set= new Set(); set.add(1); set.add('1'); console.log(set); // {1, "1"} 具有迭代器的对象都可以用来构造
阅读全文
摘要：array.sort(fun); sort() 方法用于对数组的元素进行排序，并返回排序后的数组，并且会修改原数组； 参数fun可选，如果没有fun默认排序顺序是根据字符串Unicode编码顺序升序排列； 关于升序降序 [10, 2, 3, 100, 6, 9].sort((a, b) => { r
阅读全文
摘要：Session是在服务端保存的一个数据结构，用来跟踪用户的状态；Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息； 大多数的应用会用 Cookie 来实现Session跟踪，第一次创建Session的时候，服务端会在HTTP协议中告诉客户端，需要在 Cookie 里面记录一个Ses
阅读全文
摘要：打开浏览器的硬件加速 html, body { transform: translate3d(0,0,0); } 使用transform会导致浏览器硬件加速，这在在很多情况下会引起 html 层级文档流的“异常” 标准文档流，即页面中的 dom 元素按照其在 HTML 中的标签位置顺序进行从上到下、
阅读全文
摘要：嵌套规则 ...... 声明变量 // scss $width: 50px; .wt { width: $width; } 数学运算 // scss #id { width: (1 + 2) *3px; width: $width/2； margin-left: 5px + 8px/2px; } p
阅读全文
摘要：在移动端可以使用touch事件代替click事件，因为click事件有着明显的延迟 ios手机input框点击获取焦点不敏感 FastClick ：解决移动端点击屏幕大约延迟300毫秒后才会触发点击事件 如果页面上有一些特定的元素不需要使用fastclick来立刻触发点击事件，可以在元素的class
阅读全文
摘要：flex布局 ...... rem 使用媒体查询分别给不同尺寸手机的根元素（html）设置初始值大小（font-size属性）： @media screen and (max-width:374px){html{font-size:85.6px}} @media screen and (min-wi
阅读全文
摘要：link属于XHTML标签，而@import完全是css提供的一种方式 1 @import只能加载CSS，而link标签除了可以加载css外，还可以做很多其他的事情； 2 加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载；而@import引用的CSS会等到页面全部被下载完再加
阅读全文
摘要：for...in由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组也是一个对象，数组中的每个元素的索引被视为属性名称，所以我们可以看到使用for...in循环Array数组时，拿到的其实是每个元素的索引。 let arr = ['a','b','c']; for(let index
阅读全文
摘要：typeof 返回值结果：“number”、“string”、“boolean”、“object”、“function”、“undefined”、“symbol” 若参数为引用类型，始终返回“object”，对于Array、null都返回“object” typeof 1 // 'number' t
阅读全文
摘要：1 使用对象和字符串的转换实现 function deepClone2(obj) { var obj = JSON.stringify(obj), objClone = JSON.parse(obj); return objClone; } 2 使用扩展运算符 // 会深拷贝对象的一级属性，对象二级
阅读全文
摘要：1 使用es6的set方法去重 function unique (arr) { return Array.from(new Set(arr)) } var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefine
阅读全文
摘要：父组件向子组件传递数据 // 父组件传递 <dialogAttendee :dialogcascaderVisible="dialogcascaderVisible"></dialogAttendee> // 子组件接接收 props:{ dialogcascaderVisible: { type:
阅读全文
摘要：过滤器:本质上是管道函数，是函数的一种 vue中的过滤器分为两种：局部过滤器和全局过滤器 全局过滤器 // 定义一个 Vue 全局的过滤器，名字叫做msgFormat Vue.filter('msgFormat', function(msg) { // 返回值 return msg.replace(
阅读全文
摘要：指令的定义一定要放到 new Vue({}) 代码之前，否则报错并且无效；在注册指令的时候，不需要加上v- 这个前缀；在dom元素上使用的时候，必须加上v- 前缀； 自定义指令钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用，在这里
阅读全文
摘要：后端路由：每次仿问都要向 server 发送一个请求，server 需要响应解析，会有延迟「网络不好更严重」； 前端路由：只是改变浏览器的地址，不刷新浏览器，不和服务端交互，所以性能有大大的提高「用户体验提高」，前端路由有两种实现方式 路由的实现方式 1 改变 hash 值，监听 hashchang
阅读全文
摘要：核心概念：State、Getter、Mutation、Action、Module 使用 新建store.js，引入vue和vuex，执行 Vue.use(Vuex) 来全局安装 Vuex.。Vuex.Store 即 Vuex 的构造函数，来初始化 Vuex 实例： 在根实例中注册store： sta
阅读全文
摘要：keep-alive可以将需要缓存的组件缓存在内存当中，下次再次访问的时候，直接从缓存中读取，而不是重新创建或者销毁……提高了性能。 1 利用include 和 exclude 属性设置 // include 和 exclude 属性允许组件有条件地缓存,匹配检查组件自身的 name 选项(注意是组
阅读全文
摘要：XXS跨站脚本攻击 XSS即跨站脚本（cross site script），XSS是一种经常出现在web应用中的计算机安全漏洞，也是web中最主流的攻击方式。 存储型XSS攻击 通过一些用户可以输入的界面，比如评论，填入一些非法字符，如><script>alert(document.cookie)<
阅读全文
摘要：Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。 webpack中一切皆模块，一个模块对应一个文件，
阅读全文
摘要：https是一种http与SSL证书共同协作构建的网络协议，https优势就在于能够保证网络传输高效的同时，可以很好的维护网络传输过程的安全。https加密就是得益于SSL证书的保障，使得网站的安全等级得到提高。 这涉及到了对SSL证书的申请，不同类型的网站所需的SSL证书类型不同，申请这一数字证书
阅读全文
摘要：变量提升 var声明的变量。 console.log(v1); var v1 = 100; function foo() { console.log(v1); var v1 = 200; console.log(v1); } foo(); console.log(v1); 输出结果： //undef
阅读全文
摘要：浏览器的构成 用户界面：地址栏，后退/前进按钮，书签目录等；（除了从服务器请求到的网页的窗口） 浏览器引擎：用来查询及操作渲染引擎的接口； 渲染引擎：用来显示请求的html内容； 网络：主要是来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作； UI后端：用来绘制类似组合选
阅读全文
摘要：HTTP状态码（HTTP Status Code）是用以表示网页服务器HTTP响应状态的3位数字代码。所有状态码的第一个数字代表了响应 的五种状态之一。 1XX消息 这些状态代码表示临时的响应。客户端在收到常规响应之前，应准备接收一个或多个 1xx 响应。 2XX消息 这类状态代码表明服务器成功地接
阅读全文
