꧁薇博꧂-CSDN博客

原创改变element UI分页样式

箭头改文字/deep/.el-pagination .btn-prev .el-icon,/deep/.el-icon-arrow-right:before { display: none;} /*把箭头隐藏*//deep/.btn-prev:before { content: "上一页";}/deep/.btn-next:before { content: "下一页";}页数展示靠右.el-pagination { margin-top: 20px; tex

2020-12-16 15:54:39 648

原创轻松改变element UI表格样式

轻松改变element UI el-table样式header-cell-style //改变列表头样式header-row-style //改变行表头样式row-style //改变表格行的样式 cell-style //改变表格列的样式一般操作padding值扩大或缩小表格的高注意：一般cell 设置padding值 row 设置高效果展示...

2020-12-16 11:17:24 572

原创图片懒加载原理

什么是图片懒加载？当打开一个有很多图片的页面时，先只加载页面上可视区域的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。图片懒加载的作用减少或延迟请求数，缓解浏览器的压力，增强用户体验。图片懒加载的基本原理1､设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址2､页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中3､当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址1.document.documentEl

2020-10-05 22:10:37 197

原创 Vue Virtual Dom（虚拟Dom）和 Diff算法

Vue Virtual Dom（虚拟Dom）和 Diff算法虚拟Dom:是js对象，把Dom结构转化成便于js操作的对象，对于复杂的文档结构，提供一种方便的工具，进行最小化的Dom操作虚拟Dom和真实Dom的区别虚拟DOM不会进行排版与重绘操作真实DOM频繁排版与重绘的效率是相当低的虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DO

2020-09-21 09:53:59 72

原创 Vue中的事件修饰符

vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，常用的事件修饰符有以下几个：（１）. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）　修改代码，为内层点击事件添加事件".stop"修饰符：　（２）. prevent：阻止默认事件的发生默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。（３）. capture：捕获冒泡，

2020-09-18 10:11:50 148

原创 js事件模型

概念JavaScript事件使得网页具备互动和交互性，我们应该对其深入了解以便开发工作，在各式各样的浏览器中，JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。1.原始事件模型（DOM0级）　　　　这是一种被所有浏览器都支持的事件模型，对于原始事件而言，没有事件流，事件一旦发生将马上进行处理，有两种方式可以实现原始事件：（1）在html代码中直接指定属性值：（2）在js代码中为　document.getElementsById(“demo”).onclick

2020-09-14 07:58:45 97

原创 js事件监听

概念概念：某些组件被执行了某些操作后，触发某些代码的执行。 * 事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了 * 事件源：组件。如：按钮文本输入框... * 监听器：代码。 * 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。 * 常见的事件： 1. 点击事件： 1. onclick：单击事件 2. ondblclick：双击事件 2. 焦点事件 1. onblur：失去焦点 2. onfocu

2020-09-14 07:52:54 364

原创 javascript设计模式

什么是设计模式“软件设计模式（Design pattern），又称设计模式，是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。”二、什么是模式？模式是一种可以复用的解决方案。（解决某一类问题的方法论）模式是指从生产和生活经验中经过抽象和升华提炼出来的核心知识体系。设计模式三大好处模式是已经验证的解决方案模式很容易被复用模式富有表达力三、设计模式分类1.创建型设计模式创建型设计模式专

2020-09-13 21:56:46 70

原创垃圾回收机制和内存泄露

一、什么是垃圾回收机制垃圾回收机制（简称GC）是python解释器自带的一种机制，专门用来回收不可用的变量值所占用的内存空间二、为什么要有垃圾回收机制程序运行过程中会申请大量的内存空间，而对于一些无用的内存空间，如果不及时清理的话，会导致内存使用完（内存溢出），导致程序崩溃，因此，内存管理是一件重要且繁杂的事情，而python解释器自带的垃圾回收机制把程序员从繁杂的内存管理中解放出来三、垃圾回收机制的方式标记清除：定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为：“

2020-09-13 20:03:00 111

原创 vue双向数据绑定

双向数据原理采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调双向数据流程1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个Watcher，作为连接Observer和Compile的

2020-09-13 19:45:21 113

原创事件委托原理使用场景，如何实现以及实现原理

原理：事件委托就是基于js的事件流产生的，事件委托是利用事件冒泡，将事件加在父元素或者祖先元素上，触发该事件。<body> <div id="myDiv"> <input type="button" value="按钮1" id="btn1"> <input type="button" value="按钮2" id="btn2"> <input type="button" value="按钮3" id="btn3">

2020-09-11 00:07:11 540

原创数组扁平化

什么是数组扁平化？数组扁平化就是将一个多维数组转换为一个一维数组实现思想1、对数组的每一项进行遍历。2、判断该项是否是数组。3、如果该项不是数组则将其直接放进新数组。4、是数组则回到1，继续迭代。5、当数组遍历完成，返回这个新数组。5组方法可以实现数组扁平化1. reduce遍历数组每一项，若值为数组则递归遍历，否则concatfunction flatten(arr) { return arr.reduce((result, item)=> { re

2020-09-10 23:46:20 86

原创 ES6常用数组方法

1、Array.from()用于类似数组的对象（即有length属性的对象）和可遍历对象转为真正的数组。let json ={ '0':'11', '1':'22', '2':'33', length:3 } let arr = Array.from(json); console.log(arr); // ["11", "22", "33"] 2、Array.of()将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组。let arr1 =

2020-09-09 08:17:54 74

原创 ES5常用的数组方法

数组概念用[]包起来的，一组有序的、任意数据类型的数据集合数组的长度：array.lengthJS 中的数组与其他语言的数组，有很大的区别创建数组的方式1. 通过构造函数// 创建空数组var array=new Array(); // 创建数组，并填充三个元素10,20,30var array=new Array(10,20,30); // 创建数组，里面存储7个值var array=new Array(7); 2.通过字面量var arr = [];ES5数组方法ECM

2020-09-09 08:11:26 1009

原创 promise generator aysnc/await

1.三者都是异步编程的解决方案,不同的是,promise为较早出来的,其次generator,最后为async/await,三者象征了前端进行解决异步编程的进化路程。promise： promise比较简单，也是最常用的，主要就是将原来用回调函数异步编程的方法转成 relsove和reject触发事件；对象内含有四个方法，then()异步请求成功后 catch()异步请求错误的回调方法 fin

2020-09-06 20:27:44 89

原创 generator（特点，项目应用）

Generator的定义：对于Generator函数(也可以叫做生成器函数)的理解，可以从四个方面：形式上：Generator函数是一个普通的函数，不过相对于普通函数多出了两个特征。一是在function关键字和函数明之间多了’*'号；二是函数内部使用了yield表达式，用于定义Generator函数中的每个状态。语法上：Generator函数封装了多个内部状态(通过yield表达式定义内部状态)。执行Generator函数时会返回一个遍历器对象(Iterator对象)。也就是说，Genera

2020-09-06 20:23:48 256

原创 async,await(特点，项目中应用)

async的特点：asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数异步async函数调用，跟普通函数的使用方式一样异步async函数返回一个promise对象async函数配合await关键字使用(阻塞代码往下执行) 是异步方法，但是阻塞式的一个函数如果加上async，那么该函数及就会返回一个promiseasync function test() { return "1"}console.log(test()) // -> Promise {&lt

2020-09-06 19:57:07 244

原创 promise的特点

promise是什么？Promise 是异步编程的一种解决方案，比传统的解决方案，例如回调函数、事件等更合理和更强大。Promise简单说就是一个容器，里面保存着一个异步操作的结果。特点：对象的状态不受外界影响。一旦状态改变，就不会再变，任何时候都可以得到这个结果缺点：无法取消Promise，一旦新建它就会立即执行，无法中途取消。如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。Pro

2020-09-06 19:31:57 182

原创 var let 和const的区别

目录 1.是否存在变量提升？ 2.是否存在暂时性死区？ 3.是否允许重复声明变量？ 4.是否存在块级作用域？ 5. 是否能修改声明的变量？在ES5中，声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点（内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量，下面会有详细的介绍），ES6提出了使用let和const声明变量，下面就来看看他们之间的区别。1.是否存在变量提升？var声明的变量存在变量提升（将变

2020-09-06 14:59:48 143

原创 Vuex原理

Vuex的原理Vuex是专门为Vue.js应用程序设计的状态管理工具。相当于数据库mongoDB，MySQL等，任何组件都可以存取仓库中的数据。其中vuex类似的还是有Redux,Redux大多用于React,针对Redux后续在做补充vue的使用步骤1、安装vuexnpm install vuex --save/-dev2、引用vuex，创建仓库store。创建 store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(V

2020-09-03 22:50:22 158

原创原型与原型链

原型的概念JavaScript的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是自身的原型JavaScript的函数对象，除了原型 [proto] 之外，还有 prototype 属性，当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [proto]原型链的概念当一个对象调用自身不存在的属性/方法时，就会去自己 [proto] 关联的前辈 prototype 对象上去找，如果没找到，就会去该 prototype 原型 [proto] 关联的

2020-09-02 22:49:38 53

原创 JS继承的那些事

什么是继承在编程语言中：继承是面向对象语言的重要特性，继承是针对类，子类继承父类中的属性和方法，但他们都用自己独特的属性1 原型链继承父类的实例作为子类的原型function Woman(){ }Woman.prototype= new People();Woman.prototype.name = 'haixia';let womanObj = new Woman();优点：简单易于实现，父类的新增的实例与属性子类都能访问缺点：可以在子类中增加实例属性，如果要新增加原型属性和方法需要

2020-09-02 20:03:49 60

原创 this，call，apply，bind之间的关系

this的概念this指的是函数执行时所在的作用域，就是谁调用this，this就指向谁this的具体指向一般有四种：1、在全局调用this的时候，this就指向window<script> console.log(this)</script>2、当一个函数被当成一个对象的方法调用时，this指向这个对象 var a = { name:"a", fun:function(){

2020-09-01 20:40:05 175

原创 JavaScript判断数据类型有几种方法，以及区别

有五种数据判断类型方法typeof 、instanceof、constructor、Object.prototype.toString.call()、jquery.type()一、typeof方法typeof是个操作符，可以判断基本数据类型（返回的结果只能是number，string，boolean，null，symbol，function，object）返回值分以下几种对于基本类型。除了null值返回object以外，其他均返回正确的结果对于引用值来说，除了function返回function

2020-08-31 20:55:08 461

原创 JavaScript数据类型有哪些

JS数据类型有哪些JS数据中一共有8种ES5中有6种：Number、String、Boolean、Undefined、Null、ObjectES6新增了Symbol：这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记谷歌6版本bigInt：是指安全存储、操作大整数JS中基本数据类型和引用数据类型有哪些？基本数据类型（值类型）：Number、String、Boolean、Undefined、Null引用数据类型：Object。里面包含function、 Dat

2020-08-31 17:12:45 546 2

原创什么是BFC

BFC的概念BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是 W3C CSS 2.1 规范中的一个概念BFC中的元素的布局是不受外界的影响，并且在一个BFC中，块盒与行盒都会垂直的沿着其父元素的边框排列2.BFC布局规则在BFC下，内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(

2020-08-31 00:51:35 156

原创清除浮动

什么是浮动？想要清除浮动，首先要知道浮动是什么，元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，具有float属性元素在父标签中是不占空间的。（所有的元素都可以浮动）基本语法格式选择器{ float:属性值; }属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）浮动元素的特点1.浮动脱离标准流，浮动元素的位置空出来，由非浮动元素占据. 2.浮动的元素总是找它最近的父级元素对齐。但是不会超出内边距的范围

2020-08-31 00:25:40 228

原创圣杯式布局和双飞翼布局的区别

圣杯布局和双飞翼布局的共同点：三列布局，两边定宽，中间自适应布局，要注意的是中间栏(重要的东西)要在放在文档流前面以优先渲染。1、圣杯式布局定义：圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体都是三栏全部float:left浮动，而在解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的。圣杯式布局代码：<!DOCTYPE html><html l

2020-08-30 21:09:21 1954 1

原创 cookies，sessionStorage和localStorage的区别？

cookies，sessionStorage和localStorage的区别？共同点：都是保存在浏览器端，且是同源的。区别：cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。localStorage 生命周期是永久存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；不参与和服务器的通信，存放数据大小为一般为5MB，使

2020-08-30 20:14:37 339

空空如也

空空如也