@随性-CSDN博客

原创解决h5嵌套ios中的橡皮筋效果

最近公司功能需求要把新开发的h5页面嵌入ios端app中，遇到这个让人很是头疼的一个问题，h5页面在ios端，页面一直存在回弹效果。如果直接对body禁止的话，然后个页面都无法滑动了。今天终于搞定了这个问题,特此记录下由于公司要求用vue3.0开发，所以在此就直接用3.0来记录了。一首先我们要在 setup()中定义两个方法注意：此处的方法需要return出去，方可使用setup(){ // 滑动开始获取初始位置坐标 function touchstartFunction(e)

2021-05-11 11:20:01 1836

原创移动端页面禁止放大缩小

2021-03-29 17:57:24 911

原创 vue使用ant design vue 树型控件（tree）

效果图话不多说直接码代码 <a-tree checkable :tree-data="list" :expanded-keys="expandedKeys" :checkedKeys="checkedKeys" :selected-keys="selectedKeys" defaultExpandAll @select="onS

2021-03-15 18:19:59 5216 3

原创 js按时间排序

this.userList.sort((a, b) => { return new Date(b.createTime) > new Date(a.createTime) ? 1 : -1; });

2021-03-15 18:02:36 438

原创 vue3.0路由配置

一.安装cnpm i vue-router@next -D二.使用步骤1.创建Router对象和路由配置——routerIndex.jsimport {createRouter, createWebHashHistory, createWebHistory} from "vue-router"// 1. 定义路由组件，注意，这里一定要使用文件的全名（包含文件后缀名）import countIndex from "../pages/count/countIndex.vue";impor

2021-03-09 18:17:49 5045

原创为何组件的data必须是一个函数

总结首先定义的 xx.vue文件在编译之后是一个类，每个地方使用这个组件的时候，相当于对这个类实例化，在实例化的时候执行data，如果不是一个函数的话，每个组件的实例的data都是同一个引用数据，当该组件作为公共组件共享使用，一个地方的data更改，所有的data一起改变。如果data是一个函数，每个实例的data都在闭包当中，就不会各自影响了...

2020-11-01 21:43:55 126

原创 link与@import区别

<head>  <link rel="stylesheet" href="./a.css"> <style> /* @import 在css环境中导入外部css */ @import url('./b.css'); .box{ width: 100px; height: 100px;

2020-11-01 21:37:11 110

原创什么是同源策略

什么是同源策略同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个

2020-11-01 21:33:13 2861

原创移动端1像素问题及解决方案

为什么存在一像素问题因为在移动端，由于屏幕分辨率的不同，现在分为一倍屏、二倍屏、三倍屏。在不同的分辨率上，有可能一像素被渲然成二个像素点或者三个像素点，所以在实际写代码的时候，我们写的 border: 1px solid #000; 可能实际被渲然为 2px/3px；即在移动端的 CSS 写了 1px，实际上显示会比 1px 粗。 border: solid 1px; 在移动端的 HTML 的 header 中添加下述代码，意思是本页面的 viewport 宽度为设备宽度，初始缩放值和最大缩放值是 1，禁

2020-11-01 20:53:06 2683

原创移动端常见点透问题

“点透”是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执行点击事件（或打开链接）。这个被定义为这是一个“点透”现象。为什么会出现点透zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的再点击完成时的tap事件(touchstarttouchend)需要冒泡到document上才会触发，而在冒泡到document之前，用户的手接触屏幕(touc

2020-11-01 20:27:22 138

原创递归实现深拷贝

浅拷贝和深拷贝的区别：浅拷贝浅拷贝是会将对象的每个属性进行依次复制，但是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。深拷贝深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。深拷贝后的对象与原来的对象是完全隔离的，互不影响，对一个对象的修改并不会影响另一个对象浅拷贝实现方法：① 赋值运算*② 扩展运算符 …③ Object.assign( target, …sources)target参数：代表目标对象，assign方法会

2020-11-01 19:48:06 2680 1

原创微信小程序-wxParse插件的使用

wxParse是一个微信小程序富文本解析组件wxParse git地址：https://github.com/icindy/wxParse下载完之后我们需要把我们用到的wxParse文件夹，拷贝到我们的项目目录下下面是具体的使用步骤1.下载 wxParse，解压，将 wxParse 放入小程序中。如下图：2.在你需要引用这个插件的 wxml 文件中引用 wxParse.wxml//路径根据你实际情况修改<import src="../../../wxParse/wxParse.w

2020-10-28 15:23:52 374

原创 http和https的区别

一、HTTP和HTTPS的基本概念Http：超文本传输协议（Http，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。设计Http最初的目的是为了提供一种发布和接收HTML页面的方法。它可以使浏览器更加高效。Http协议是以明文方式发送信息的，如果黑客截取了Web浏览器和服务器之间的传输报文，就可以直接获得其中的信息。Https：是以安全为目标的Http通道，是Http的安全版。Https的安全基础是SSL。SSL协议位于TCP/IP协议与各种应用层协议之间

2020-10-24 17:21:43 319

原创微信小程序的生命周期

1，应用生命周期App:App()函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。关于小程序的退出：当用户点击小程序左上角关闭，或者按设备Home键离开微信，小程序并没有直接销毁，而是触发onHide方法进入了后台，短时间内当再次进入微信或者再次打开小程序，小程序会从后台状态进入前台，此为“热启动”。注意当小程序进入后台状态一定时间后，或者系统资源占用过高，微信会真正销毁小程序。用户第一次进入小程序或者在小程序销毁后再次进入小程序是为“冷启动”。小程序的冷启动：小程

2020-10-06 11:21:18 1150

原创放大镜原生实现

分析难点列出1.鼠标在图片区域时，透明小区域出现，放大的区域出现2.鼠标移出图片时，透明小区域小时，放大区域消失3.透明小区域随着鼠标移动难点解决关键（对应解决回答）1.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为block2.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为none3.通过event对象获取鼠标的当前坐标位置，即方法event.layerX,event.layer.Y,然

2020-09-22 21:25:57 83

原创 vue中mixins(混入)的使用

一、来自官网的描述混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二、如何创建Mixins？在src目录下创建一个mixins文件夹，文件夹下新建一个myMixins.js文件。前面我们说了mixins是一个js对象，所以应该以对象的形式来定义myMixins，在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、com

2020-09-22 20:50:29 7176 5

原创 vue中的provide和inject

一、名词解析：provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Object }provide：提供依赖``是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。inject：注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。说明：provide 和 inject 主要

2020-09-22 19:15:16 11132

原创 Vue虚拟Dom和diff算法

虚拟DOM到底什么是虚拟DOM呢?Virtual DOM 其实就是一棵以 JavaScript 对象( VNode节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上简单来说，可以把Virtual DOM 理解为一个简单的JS对象，并且最少包含标签名( tag)、属性(attrs)和子元素对象(children)三个属性。不同的框架对这三个属性的命名会有点差别诞生的原因因为操作DOM 的代价比较高 ,

2020-09-20 19:17:05 193

原创 vue自定义过滤器filter

过滤器就是一个数据经过了这个过滤器之后出来另一样东西。filters是.vue文件中export对象中的一个选项，其类型是Object，即包含Vue实例可用过滤器的哈希表。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的.

2020-09-18 19:53:37 1427 1

原创 vue自定义指令的应用场景

使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件常用案例1、输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-focus&gt

2020-09-18 19:37:45 267

原创 Vue的自定义指令

背景除了核心功能默认内置的指令 (如v-model 和 v-show等)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。如何自定义指令全局自定义指令当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：// 注册一个全局自定义指令 `v-focus`Vue.directive('foc

2020-09-18 19:25:18 69

原创 Vue 组件封装

Vue 组件封装项目中没有从零开始封装一个组件，本文记录一下 Vue 组件封装的基本实践和一些组件的相关知识。主要涉及以下知识点：封装一个组件的代码组织形式；vue 组件的三大核心：属性（props、data）;事件插槽样式其他一些杂项$nextTick 函数的使用获取 DOM 元素及在父级组件中执行子组件方法文件组织形式在组件文件夹 component 下创建一个与组件名相同的文件，文件夹内必须有 index.js,并将组件导入到该文件中，这样方便我们引用组件。count

2020-09-17 22:16:11 609

原创 Vue修饰符详解

一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<a v-on:click.stop="doThis"></a><!-- 提交事件不

2020-09-17 22:01:00 17748 3

原创 Vue双向数据绑定原理

答：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步：需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，

2020-09-16 21:29:43 59

原创 Vue常用指令

一、vue常用指令：1.v-model 多用于表单元素实现双向数据绑定2.v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json3.v-show 显示内容 ,通过display=block/none来控制元素隐藏出现4.v-hide 隐藏内容同上5.v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）6.v-else-if 必须和v-if连用7.v-else 必须和v-if连用不能单独使用否

2020-09-16 20:49:15 314

原创 Vue生命周期

Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。1、beforeCreate在实例初始化之后，数据观测和event/watcher时间配置之前被调用。　　2、created实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$e...

2020-09-15 21:59:50 611 2

原创 v-fi 与v-show的区别

一、相同点都可以动态控制着dom元素的显示隐藏不同点1、实现方式v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。2、编译过程v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换；3、编译条件v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；v-show

2020-09-15 21:34:42 650

原创 js事件模型

事件模型事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。1.原始事件模型（DOM0级）　　　　这是一种被所有浏览器都支持的事件模型，对于原始事件而言，没有事件流，事件一旦发生将马上进行处理，有两种方式可以实现原始事件：（1）在html代码中直接指定属性值：<button id=“demo” type=“button” οnclick=“doSomeTing()” />（2）在js代码中为　document.getElementsById(“demo”).onclic

2020-09-13 20:36:59 211

原创 js事件监听

事件监听事件监听就是让计算机等待某个事件的发生，当这个事件发生之后，对其做出一个相应，如等待鼠标单击按钮，单击发生时打开一个新的页面；但是你写的监听事件发现这件事情后，会进行阻止，让其无法跳转。作用：实现多个事件的绑定通用性的事件监听方法：（1）绑定HTML元素属性：（2）绑定DOM对象属性：document.getElementById(“xxx”).οnclick=test;<!DOCTYPE html><html lang="en"> <head

2020-09-13 20:18:50 4272 2

原创 js中内存泄漏与垃圾回收机制

什么是垃圾回收？一般来说没有被引用的对象就是垃圾，就是要被清除，有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。垃圾回收的必要性下面这段话引自《JavaScript权威指南（第四版）》由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScri

2020-09-13 19:54:39 315

原创 js常用设计模式

工厂模式工厂模式是我们最常用的实例化对象模式了，是用工厂方法代替new操作的一种模式。因为工厂模式就相当于创建实例对象的new，我们经常要根据类Class生成实例对象，如A a=new A() 工厂模式也是用来创建实例对象的，所以以后new时就要多个心眼，是否可以考虑使用工厂模式，虽然这样做，可能多做一些工作，但会给你系统带来更大的可扩展性和尽量少的修改量。var lev=function(){ return "嘿哈"; }; function

2020-09-13 19:30:52 97

原创 js事件委托

基本概念事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。作用作用1：节约内存（哇塞，这个好这个棒！）作用2：能为之后新增的DOM元素依然添加事件案例1需要触发每个li来改变他们的背景颜色。<ul id="ul"> <li>aaaaaaa

2020-09-10 22:03:07 107

原创 js 实现数组扁平化

什么是数组扁平化？数组扁平化就是将一个多维数组转换为一个一维数组首先让我们思考一个这样的题目；假如有一个数组 var arr = [1, [2, 3, [4]]] ，我们怎么能把arr变成[1, 2, 3, 4]呢？即让多维数组降维，转换为只有一层的数组；如果用过lodash的话，我们知道 flatten 和 flattenDeep 方法都可以实现.flatten用法：概念：可以理解为将嵌套数组的维数减少，flattened（平坦）. 如果 isDeep 值为 true 时，嵌套数组将递归为一维数

2020-09-10 21:38:52 279

原创 se5常用方法总结

ES5新增的属性和方法（IE6/7/8不支持）全局变量会自动变成window对象身上的属性1、bind方法函数身上的方法，返回值是一个人this变量值发生变化的函数，返回一个新的函数 this是函数内部默认的一个内置变量（严格模式下，this指向是undefined） 1、在全局环境中使用this的指向（值）是window 2、在函数内部，this指向的还是window 3、在对象的方法内部，this指向的是方法的拥有者2、forEach()方法语法：arr.forE

2020-09-08 22:03:13 1021

原创 es6常用方法总结

解构赋值：数组的解构赋值：es6 let [a, b, c] = [1, 2, 3]; es5 var a = 1, b = 2, c = 3; let [a, [b, c], d, e = "cc"] = [1, [2], 3, undefined]; console.log(a)//1 console.log(e)//cc 对象的解构赋值：let foo; //foo已经定义了变量再赋值时在外边加

2020-09-08 21:31:13 579

原创 generator

generatorGenerator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。Generator 方式使用：function *myGenerator() { yield 'He

2020-09-06 22:49:11 308

原创 async,await 简单介绍

Async/AwaitAsync/Await是一个期待已久的JavaScript特性，让我们更好的理解使用异步函数。它建立在Promises上，并且与所有现有的基于Promise的API兼容。Async—声明一个异步函数(async function someName(){…})自动将常规函数转换成Promise，返回值也是一个Promise对象只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数异步函数内部可以使用awaitAwait—暂停异步的功能执行(var resu

2020-09-06 21:01:22 299

原创 promise使用及实现

什么是promisePromise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。Promise的两个特点Promise对象的状态不受外界影响1）pending 初始状态2）fulfilled 成功状态3）rejected 失败状态Promise

2020-09-06 20:37:12 525

原创 JavaScript中let、const、var 的区别

var、let、const的区别var定义的变量，存在变量提升,允许重复声明变量,能修改声明的变量,没有块的概念，可以跨块访问, 不能跨函数访问。let定义的变量，能修改声明的变量,只能在块作用域里访问，不能跨块访问，也不能跨函数访问。const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。变量提升问题var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。let和const不存在变量提升。即它们所声明

2020-09-06 19:58:44 65

原创 vuex是什么，怎么使用

Vuex是什么？vuex是一个专为vue.js应用程序开发的状态管理模式（它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化）。Vuex状态管理跟使用传统全局变量的不同之处1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，它采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但

2020-09-03 21:07:45 465

空空如也

空空如也