- 博客(37)
- 收藏
- 关注
RSS订阅原创 vue2和vue3区别
一、双向数据绑定的原理发生了改变VUE2的双向数据绑定是利用ES5的一个API，object.defineproperty的数据劫持结合发布订阅的方式来实现的。VUE3中使用了es6的proxyAPI对数据处理。二、创建观察者vue2中，不管数据有多大，都会在一开始就为其创建观察者。当数据很大时，可能会在页面载入时造成明显的性能压力，3.0版本，创建观察者，而且3.0的观察者更高效。三、更精准的变更通知比例来说：2.0版本中，使用Vue.set来给对象新增一个属性时，这个对象的所有watcher
2020-10-28 11:53:59
443
原创 Vue高频面试题（一）
1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA 相对对服务器压力小；前后端职责
2020-10-28 11:53:25
587
原创 Vuex全面用法总结
什么是Vuex ？Vuex是专门管理vue.js应用程序中状态的一个插件，作用就是将应用中的所有状态放在一起进行集中式管理。管理的状态主要是vue组件中date里面的属性Vuex 的特点vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出，其中action作为数据的输入，state作为数据的输出。Vuex的使用...
2020-10-28 11:52:29
235
原创 web安全及防护(XSS、CSRF、sql注入)
一、XSS攻击原理Xss（cross-site scripting）攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全得链接，骗取用户点击后，窃取cookie中用户私密信息；或者攻击者在论坛中加入一个恶意的表单，当用户提交表单得时候，却把信息传送到攻击者得服务器中，而不是用户原本以为得信任站点。危害：盗取用户信息，比如：机器登陆账号、用户网银账号、各类管理员账号。控制企业数据，包括：读取、篡改、添加、删除企业敏感数据的能力。
2020-10-28 11:47:37
305
原创 双向数据绑定原理
1.双向数据绑定是通过数据劫持结合发布订阅者的模式和object.defineproprety()来劫持各个属性的setter、getter，如果数据有变动，就发布消息给订阅者触发监听。2.双向数据绑定的步骤：**第一步：**实现一个数据监听器observer，能够对数据对象的所有属性就行监听。如果有变动就拿到最新值并通知订阅者。**第二步：**实现一个指令解析器compile，对每个元素节点和指令进行扫描和解析，根据指令模板替换数据以及绑定相应的更新函数。**第三步：**实现一个watcher，作
2020-10-27 16:47:48
9517
原创 vue-router 两种模式
路由的两种模式一、更新视图但是不重新请求页面，是前端路由原理的核心之1，目前在浏览器环境中这一功能的实现主要有两种：（1）默认是hash模式，路由上方的路径是用#表示（2）history是利用URL中的路径2.如何设置路由模式const router=new VueRouter({ mode:'history', routes:[...]})3.mode区别1.mode：hash多了一个#2.mode：history4.hashHistoryhash(#)的作
2020-10-27 16:08:48
1125
原创 JS面试题（2）
一.Promise1.名词约定promise(首字母小写)对象指的是Promise实例对象Promise首字母大写且单数形式，表示Promise构造函数Promises首字母大写且复数形式，用于指代Promise规范2.为什么有Promises这个东西同步的方式异步的代码，用来解决回调地狱问题。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。3.什么是PromisePromise，简单来说就是一个容易，里面保存着某个未来才会结束的事件的结果。从语法上，Promis
2020-10-22 19:41:30
302
原创 JS面试题（1）
一、JS数据类型有哪些以及值是如何存储的1.js数据类型有哪些javascript一共有八种数据类型：7种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol(es6新增)、Biglnt（es10新增）。1种引用数据类型：Object(由一组无序的名值对组成)，里面包含function、Array、Date等。javascript不自持任何创建自定义类型的机制，而所有值最终都是上述的八种数据类型之一。2、如何存储1.基本数据类型：直接存储在栈（s
2020-10-21 19:30:46
178
原创 Html和Css面试题总结
一、盒模型1.盒模型由content、margin、padding、border四部分组成。2.分别为标准盒子模型：width+margin+padding+border和怪异盒模型：width+margin（width包含了padding和border）3.盒子转换：border-box和content-box二、BFC1.BFC就是块级格式化上下文，BFC是一块独立的区域，内部元素不受外界影响同时也不会影响到外部，是css的一种布局方式，可以用来解决边距重叠问题。2.父子关系的边距重叠：父
2020-10-20 10:53:35
283
原创 Vue项目上线前的优化及打包上线流程
项目优化策略生成打包报告第三方库启用CDNElment-ui组件按需加载路由懒加载图片懒加载图片压缩以及雪碧图首页定制内容1.生成打包报告打包时，为了直观的发现项目中的问题，可以在打包项目时生成报告，生成报告的方式有两种：1.通过命令行参数的形式生成报告通过vue-cli的命令选项可以生成打包报告–report选项可以生成report，html帮助分析内容vue-cli-service build --report2.通过可视化的UI面板直接查看报告（推荐使用）在可视化
2020-10-16 18:54:45
566
1
转载 Vue项目首页优化问题
1. vendor.js 优化(减少体积)由于Vue项目随着功能变多 依赖也会随之变多，减少vendor.js的主要方法就是将其 不打包依赖！！1.1 第一步、cdn引入各种包index.html中cdn的方式引入vue、vuex、axios、vant-ui、element-ui、等包，如下图：1.2 第二步、在使用vue等包的地方，注释掉import引入打开main.js文件 注释掉需要排除的依赖import ，并且注释掉 Vue.use//Vue.prototype.$axios
2020-10-16 18:50:52
174
原创 Vue项目优化
一.代码优化1.keep-alive包裹动态组件，缓存不活动的组件实例而不是销毁他们。不会出现在父组件中，也不会渲染在DOM元素里。include定义缓存白名单；keep-alice会缓存命中的组件。exclude定义缓存黑名单，被命中的组件不会被缓存。很多时候会配合路由meta属性使用。2.路由懒加载Vue是单页面的应用，会有很多的路由引入。这样就会使webpack打包后的文件很大，当首页加载时，加载的资源过多，会有问题可能会出现白屏，使用户的使用体验很差。如果我们能把不同的路由对应的组件
2020-10-16 18:40:27
116
原创 js数组扁平化处理
什么是数组扁平化数组扁平化就是将一个多维数组转换为一个一维数组。数组扁平化的实现方式1.对数组的每一项进行遍历2.判断该项是否是数组3.如果不是数组就直接放进新数组4.是数组就回到1，继续迭代5.当数组遍历完成，就返回这个新数组一.常规方式，递归处理Array.prototype.flatten = function () { var resultArr = []; var len = this.length; for (var i = 0; i < len; i +
2020-10-09 16:40:15
121
原创 Vue项目优化——图片优化
一.图片保存阶段ps或者sketch等图片，保存时或保存后，使用photoshop1.jpg图片选择“连续”v-for循环(2)v-on绑定事件(3)v-model双向数据绑定事件(4)v-text渲染字符串(5)v-html渲染html节点及字符串(5)v-if判断(7)v-show显示/隐藏(8)v-bind(白的)绑定属性vue中常用的修饰符(1)@事件.stop 阻止事件冒泡(2)@事件.prevent 阻止事件默认行为(3)@事件.capture 触发事件捕获(4)@事件.self 当事件在该元素本身 触发回调(5)@once
2020-09-20 18:44:12
480
原创 JS的内存泄和垃圾回收机制简介
（1）什么是内存泄漏和垃圾回收机制运行程序需要运行内存，只要程序提出要求，操作系统或者是运行就必须供给内存。对于持续运行的服务进程，必须及时释放内存。否则内存占用过高，就会影系统性能或者导致系统崩溃。不再用到的内存没有及时释放，就是内存泄露。垃圾回收机制：垃圾收集器会定期找出那些不在继续使用的变量，然后释放其内存。（2）垃圾回收方法垃圾回收有两种方法：标记清除、引用计数。目前用的比较多得是标记清除。（3）标记清除js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在函数
2020-09-13 19:51:55
133
原创 js中事件委托
1.什么是事件委托事件委托顾名思义就是：把A即将要处理的事情，托管给B去处理。在javascript中，事件委托又叫事件代理。事件委托是利用事件冒泡来实现的。（事件冒泡：即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点）只指定一个事件来处理程序，就可以管理 某一类型的所有事件。（如果子元素阻止了事件冒泡，那么事件委托就不能实现。）2.事件委托的优点提高了性能3.适合用事件委托的事件：clickmousedownmouseupkeydownkeyupkeypr
2020-09-10 20:49:47
208
原创 js数组扁平化处理
什么是数据扁平化数组扁平化就是将一个多维数组转换为一个一维数组。数组扁平化的实现方式1. 对数组的每一项进行便利2. 判断该项是否是数组3. 如果该项不是数组就将其放进新数组4. 是数组则回到 1 ，继续迭代5. 当数组便利完成，返回这个新数组四种方法方法一：取出数组中的值，然后递归判断Array.prototype.flatten = function () { var resultArr = []; var len = this.length; for (var
2020-09-10 20:35:28
116
原创 ES5数组方法总结
ES5数组常用的方法：concat( )：数组合并。concat() 方法不会更改现有数组。它总是返回一个新数组join( )：数组转字符串。pop( )：删除最后一个元素。push( )：数组向后添加。unshift( )：数组向前添加。reverse( )：数组翻转。shift( )：删除第一个元素。slice( )：数组元素的截取，返回一个新数组，新数组是截取的元素，可以为负值。sort( )：对数组元素进行排序；splice( )：删除元素，并向数组添加新元素；toStri
2020-09-09 07:41:06
413
原创 ES6数组的常用方法
ES6数组的常用方法：1、Array.from( )：将对象或字符串转成数组，注意得有length。2、Array.of( )： 将一组值转换为数组。3、copyWithin(target，start(可选)，end(可选))：数组内数据的复制替换 target：从该位置开始替换数据；start：从该位置开始读取数据，默认为0； end：到该位置停止数据的读取，默认为数组的长度4、find()：用于找出第一个符合条件的数组成员。5、findIndex()：返回第一个符合条件的数组成员的位置，如
2020-09-09 07:37:35
969
原创 async/await的特点和用法
（1）async和await是干什么用的是用来解决异步流程问题的，避免回调地狱（callback hell），且以最接近同步代码的方式编写异步代码。（2）async和await的语义async 可以声明一个异步函数，此函数需要返回一个 Promise 对象。await可以等待一个 Promise 对象 resolve，并拿到结果。（3）async和await的特点Async 和 await 是一种同步的写法，但还是异步的操作，两个内容还是必须同时去写才会生效不然的话也是不会好使，而且 await
2020-09-06 20:15:04
1598
原创 理解Promise--的特点和方法
什么是PromisePromise通常是经过一个异步操作后返回一个结果，是异步编程的一种解决方案。可以获取异步操作的消息。Promise的特点（1）对象状态不受外界影响。Promise有三个状态：pending（进行中），fulfilled（已成功），rejected（已失败）。只有异步操作的结果才可以决定当前是那种状态。（2）从等待状态变为其他状态就永远不能更改状态了。Promise有两种状态的改变：pending——>fulfilledpending——>rejec
2020-09-06 19:45:00
205
原创 var,let,const的区别
var,let,const的区别1.Var的理解var是ES5中声明变量的方式，无需声明数据类型。主要是根据所赋值的数据类型而改变自己的数据类型。好处：通过var声明的变量具有全局，方法的作用域。并且var关键字会提升，可以声明前调用。因为使用var声明变量的特殊性，所以我们编写代码时会出现变量污染或者重复声明这种错误。所以ES6就引入了let，const2.Let的理解let和var相比，多了局部作用域。变量声明也不会提升。更像java和c中的变量let有三个特点：1.没有预解析过程2
2020-09-06 19:21:30
134
原创 原型和原型链
原型和原型链原型js规定每一个函数都有一个proto属性，指向另一个对象(自身的原型)，函数对象除了proto之外还有prototype属性，当函数作为构造函数创建实例时，该属性就被作为实例对象的原型原型链当一个对象调用自身不存在的属性和方法时就会去自己的proto的前辈prototype对象上去找，如果没找到就会去prototype的前辈上去找 直到找到或者返回undefiend 这个链式查找的过程就是原型链（一些公用的属性和方法都可以定义在原型链中 比如说引入的组件都是保存在vue的pro
2020-09-03 07:46:46
106
原创 继承
继承( 继承可以提高代码的复用性)1 原型链继承利用原型让一个引用类型继承另一个引用类型的属性和方法缺点 通过原型实现继承 原型会变成另一个类型的实例 原来的实例属性变成了现在的原型属性该原型的引用类型属性会被所有实例共享在创建子类型实例时没有办法在不影响所有对象实例的情况下给超类型构造函数传递参数2构造函数实现继承在子类型的构造函数中调用超类型的构造函数优点可以向超类传递参数解决了原型中包含引用类型值被所有实例共享的问题缺点方法都是在构造函数中定义的 所以函数复用就无从谈起了超类
2020-09-03 07:45:20
124
原创 清除浮动的方式
清除浮动的方法（最常用的4种）1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。优点：通俗易懂，方便缺点：添加无意义标签，语义化差2.overflow：hidden...
2020-09-01 19:55:27
82
原创 数据类型判断
数据类型判断1、typeof可以判断基本数据类型，它返回的数据类型的字符串（返回结果只能包括 number,boolean,string,function,object,undefined）但不能判断null、array，可以使用typeof判断变量是否存在（如if(typeof a!=“undefined”){…}）；但是对于一些创建的对象，它们都会返回’object’简单的示例：console.log(typeof a); //'undefined'console.log(typeof
2020-09-01 08:51:08
108
原创 Js数据类型
Js的七种数据类型Js有七种数据类型，又可划分为：基本数据类型和引用数据类型。基本数据类型有：（Number, String, Null, Boolean, Undefined, Symbol(es6新增)）混合数据类型：（Object），以及es6引入的Symbol基本数据类型NumberStringNullBooleanundefinedSymbol(ES6新增)一、Number 数字Number里有小数和整数。其中NaN 和 Infinity属于Number型里的特殊值。
2020-09-01 08:48:24
162
原创 H5新特性
HTML5是什么？HTML5 是 HTML标准的最新演进版本,它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。 这套技术往往被称作 HTML5 和它的朋友们，通常简称为 HTML5HTML5的新特性，新增标签1.新特性1.语义化标签：header、footer、section、nav、aside、article2.增强型表单：input 的多个 type3.新增表单元素：datalist、keygen、ou
2020-08-30 20:43:44
175
原创 Css3动画简介
Css3动画通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。Css3@keyframes 规则要创建 CSS3 动画，你需要了解 @keyframes 规则。1.@keyframes 规则是创建动画。2.@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。CSS3 动画当在 @keyframes 中创建动画，把它绑定到一个选择器，否则动画不会有任何效果。指定至少这两个CSS3的动画属性绑定
2020-08-30 19:40:01
121
原创 HTML+CSS实现两栏和三栏布局
一.HTML+CSS实现两栏和三栏布局三栏布局三列自适应布局通常指两边定宽，中间部分宽度自适应。这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。1.基于传统的position进行布局1).绝对定位法绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。该法布局的好处：三个div顺序可以任意改变；不足：
2020-08-27 23:07:11
922
原创 Flex布局
一、Flex布局是什么？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。二、基本概念采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫
2020-08-26 19:46:15
174
原创 盒子模型
盒子模型简介及用法盒子模型简介：CSS盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中，每一个元素都被视为一个框盒子的基本属性html文档中的每一个元素在页面布局中都会被呈现为一个盒子模型盒子模型具体的css属性：1.内边距：padding的属性 （也叫内填充）2.外边距：margin的属性3.边框：border的属性padding的简介和用法padding的简介padding表示盒子的内边距（
2020-08-26 00:10:24
418
原创 Git的概念及命令的使用
Git是什么Git是是一款免费、开源的分布式版本控制系统。Git追踪的是内容而不是文件。工作区中一个隐藏的目录.git，就是Git的版本库Git为我们自动创建的第一个分支master，以及指向master的一个指针叫HEAD。用于敏捷高效地处理任何或小或大的项目。可以在任何时间，任何地点，将文档的状态作为更新记录保存起来。同时，也可以恢复过来。注意：当git无法自动合并分支时，就必须首先解决冲突。解决冲突后，在提交，合并完成。解决冲突就是把Git合并失败的文件手动编辑为我们希望的内容，在提交。
2020-08-24 17:18:24
253
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人