z逍遥-CSDN博客

原创 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 385 1

原创 vue中常见的原理

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

2020-09-28 21:15:14 418

原创 vue项目中遇到的优化

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

2020-09-24 21:41:29 268

原创关于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 4023

原创虚拟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 12129 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 161

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

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

2020-09-20 22:03:49 663

原创百度云视频的使用

一、实现思路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 1116

原创 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 173

原创 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 527

原创 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 649

原创 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 676

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

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

2020-09-11 20:26:48 671

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

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

2020-09-09 23:50:56 3193

原创图片懒加载的实现

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

2020-09-08 21:14:59 209 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 491

原创双向数据绑定

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

2020-09-04 20:53:57 372

原创对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 189

原创闭包，原型链及继承

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

2020-09-02 23:32:50 235

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

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

2020-09-01 23:33:23 395

原创防抖节流与this指向的改变

一、防抖节流1、防抖在固定的时间内没有触发事件，会在固定时间结束后触发，如果固定时间内触发事件了，会在延长固定时间再触发防抖主要利用定时器实现用实例的话，可以用电梯的升降，遇到人进入会有一段时间的停止，当再次有人进入延迟会延长。//用定时器实现防抖function debounce(func,wait) { var timer=null; return function() { //保存当前调用的dom对象 var _this=this; //保

2020-08-31 22:21:45 2789

原创有关面试的一些问题

面试官喜欢问的问题以下会列出一些我们面试官的问题，请提前做好准备。需要注意的是，校招和社招的是不一样的，校招会更加关注基础知识，而社招会更加关注之前做过的项目情况。项目相关面试其实说白了就是根据一个人之前的经历，来判断出后续这人会做得怎样，如果你之前从没做成过一件事情，凭什么让别人相信你之后能做成呢？因此无论哪里的面试都会问你之前做过的项目项目可以是多人协助开发一个产品，也可以是自己个人做过的业余应用，只需介绍 1、2 个就够了，需要注意的是 1 + 1 != 2，做了两个平庸的项目不如做了一个好

2020-08-28 20:42:23 166

原创关于js的一些小细节和要点

一、基本数据类型首先基本数据类型是不可变的！然后，就是六种基本数据类型的细节，六种基本类型String，Number，Boolean,Null,undefined,Symble。1、number number中需要注意的是NaN与undefined NaN:not a number Infinity：无限大两者都是Number类型 NaN与undefind的区别： null 与undefined几乎等价；在if语句中，undefined和null都会被自动转换为

2020-08-27 23:09:23 108

原创隔代通讯的补充及拖拽、递归组件的实现

一、隔代通讯***provide:提供服务1.通过对象提供export default {name: “app”,provide:{ money:1000000 },data() {return {}}2.通过函数提供export default {name: “app”,provide(){return {app:this}},data() {return {}}***inject:消费服务export default {name: “bcom”,inject

2020-08-26 23:04:57 171

原创 vue中路由守卫的使用

路由守卫路由钩子函数有三种： 1：全局钩子： beforeEach、 afterEach 2：单个路由里面的钩子： beforeEnter、 beforeLeave 3:组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave主要是因为：今天用我到了路由拦截，用的是组件内的路由守卫，于是就上网找了找其他的，记录一下！做一个笔记！标题一、全局守卫无论访问哪一个路径，都会触发全局的钩子函数，位置是调用router的方法route

2020-08-24 23:26:49 1046

原创 Vuex的辅助函数

1.Vuex的辅助函数辅助函数：mapState、mapGetters、mapActions、mapMutations2.mapState 辅助函数官方的解释是:当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键当初在看到这个解释的时候可能觉得非常空洞，难以理解。生成计算属性是什么？少按几次键？？？mapState是state的语法糖,什么是语法糖?我对语法糖的理解就是,我明明

2020-08-21 23:18:21 2421 1

原创 ajax与Axios

一、什么是ajaxAsync javascript and XML{ name:"赵云", age:2, sex:"未知"}<user> <name>王超</name> <age>2</age> <sex>未知</sex></user>AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX

2020-08-20 20:55:48 216

原创 axios数据请求封装及过滤器与moment日期库的结合使用

一、axios数据请求封装1、api.js2、evn.js3、request.js二、过滤器与moment日期库的使用1.全局过滤器定义：Vue.filter(‘过滤器名称’,function(a,b,c) { //.... return ...})使用：{{ num | 过滤器名称(v1,v2) }}2.局部过滤器3.总结：过滤器使用场景：用于将后台数据处理成用户最终显示的数据格式例如：性别，支付状态，物流状态，时间戳。。。。。。时刻moment官网：htt

2020-08-19 22:55:24 385

原创 vue项目的手动创建与sass用法

一、手动创建vue项目的流程1、第一步确保自己的node为最新版本，其次是@vue/cli 脚手架要保证在4.3.1， vue版本在^2.6.11，这个版本。注：这里需要注意要将vue版本和vue脚手架版本区分开！2、第二步就是下载了下载vue脚手架的命令：npm install -g @vue/cli检查vue脚手架的命令： vue -V创建vue项目的命令: vue create myvue (项目名)vue的版本可在项目内的package.json里进行查看。3、

2020-08-18 20:53:44 648

原创用webpack搭建前端环境的流程

前言：·首先，我们要知道前端的构建工具有以下这些： grunt 、 gulp 、 webpack 、 Fis3 然后那！webpack是一个用来将JavaScript 应用程序的静态模块打包的打包器。最稳定的是V4.44这个版本。一、在搭建webpack之前要注意的事项1、查看是否安装node.js通过cmd 命令提示符检查自己是否安装了 node.js,没有安装的话需要安装后，在进行查看是否安装了淘宝镜像，若是没有则执行下面这步：npm config

2020-08-17 20:12:41 145

原创小程序完结感言

一、小程序的优点小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开用。也体现了「用完即走」的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。但开发的小程序，上线时会向腾讯交一定的费用。二、自己对于项目的理解1、在做项目的一些想法刚开始做项目时:有些恐惧，第一次接触小程序嘛！就像那句话说的一样（“人啊！总会对自己未知的感到恐惧。”），所以，在做项目的过程，对我来讲也是一个挑战自我，克服困难的

2020-08-16 00:04:34 339

转载小程序开发最重要、最经典面试题

小程序面试题bindtap和catchtap的区别是什么？bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡Js数组转成换字符串，强制转换成整数及转换成浮点数的函数分别是什么？js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。转换函数：在判断字符串是否是数字值前，parseInt()

2020-08-14 23:40:17 381

原创函数的创建方法与变量的作用域理解

一、创建函数3种方法1 、函数声明function 函数名(){}2 、函数表达式var 函数名 = funciton(){}var fn = function(){}fn()3、构造函数的创建var 函数名 = new Function(){}注意：函数声明和函数表达式的区别1.函数声明可以在任意可见位置调用(即在函数定义的前面，后面都可以调用)2函数表达式必须先定义后调用3.函数声明可以预加载，也就是说函数声明有函数提升的作用二、变量作用域！！！用域分类：全局作用

2020-08-14 23:19:43 227

原创简述小程序与vue的不同之处

一、小程序的双向绑定小程序直接用this.data的话会获取不到数据，因此不会同步到视图，必须用this.setData({//这里面是设置要调用的值的，如： list:this.data.list})二、wxss 与 css 的不同wxss和css类似，不过是在css的基础上做了一些修改和更新。如：尺寸单位由px,变为rpx,同时rpx也可以称为响应式像素，可以在不同的手机端，进行适配！比如：规定的屏幕为750rpx，在iphone6上，屏幕的宽度为375px,即750rpx=375

2020-08-13 23:50:02 189

原创小程序中的报错：Component is not found in path “pages/index/miniprogram_npm/vant-weapp/action-sheet“ (using

一、用git命令拉取分支时的报错行代码段Component is not found in path "pages/index/miniprogram_npm/vant-weapp/action-sheet" (using by "pages/index/index");onAppRouteError: Component is not found in path "pages/index/miniprogram_npm/vant-weapp/action-sheet" (using by "pag

2020-08-12 23:45:27 7395 1

空空如也

空空如也