lpl_L-CSDN博客

原创 vue项目上线及优化总结

vue项目上线及优化总结生成打包报告:原因：为了直观的发现项目中存在的问题，生成报告有两种方式：1.通过命令行参数的形式生成报告,不推荐使用；2.通过可视化的UI直接查看报告，推荐使用；可以在命令行执行vue ui 即可打开可视化UI，然后通过控制台和分析面板，可以方便的看到项目中的问题。优化的主要成分：在我们的项目中，占内存最大的其实不是我们的代码资源，而且第三方依赖项，占比量通常都早85%到90%左右，比如elemen ui组件库，echarts数据可视化组件优化策略通过vue.co

2020-09-24 20:10:14 317

原创对pormise的理解

pormise:promise是一个对象，我们可以通过它来获取和异步操作相关的信息promise的三个状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)状态一旦改变，就不会在变，创造promise 实例后，他会立即执行promise的六个方法：resolve：promise对象成功回调rejected：promise对象失败回调.then：可以通过它获取resolve成功的回调.catch：可以通过它获取rejected失败的回调all：只有在pro

2020-09-06 21:01:42 799

原创对async/await的使用

async搭配await的实现是基于Promise，通过同步方式的写法，使得代码更容易阅读。await函数不能单独使用，而且async函数返回的是一个Promise对象，可以使用then函数添加回调函数。async：async可以作为关键字放在函数前面，来声明这是一个异步函数，异步函数就代表了这个异步函数的操作不会阻碍下面代码的执行，async函数的返回值是一个promise对象，我们可以通过await或者.then来获取async函数的返回值。await：它一般都是和async搭配使用的，由于as

2020-09-06 20:45:32 257

原创 ES6中var let const

var let constJs中 var、let、const 用来定义变量的方式1.var :var可以重复定义变量，可以修改值，而且可以变量提升，不支持块级作用域，声明的变量可以进行for循环，2.let：：不可以重复定义变量，可以修改值，不存在变量提升，可以形成块级作用域，声明的变量可以进行for循环，3.const：不可以重复定义变量，可以修改值，但是可以定义一个对象，或者数组，然后对对象和数组里面的值进行修改，也不存在变量提升，也可以形成块级作用域，但不能对声明的变量for循环总结：

2020-09-06 19:54:31 148

原创对于vueX的理解

vuex概念五个核心：state：存储数据的地方actions：异步操作mutations: 同步操作，只有mutations可以修改state中的数据getters：相当于 state的计算属性。moduleas：模块化 modeA, modeB，modeCvuex高级篇1 、语法糖辅助函数：语法糖，四大金刚辅助函数：mapState,mapActions,mapMutations,mapGetters当一个组件需要多个状态是，这些状态都声明成计算属性过于冗长。于是有了辅助函数。

2020-09-03 19:57:28 84

原创对原型和原型链的理解

【原型和原型链】什么是原型和原型链：一、原型①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象③所有引用类型的__proto__属性指向它构造函数的prototype二、原型链：当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto_

2020-09-02 21:54:40 96

原创 JS实现继承的6种方式的详解

1. 原型链继承：将构造函数的原型设置为另一个构造函数的实例对象，这样就可以继承另一个原型对象的所有属性和方法，可以继续往上，最终形成原型链。第一个问题是，当实现继承后，另一个原型的实例属性，变成了现在这个原型的原型属性，然后该原型的引用类型属性会被所有的实例共享，这样继承原型引用类型属性的实例之间不再具有自己的独特性了。第二个问题是，在创建子类型的实例时，没有办法在不影响所有对象实例的情况下给超类型的构造函数中传递参数。2. 借用构造函数继承：为了解决原型中包含引用类型值的问题，开始使用借用构造

2020-09-02 21:50:31 547

原创 JS中的this，call ， apply，bind的理解

JS中的关键字thisthis是Javascript语言的一个关键字它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。1：纯粹的函数调用这是函数的最通常用法，属于全局性调用，因此this就代表全局对象。2：作为对象方法的调用：函数还可以作为某个对象的方法调用，这时this就指这个上级对象。3：作为构造函数调用所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。4： apply调用apply

2020-09-01 20:18:51 144

原创 JS中的数据类型判断

四种方法typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()1 .typeof：基本数据类型中：Number，String，Boolean，undefined 以及引用数据类型中Function ,可以使用typeof检测数据类型,分别返回对应的数据类型小写字符。另：用typeof检测构造函数创建的Number，String，Boolean都返回object基本数据类型中：null 。引用数据类型中

2020-08-31 19:50:21 316

原创 JS的数据类型解析

JS的八种数据类型JS数据类型：Number、String、Boolean、Null、undefined、object、symbol、bigInt。1､Number 类型：数字类型，表示数据的整数和浮点数。某些语言中也称为“双精度值”。数值转换：：Number()转型函数，可以用于任何数据类型；parseInt()，将值转换为整型，用的比较多；parseFloat()；将值转换为浮点型。2､String 类型：字符串可以有单引号、双引号表示。字符串是不可变的，一旦创建，值就不能改变要改

2020-08-31 19:05:11 177

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

圣杯布局圣杯布局就是三栏布局，其中左右两栏固定宽度，中间部分自适应主要步骤：在html中，中间的块在最前面，后面紧跟左边的块和右边的块三者均设置float:left，中间块设置width:100%，此时中间块在一行，两个固定宽度的块在一行。左边块设置margin-left:100%，右边块设置margin-left: -width，此时左右块位于中间块的两边，但是其覆盖了中间块的两侧的一部分内容。设置外层容器padding：0 rightwidth 0 leftwidth，为左右两边腾出空白位置

2020-08-30 15:58:10 900 1

原创 h5简介和新特性（总结）

h5简介和新特性语义化标签表单新增的type属性表单元素的其他属性新增的表单元素，datalisth5新增表单事件meter标签fieldset标签和legend标签自定义属性规范全屏接口上传图片实时预览+进度条语义化标签：语义化标签的出现是为了简化编程，并不意味着有了语义化就有什么特殊性，本质就是一个divheader 头部nav 导航main 主体article 文章aside 侧边栏footer 底部表单新增的type属性：email：邮箱tel：电话url

2020-08-30 15:54:17 223

原创 Css3动画属性和作用

什么是 CSS3 中的动画？动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。一.使用动画更改颜色背景：例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

2020-08-30 15:43:34 282

原创 BFC布局规则

BFC(Block formatting Context)：BFC：它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列BFC块级格式化上下文，布局规则如下：1.内部的盒子会在垂直方向，一个一个地放置；2.盒子垂直方向的距离由margin决定，属

2020-08-30 15:38:05 464

原创实现水平/垂直居中的方法

让元素水平垂直居中的四种方法一、使用 flex 弹性布局二、使用 transform 变形三、使用 position 定位四、使用 transform 与 position 结合使用 flex 弹性布局：首先将父元素设置为 display:flex；justify-content: center；align-items: center;其次将父元素高度设置为 height:100vh，根据 css3 的规范，1vh 等于视口高度的1%（1vw 等于视口宽度的1%），那么 100vh 就是适口高

2020-08-27 22:26:42 204

原创实现三栏布局的方法

CSS实现三栏布局(5种)常见的布局方式: float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局

2020-08-27 22:02:42 218

原创实现两栏布局的方法

两栏布局方法一：BFC构建两栏布局是主内容区为主，左（右）侧有一栏：代码： <style> #header, #footer{ height: 100px; background: red; } #content .main{ height: 200px; background: green; overflow:

2020-08-27 20:57:11 198

原创 Flex弹性盒子和Flex布局

flex弹性盒子CSS3 弹性盒子(Flexible Box 或 Flexbox):是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。实例：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title>

2020-08-26 17:16:07 441

原创盒子模型(标准盒子和怪异盒子)

盒子模型盒子模型(Box Model)：盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。不同部分的说明：Margin(外边距) ：清除边框外的区域，外边距是透明的。Border(边框) ：围绕在内边距和内容外的边框。Padding(内边距) ：清除内容周围的区域，内边距是透明的。Content(内容) ：盒子的内容，显示文本和图像。标准盒子模型和怪异盒子模型在怪异盒子模型下，一个块的总宽度

2020-08-26 15:12:22 1292 2

原创 Git的基础

git是什么git是版本管理控制系统(简称vcs)，它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录恢复回来，分布式：Git版本控制系统是一个分布式的系统，是用来保存工程源代码历史状态的命令行工具。目前世界上最先进的分布式版本控制系统。Git的分支和合并：分支模型是Git最显著的特点，因为这改变了开发者的开发模式，SVN等版本控制工具将每个分支都要放在不同的目录中，Git可以在同一个目录中切换不同的分支。SVN与Git的最主要的区别：SVN是集中式版本控制系统，

2020-08-24 17:04:42 88

lpl_L的博客