- 博客(60)
- 收藏
- 关注
RSS订阅原创 nextTick中的降级处理
nextTick 要优先使用Promise和MutationObserver因为他俩属于微任务，会在执行栈空闲的时候立即执行，它的响应速度相比setTimeout会更快，因为无需等渲染。而setImmediate和setTimeout属于宏任务，执行开始之前要等渲染，即task->渲染->task。再就是浏览器兼容性问题，setTimeout所有浏览器都可以兼容，setImmediate是IE最新浏览器都可以兼容，源码：function nextTick(cb){//cb就是f.
2021-02-28 22:02:29
578
原创 vue是如何检测数组变化的
array.js：//主要做的事就是拦截用户调用的push shift unshift pop reverse sort splice//上述方法可改变原始数组import { observe } from "./index";//先获取老的数组方法 只改写这7个方法let oldArrayProtoMethods = Array.prototype;console.log(Array.prototype)//拷贝的一个新的对象 可以查找到老的方法//arrayMethods里包含
2021-02-28 21:57:49
613
原创 mixin混入
混入就是提取出公共代码，被页面引入，即可被页面使用。下边是自己项目中用到的混入：code.js：混入代码，只要是提取了获取验证码接口的方法和本地存储sid的逻辑代码import { getCode } from '@/api/login'import { v4 as uuidv4 } from 'uuid'import { ValidationProvider, ValidationObserver } from 'vee-validate'const CodeMix = { c
2021-02-28 16:31:02
100
原创 vue组件级权限控制
自定义指令v-hasRole：directives.js：首先从store仓库中获取当前登录用户的角色，判断如果使用该组件的权限如果不包括在当前登录人的权限中 就利用父元素删除该元素。export default { // 组件级权限控制 hasRole: { inserted: function (el, binding) { // 当前登录人角色 const roles = store.state.userInfo.roles || ['user']
2021-02-27 21:53:11
1390
原创 vue自定义操作权限控制级别的指令
directives.js：export default { // 操作权限控制 hasPermission: { inserted: function (el, binding, vnode) { const types = vnode.context.$route.meta.types//获取router中各个路由上定义的types属性 const values = binding.value let flag = true for (
2021-02-27 21:17:48
312
原创 vue为什么采用异步渲染
因为vue是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能考虑，vue在本来数据更新后，再去异步更新视图。第一步：通知watcher进行更新操作第二步：依次调用watcher中的update第三步：将watcher进行去重，放到队列中第四步：异步清空watcher队列...
2021-02-26 15:58:21
610
原创 vue组件中的data为什么是一个函数
同一个组件被多次复用，会创建多个实例。这些实例用的是同一个构造函数，如果data是一个对象的话，所有的组件共享同一个对象。为了保证组件的数据独立性，要求每个组件必须通过data函数返回一个对象作为组件的状态。一个组件被多次使用，用的是同一个构造函数。为了保证组件的不同实例的data不冲突，要求data必须是一个函数，这样组件间不会互相影响。为了防止被公用。导致组件不独立。主要是为了避免组件间的数据互相影响。谁new就是谁的实例，互不影响。如果data是对象：functionVueCo.
2021-02-26 15:00:54
201
原创 一个简单的webpack.config.js配置
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports={ entry: './src/index.js',//把src的index.js作为入口进行打包 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') },.
2021-02-26 13:56:14
135
原创 get和post的区别
get: 缓存、请求长度受限、会被历史保存记录 无副作用(不修改资源)，幂等(请求次数与资源无关)的场景 。post: 安全、大数据、更多编码类型。get是获取数据，post是修改数据。一般开发过程中，post用于提交表单，get用于从服务端获取数据。...
2021-02-26 10:18:07
106
原创 防抖节流
防抖节流应用场景：防抖：节流：防抖节流区别：节流：高频次触发的事件，在指定的时间内，只响应第一次防抖：高频词触发的时间，在指定时间内，只响应最后一次，如果指定时间内再次触发，则重新计算时间...
2021-02-26 10:15:55
555
原创 rem和em的区别
em和rem的主要区别是：浏览器根据谁来转化成px。当使用rem的时候，他们转化为像素的大小取决于页根元素的字体大小，即html元素的字体大小。例如：根元素的字体大小为16px，10rem将等于160px，即10*16=160。当使用em的时候，em转为像素的大小取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。例如，父级元素字体大小为13px,10em将等同于130px,即13x10 = 130px...
2021-02-26 09:45:03
3840
原创 flex布局中flex:1和flex:auto的区别
在flex:1 时在尺寸不足时会优先最小化尺寸，flex:auto在尺寸不足时优先最大化内容尺寸。效果如下所示：flex：1 的尺寸是较长的尺寸优先牺牲自己的尺寸，而flex:auto 中是较长的尺寸优先扩展自己的尺寸。所以，flex:1 更适合在等比例列表时使用，flex：auto适用于元素充分利用剩余空间，比如头部导航文字多少不一致时使用...
2021-02-26 09:44:12
9719
原创 层叠上下文
什么是层叠上下文？层叠上下文即元素的z轴，层级越高越接近阅读者什么是层叠水平？决定同一层叠上下文中元素在z轴的显示顺序。普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。需要注意的是，诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错，某些情况下z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在。什么是层叠顺序？表示元素发生层叠时有着特定的垂直显示顺序，，注
2021-02-26 09:43:34
929
转载 双飞翼/圣杯布局
双飞翼/圣杯布局通常来说就是左右两栏固定宽度，中间部分自适应的三栏布局。圣杯布局首先把left、middle、right都放出来 给它们三个设置上float: left, 脱离文档流； 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档 left、right设置上各自的宽度 middle设置width: 100%;接下来比较重要了：给left、middle、right设置position: relative; left设置 left: -
2021-02-25 15:12:29
119
原创 flex
主要概念：使用flex布局的时候，首先要注意两根轴线-主轴和交叉轴。主轴由flex-direction定义，另一个垂直于主轴为交叉轴。主轴：flex-direction:row/row-reverse/column/column-reserve;如果flex-direction选择了row/row-reverse，主轴就会沿水平方向延伸。如果flex-direction选择了column/column-reserve，主轴就会沿垂直方向延伸。交叉轴：交叉轴垂直于主轴，所以如果
2021-02-25 14:45:01
185
原创 css3实现0.5px的细线
<div class="line"></div><style>.line{ position:relative;}.line:after{ content:""; position:absolute; left:0; top:0; wiath:100%; height:1px; background-color:#000000; -webkit-transform:scaleY(.5); transform:scaleY(.
2021-02-25 11:20:13
733
原创 纯css创建一个三角形
第一步：先写一个border应用：.box{ width:100px; height:100px; border:3px solid; border-color:#1b93fb #1bfb24 #efad48 #ef4848;}第二步：将border值增大，此时border渲染的不是正方形而是梯形.box{ width:100px; height:100px; border:50px solid; border-color:#1b93fb #1bfb24 #
2021-02-25 11:14:29
266
原创 div居中
水平居中：行内元素：text-align:center;已知定宽元素：margin:0 auto;使用absolute+transform：{ position:absolute; top：50%； transform:translateX(-50%);}未知宽高：使用display+justify-content{ display:flex; justify-content:center;}垂直居中：行内元素：line-height:height;
2021-02-25 11:10:45
60
原创 css清除浮动的方法以及优缺点
1.创建父级BFC可以防止父级高度塌陷（代码少简单，但是不能配合position使用，因为超出尺寸会被隐藏）<divclass="divcss5"><divclass="divcss5-left">left浮动</div><divclass="divcss5-right">right浮动</div></div>.divcss5{ width:400px; border:1pxsolid#...
2021-02-25 11:06:17
120
原创 settimeout promise async-await的区别
1.settimeoutconsole.log('scriptstart')setTimeout(()=>{console.log('setTimeout')});console.log('scriptend')//执行顺序scriptstart->scriptend->setTimeout2.Promisepromise本身是同步的立即执行函数，当在executor中执行resolve或者reject的时候是异步操作，会先执行then/c...
2021-02-25 10:56:58
352
原创 async await用法
async代表后面的函数中有异步操作（声明一个异步函数只需要在普通函数前面加一个关键字async）,await表示等待一个异步方法执行完成。async函数返回的是一个Promise对象（如果返回值不是Promise对象，也返回一个Promise，只不过立即resolve）。因此async函数通过return返回值会成为then方法中回调函数的参数：async function funA() { return 'hello';}funA().then(value => { co
2021-02-25 10:53:30
327
原创 generator
generator：由function*定义，除了return 语句之前，还可以用yield返回多次。例如：斐波那契数列（1,2,2,3,5,8,13,21,34）普通函数：函数只能返回一次，必须返回一个Array。function fib(max) { var t,a=0,b=1,arr=[0,1]; while(arr.length < max) { [a,b] = [a, a+b]; arr.push(b); } return arr;}g
2021-02-25 10:33:09
57
原创 css优先级
常见的选择器权重优先级：!important>行内样式>id>class>tag>*>继承>默认；!important可以提升样式优先级，但不建议使用。如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被应用上!important。 例如：background: blue !important;如果两条样式都使用!important，则权重值高的优先级更高在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前
2021-02-25 09:33:55
1366
原创 BFC
BFC定义：块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会互相影响。IE下为layout，可用过zoom:1触发在平常的css编写过程中，zoom;1能够比较神奇的解决ie下比较奇葩的bug。譬如：外边距（margin的重叠）、清除浮动、触发ie的haslayout属性等。.clearfix{zoom:1};/*触发haslayout*/BFC原理：BFC内部的盒子，会在垂直方向，一个接一个的放置，垂直方向上也会发生边距
2021-02-24 21:54:26
88
原创 css盒模型
css有两种盒模型：w3c标准盒模型、IE盒模型在W3C标准盒模型中内容大小指的是content的内容大小；在IE盒模型中内容大小指的是content+padding+border内容的大小如何设置两种盒模型：box-sizing:content-box;（w3c标准盒模型）box-sizing:border-box;（IE盒模型）...
2021-02-24 21:37:30
62
原创 js类型转换
1.js的隐式转换：减号（-）除号（/）乘号（*）求余（%）：一律都会转换成数值后计算：'11' - 2 = 9'12' / 2 = 6'12' % 2 = 0'12' * 2 = 242.加号（+）：数字+字符串=字符串，运算顺序从左到右：1 + '12' = 112数字+对象，优先调用对象的valueOf->toString：（toString是把对象转成字符串；valueOf是把数据类型转换成原始类型，也就是说原来是什么类型，转换后还是什么类型，日期类型除外）
2021-02-24 21:16:26
158
原创 V8内存管理和垃圾回收机制
垃圾回收：将内存中不再使用的数据进行清理，释放出内存空间。V8将内存分成新生代空间和老生代空间。新生代内存空间：主要用来存放存活时间较短的对象。新生代内存中的垃圾回收主要通过Scavenge算法进行，具体实现时主要采用Cheney算法。Cheney将内存空间一分为二，每部分都叫Semispace，这两个Semispace一个处于使用，一个处于闲置。处于使用中的Semispace叫From，处于闲置中的Semispace叫做To。Scavenge GC算法: 当 from 空间被占满时，启动 GC
2021-02-24 17:43:11
191
原创 柯里化
柯里化：将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。柯里化用途：// 普通的add函数function add(x, y) { return x + y; } // Currying后 function curryingAdd(x) { return function (y) { return x + y; } }add(1, 2);// 3 curryingAdd(1)(2);// 3实际上就是把add函数的x，y两个
2021-02-24 17:27:16
114
原创 instanceof原理
instanceof作用：检测对象A是不是另一个对象B的实例。能在实例的原型对象链中找到该构造函数的prototype属性所指向的原型对象，就返回true。即：//__proto__：代表原型对象链instance.[__proto__] === instance.constructor.prototype //true原理：查看B对象的prototype属性指向的原型对象是不是在A的原型链上，若存在返回true,否则返回false。解析原理：function Person (n
2021-02-24 16:22:54
152
原创 js判断数据类型
js万物皆对象，只用typeOf是无法判断类型的。基本类型（null）：String(null)；基本类型（string/number/boolean/undefined）+function：直接typeof即可；其他引用类型（Array/Date/RegExp Error）：调用toString之后根据[object type]进行判断。解析Object.toString方法：每个对象都有toString方法，toString返回"[object type]"，type指的是对象的类型
2021-02-24 11:23:02
88
原创 事件冒泡 事件捕获
捕获=>目标=>冒泡捕获是从外向内捕获；冒泡是从内向外冒泡；事件冒泡：从内到外，假如我要点击的是div，点击后会一层一层的往上。案例：<div class="classv"> 祖宗 <div class="actva">我是老爸 <div class="foo">我是孩子</div> </div></div><script type="text/javascript"&g
2021-02-24 11:15:01
145
原创 如何判断两个json是否完全相等
1.简单方法：模糊对比：将两个json数据（JSON.stringify）转成字符串，进行对比。2.精确方法：递归第一步：先准备三个工具方法：用于判断是否是对象类型，是否是数组，获取对象长度function isObj(object) { return object && typeof(object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == "[obj
2021-02-24 09:56:06
9498
1
原创 js数组常用方法
Array.map()：将数组汇总每个元素调用一个提供的函数，结果作为一个新的数组返回，没有改变旧数组。let arr = [1,2,3,4,5];let newArr = arr.map(x => x*2)console.log(arr);//[1,2,3,4,5]console.log(newArr);//[2,4,6,8,10]Array.forEach()：遍历数组，没有返回值。forEach对item进行修改时，如果item是原始类型的值，原数组没变化；item是引用类型的
2021-02-23 22:22:22
145
原创 封装继承
封装继承方法：function_extends(Child,Father){Child.__proto__=FatherfunctionTemp(){//constructor指向子类的构造函数this.constructor=Child}Temp.prototype=Father.prototype;Child.prototype=newTemp();/***1.会有两个私有属性...
2021-02-23 16:50:52
111
原创 var let 以及变量提升
js作用域有：全局作用域，函数作用域，没有块级作用域的概念，ES6中新增了块级作用域。块级作用域偶{}，包括if语句和for语句里面的{}也属于块级作用域。1.ES5存在的问题：①全局变量在if或者for循环中声明的变量会变成群居变量for(var i=0;i<=5;i++){ console.log("hello");}console.log(i);//5内层变量可能会覆盖外层变量var a=1;function fn(){ console.log(a)
2021-02-23 16:49:19
199
原创 this以及call apply bind
this如何确定this，其实就是知道当前函数执行主体是谁，如果是对象来调用，this就是调用的对象。letzhangsan={name:'张三',getName(){console.log(this.name)}}zhangsan.getName();this是zhangsan如果没有对象调用，直接执行：letgetName=zhangsan.getName;getName()没有对象调用分两种情况：非严格模式下，主...
2021-02-23 16:00:45
91
原创 js数组去重
第一种：利用indexOf判断数组中的项是否存在于新数组中。indeOf本身就是检索字符串中是否有需要的值，没有就返回-1。var arr = [1,2,3,4,6,3,7,22,59,33,4];Array.prototype.unique = function () { var arr = []; for (let i = 0;i<this.length;i++) { if (arr.indexOf(this[i] === -1)) { arr.push(t
2021-02-23 15:12:54
42
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人