2020年09月_z逍遥

原创 Javascript操作DOM常用API总结

js操作DOM 常用的ApI总结阅读目录基本概念节点创建型api页面修改型API节点查询型API节点关系型api元素属性型api元素样式型api总结文本整理了javascript操作DOM的一些常用的api，根据其作用整理成为创建，修改，查询等多种类型的api，主要用于复习基础知识，加深对原生js的认识。回到顶部基本概念在讲解操作DOM的api之前，首先我们来复习一下一些基本概念，这些概念是掌握api的关键，必须理解它们。Node类型DOM1级定义了一个Node接口，该接口由D

2020-09-30 07:30:38 410 1

原创 vue中常见的原理

1 、双向数据绑定的原理Object.defineProperty()方法有何作用1、语法 Object.defineProperty(obj, prop, descriptor) 是一个函数，可以对对象里面的属性加一些控制。2、定义：Object.defineProperty() 直接在一个对象上定义一个新属性，或者修改现有属性，并返回该对象。3、参数obj 要在其上定义属性的对象。prop 要定义或修改的属性的名称。descriptor 将被定义或修改的属性描述符。可写，可枚举

2020-09-28 21:15:14 443

原创 vue项目中遇到的优化

一、webpack 常见的优化手段;首先webpack 是一个资源处理工具,它的出现节省了我们的人力和时间; 可以对资源打包,解析,区分开发模式等等…其中常见的优化手段:分离第三方库(依赖),比如引入dll引入多进程编译,比如happypack提取公共的依赖模块,比如commonChunkPlugin资源混淆和压缩:比如UglifyJS分离样式这些,减小bundle chunk的大小,比如ExtractTextPluginGZIP 压缩,在打包的时候对资源对齐压缩,只

2020-09-24 21:41:29 294

原创关于vue项目中的兼容问题解决

vue的兼容问题在项目开始的时候，要先确定项目是否兼容到 IE8 及一下的版本，因为vue支持 IE8 以及更低版本。1、ES6语法不支持解决方法：引入babel-polyfill npm install --save bable-polyfill webpack.base.conf.js中修改为app: ['event-source-polyfill', 'babel-polyfill', './src/ma

2020-09-23 22:02:00 4128

原创虚拟DOM的实现原理与优缺点

前言：虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。一、什么是虚拟DOM虚拟D

2020-09-22 21:33:01 12292 1

原创 vue路由或者前端路由的实现原理

实现前端路由的技术1、利用H5中的history API 实现主要利用history.pushStatae和history.replaceState来实现，不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录，并且再用该方法发布项目时，还需配置一下Apache。2、用URL的hash实现我们在URL中常看到#，这个符号，而“#”这个符号有两种情况，一个是我们所谓的锚点，但是路由里的锚点不叫锚点，我们称之为hash,它主要利用监听hash 值的变化来

2020-09-21 21:48:10 190

原创小程序支付功能实现流程

一、微信支付微信支付包括以下六种场景1、线下支付2、公众号支付3、小程序支付4、pc网站支付5、手机app支付6、企业内部使用微信资金流动不同场景下的支付措施在苹果手机端的音频视频不能再ｉＯＳ端上使用，会收到微信的限制。建议用公众号和Ｈ５的方式实现，因为他是非小程序的方式打开的，用网页的形式打开的，也就没有限制存在！二、微信小程序的支付场景我先把小程序微信支付的图搬过来：然后在叙述支付的过程：首先小程序通过调用登录接口获取code，传递给商户服务器用来获取用户的o

2020-09-20 22:03:49 710

原创百度云视频的使用

一、实现思路1、先找到后端的视频接口2、清楚接口的请求方式，以及参数的设置二者缺一不可！这里要注意用params传递参数,如下所示：export function goodsss(id,params){ return request({ url:`categories/${id}/attributes`, method:"GET", params }) }3、请求成功,后台返回数据//"video_id"

2020-09-18 21:22:36 1183

原创 Promise 和async/awiat的关联

一、params首先params是用来解决异步的队列化操作然后，promise参数是个函数，函数的参数有2个，resolve 返回成功的信息，reject返回失败的信息 new Promise((resolve,reject)=>{ // 开始请求数据 // 当数据回来之后调用 resolve(res) // 当请求失败之后调用 reject(err) })例如使用promise请求数据var

2020-09-17 00:28:45 193

原创 vue项目需要的优化

从三个方面第一个方面：代码层面的优化• v-if 和 v-show 区分使用场景• computed 和 watch 区分使用场景• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if• 长列表性能优化• 事件的销毁• 图片资源懒加载• 路由懒加载• 第三方插件的按需引入• 优化无限列表性能• 服务端渲染 SSR or 预渲染第二个方面：Webpack 层面的优化• Webpack 对图片进行压缩• 减少 ES6 转为 ES5 的冗余代码• 提取公共代码

2020-09-15 23:59:22 549

原创 vue中echarts,VueQuillEditor的下载和使用

一、echarts1、安装：npm install echarts -S2、引入： import echarts from 'echarts'; Vue.prototype.$echarts = echarts3、简单的案例（结合axios的使用）折线图html<template> <div class="sj"> <el-card>  <div

2020-09-14 20:52:28 684

原创 xxs和csrf的防御

一、关于xxs和csrf的防御1.防御XSS攻击HttpOnly 防止劫取 Cookie用户的输入检查服务端的输出检查2.防御CSRF攻击验证码Referer CheckToken 验证二、详解XSS1 HttpOnly 防止劫取 CookieHttpOnly 最早由微软提出，至今已经成为一个标准。浏览器将禁止页面的Javascript 访问带有 HttpOnly 属性的Cookie。上文有说到，攻击者可以通过注入恶意脚本获取用户的 Cookie 信息。通常 Cookie 中都包含

2020-09-11 20:36:07 733

转载 transition、transifrom、animate css动画的使用

一、过渡动画过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。Note：不是所有属性都能过渡，只有属性具有一个中间点值才具备过渡效果。点击查看完整列表。css过渡只能定义首和尾两个状态，所以是最简单的一种动画。注释：Internet Explorer 9 以及更早版本的IE浏览器不支持 transition 属性。如何在项目中正确、熟练地应用transition动画？第一步：在目标元

2020-09-11 20:26:48 736

原创 css让元素居中的十种方法

一、十种方法第一种通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高，给子元素设置top：50%；left：50%，但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了**优点：**比较好理解，兼容性好**缺点：**需要知道子元素的宽高第二种：也是通过绝对定位的方式 absolute + margin auto

2020-09-09 23:50:56 3327

原创图片懒加载的实现

一、懒加载实现的原理用一句话来说：懒加载就是延迟加载是优化页面效果的一种手段，即通过控制图片内的src属性的现实或隐藏来实现的！如图：总的来说就是：当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了，就是说当top-height<=s+h时，图片在可视区是使片加载。二、实现代码实现懒加载有四个步骤，如下：1.加载loading图片2.判断哪些图片要加载【重点】3.隐形加载图片4.替换真图片html<!DOCTYP

2020-09-08 21:14:59 235 1

原创 mock插件的使用（主要用于生成虚拟数据）

MOCK,js(使用方法)mockjs官网：http://mockjs.com/mockjs官方文档：https://github.com/nuysoft/Mock/wiki/Getting-Started具体使用方法第一步安装mockjsnpm install mockjs第二步创建一个mock目录生成mock数据例如：course.jsimport Mock from "mockjs";//mock课程数据var result=Mock.mock({ code:

2020-09-07 21:50:24 525

原创双向数据绑定

关于双向数据绑定当我们在前端开发中采用MV的模式时，M - model，指的是模型，也就是数据，V - view，指的是视图，也就是页面展现的部分。通常，我们需要编写代码，将从服务器获取的数据进行“渲染”，展现到视图上。每当数据有变更时，我们会再次进行渲染，从而更新视图，使得视图与数据保持一致。也就是：在这里插入图片描述而另一方面，页面也会通过用户的交互，产生状态、数据的变化，这个时候，我们则编写代码，将视图对数据的更新同步到数据，以致于同步到后台服务器。也就是：不同的前端 MV 框架对于这种 Mo

2020-09-04 20:53:57 386

原创对ECMAScript6/7/8/的复习

一、javaScript组成：包括：ECMAScript,DOM,BOM1.ECMAScript:javascript核心语法，不依赖平台如：定义变量，if,switch,for,数组Api,字符串API,正则Api…2.DOM:(Document Object Model)针对浏览器标签操作例如：获取id，获取类名，获取标签名注：操作真实DOM，引起重绘和回流–>才引出虚拟DOM 重绘：主要指页面颜色的改变，不影响DOM的空间变化 color,background 回流：指页面元

2020-09-03 20:11:16 211

原创闭包，原型链及继承

面试回答技巧如何回答的一个技术的技巧，或者你的理解？比如：说一下对闭包的理解？答：从1…是什么?2.应用场景3.优缺点4.具体实现5.还有没有更好的解决方案！这五点来讲今天的内容都是从这几个方面来讲解。一、闭包1、闭包是什么？函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。总结来说：闭包就是函

2020-09-02 23:32:50 256

原创函数闭包的实现原理及扩展

一、闭包概念：简单说就是函数中嵌套函数，嵌套在这里面的函数叫做闭包函数，外面的函数叫做闭包环境作用：通过闭包函数，可以访问到闭包函数所在局部作用域中的变量及参数特点：闭包的特点或本质：将局部变量常驻内存，这既是它的优点也是它的缺点，使用不当还会造成内存泄漏闭包的原理：闭包是利用JS中的垃圾回收机制，当一个函数被调用时，会开辟空间，函数调用结束，会释放空间，但如果被释放空间时，发现其中有变量正在被其他函数使用时，则这个变量会常驻内存而不被回收。　　　　扩展：如何解决内存泄漏，将暴露在外部的变量设置为

2020-09-01 23:33:23 419

zyq51的博客