- 博客(50)
- 收藏
- 关注
RSS订阅原创 vue中使用video.js进行视频播放
关于video.jsvideo.js是一个拥有h5背景的网络视频播放器，同时支持h5以及Flash视频播放（可加载本地静态资源视频以及网络链接视频）官网：videojs.com/安装npm install video.jsmain.js中引入import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Video使用<div class="demo1-video"&g
2022-02-23 08:40:40
1570
原创 封装 better-scroll
npm install --save better-scroll1. 新建文件：BetterScroll.vue<template> <div ref="wrapper"> <slot></slot> </div></template><script> import BScroll from 'better-scroll' export default { name: 'Bett
2022-02-21 17:38:50
177
原创 简单实现防抖节流
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防抖节流</title></head><body> <input type="text" i
2021-06-09 22:01:27
121
1
原创 简单深浅拷贝
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>深浅拷贝</title></head><body> <script> con.
2021-06-09 22:00:26
66
原创 事件映射表
// 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件 { click: 'tap', touchstart: 'touchstart', touchmove: 'touchmove', touchcancel: 'touchcancel', touchend: 'touchend', tap: 'tap', longtap: 'longtap', //推荐使用l
2021-05-26 11:19:57
154
原创 建立远程Git仓库并完成初始提交
建立远程仓库远程仓库建立只需要在网站上直接操作即可本地项目提交注意: 由于我们之前的项目是直接从 vue-element-admin **克隆而来,里面拥有原来的提交记录,为了避免冲突, 先将原来的.git**文件夹删除掉并且对项目进行git初始化$ git init #初始化项目$ git add . #将修改添加到暂存$ git commit -m '人资项目初始化' #将暂存提到本地仓库查看版本日志$ git log #查看版本日志推送到远程仓库推送到远程仓库一般
2021-05-25 17:45:33
273
原创 vuex的使用
vuex基本使用1:安装 npm i vuex2:导入 import Vuex from 'vuex'3:注册 import Vue from 'vue' Vue.use(Vuex)4:实例化 const store=new Vuex.Store({ state:{ userInfo:"张三" }, mutations:{ setUserInfo(state,value){ state.userInfo=value
2021-05-25 15:31:26
66
原创 JavaScript 原型链
属性prototype：获取函数的原型对象，函数特有的属性proto：获取对象的构造函数的原型对象，所有的JS对象都有该属性constructor：获取对象的构造函数，所有的JS对象都有该属性说明javascript一切皆对象，比如"JS原型链“图中列出的函数、原型对象、对象实例示例// 示例代码，下面的例子会用到function Foo () { ... }const obj = {}const fn = function () { ... }const foo = new F.
2021-05-20 19:41:36
52
原创 JavaScript 的浅拷贝和深拷贝
什么是浅拷贝和深拷贝拷贝：指拷贝源对象到目标对象，又分为浅拷贝和深拷贝两种浅拷贝：如拷贝的对象有属性值是非基础类型（即对象），则浅拷贝拷贝的是对象的引用，而非对象本身，拷贝完成以后更改目标对象，源对象也会被更改深拷贝：深拷贝完美解决了浅拷贝存在的问题，目标对象是一个全新的对象，更改目标对象不会影响到源对象浅拷贝Object.assign()// 对象的属性值都是基础类型console.log('--------对象的属性值都是基础类型--------')const src1 = { a:
2021-05-20 19:32:05
78
原创 vue一小些知识点
特性继承：在父组件中使用子组件时，向子组件中传入一些非 props 属性，这些属性会默认作用到子组件的根元素中，这个特点叫做特性继承。inheritAttrs是否开启特性继承：true: 开启false：关闭class & style 不受特性继承的响应$ attrs：用来接收父组件中传入的所有的非 props 属性，可以传给它自己的子组件，以此达到隔代传参的效果。$listeners：用来接收父组件通过 v-on 绑定的所有事件，可以传给它自己的子组件
2021-05-20 07:59:20
222
1
原创 得到组件渲染的Dom
/** 获取某个组件渲染的Dom根元素 */function getComponentRootDom(comp, props){ const vm = new Vue({ render: h => h(comp, {props}) }) vm.$mount(); return vm.$el;}
2021-05-18 15:13:01
86
原创 微信小程序
基本概念小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。官方网址：https://mp.weixin.qq.com/(opens new window)和其它App的区别App：应用程序WebApp：移动Web/h5开发、它是运行在移动端的浏览器中，使用html、css、js开发，无需下载，直接访问微信小程序App：它运行在微信App中，它使用原生语法开发，或是使用框架（uniapp），从腾讯的服务器下载并且运行原生Ap
2021-05-18 11:40:28
200
原创 哪些操作会造成内存泄漏？
1.意外的全局变量2.被遗忘的计时器或回调函数3.脱离 DOM 的引用4.闭包第一种情况是我们由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。第二种情况是我们设置了setInterval定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。第三种情况是我们获取一个DOM元素的引用，而后面这个元素被删除，由于我们一直保留了对这个元素的引用，所以它也无法被回收。第四种情况是不合理的使用闭包，从而导致某些变量
2021-05-18 08:33:49
1147
原创 V8 引擎的垃圾回收机制
v8 的垃圾回收机制基于分代回收机制，这个机制又基于世代假说，这个假说有两个特点，一是新生的对象容易早死，另一个是不死的对象会活得更久。基于这个假说，v8 引擎将内存分为了新生代和老生代。新创建的对象或者只经历过一次的垃圾回收的对象被称为新生代。经历过多次垃圾回收的对象被称为老生代。新生代被分为 From 和 To 两个空间，To 一般是闲置的。当 From 空间满了的时候会执行 Scavenge 算法进行垃圾回收。当我们执行垃圾回收算法的时候应用逻辑将会停止，等垃圾回收结束后再继续执行。这个算法分
2021-05-18 08:32:15
177
原创 Ajax 是什么? 如何创建一个 Ajax？
原生：//1：创建Ajax对象var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');// 兼容IE6及以下版本//2：配置 Ajax请求地址xhr.open('get','index.xml',true);//3：发送请求xhr.send(null); // 严谨写法//4:监听请求，接受响应xhr.onreadysatechange=function(){
2021-05-17 15:25:00
89
原创 常用的正则表达式（仅做收集，涉及不深）
//（1）匹配 16 进制颜色值var color = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;//（2）匹配日期，如 yyyy-mm-dd 格式var date = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;//（3）匹配 qq 号var qq = /^[1-9][0-9]{4,10}$/g;//（4）手机号码正则var phone = /^1[34578]\d{9}$/g;//（5）
2021-05-17 14:35:54
78
原创 JavaScript 原型，原型链？有什么特点？
在 js 中我们是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性值，这个属性值是一个对 象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当我们使用构造函数新建一个对象后，在这个对象的内部 将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说我们 是不应该能够获取到这个值的，但是现在浏览器中都实现了 proto 属性来让我们访问这个属性，但是我们最好不要使用这 个属性，因为它不是规范中规定
2021-05-17 11:39:09
66
原创 寄生式组合继承的实现？
function Person(name) { this.name = name;}Person.prototype.sayName = function() { console.log("My name is " + this.name + ".");};function Student(name, grade) { Person.call(this, name); this.grade = grade;}Student.prototype = Object.create
2021-05-17 11:31:31
92
原创 . JavaScript 继承的几种实现方式
我了解的 js 中实现继承的几种方式有：第一种是以原型链的方式来实现继承，但是这种实现方式存在的缺点是，在包含有引用类型的数据时，会被所有的实例对象所共享，容易造成修改的混乱。还有就是在创建子类型的时候不能向超类型传递参数。第二种方式是使用借用构造函数的方式，这种方式是通过在子类型的函数中调用超类型的构造函数来实现的，这一种方法解决了不能向超类型传递参数的缺点，但是它存在的一个问题就是无法实现函数方法的复用，并且超类型原型定义的方法子类型也没有办法访问到。第三种方式是组合继承，组合继承是将原型链和借
2021-05-17 11:30:24
70
原创 如何在浏览器端实现模块化 {ignore}
浏览器端的模块化问题：效率问题：精细的模块划分带来了更多的JS文件，更多的JS文件带来了更多的请求，降低了页面访问效率兼容性问题：浏览器目前仅支持ES6的模块化标准，并且还存在兼容性问题工具问题：浏览器不支持npm下载的第三方包这些仅仅是前端工程化的一个缩影当开发一个具有规模的程序，你将遇到非常多的非业务问题，这些问题包括：执行效率、兼容性、代码的可维护性可扩展性、团队协作、测试等等等等，我们将这些问题称之为工程问题。工程问题与业务无关，但它深刻的影响到开发进度，如果没有一个好的工具解决这些
2021-05-17 09:23:50
78
原创 s的数据类型有哪些，值是如何存储的
JavaScript一共有8种数据类型，其中有7种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol（es6新增，表示独一无二的值）和BigInt（es10新增）；1种引用数据类型——Object（Object本质上是由一组无序的名值对组成的）:里面包含 function、Array、Date等。JavaScript不支持任何创建自定义类型的机制，而所有值最终都将是上述 8 种数据类型之一。原始数据类型：直接存储在栈（stack）中，占据空间小、大小
2021-05-17 08:33:57
3779
原创 小程序静默登录方案设计
1. 背景首先谈谈在小程序的开发中，如何借助微信的能力标识一个用户?微信官方提供了两种标识：OpenId是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。UnionId 是一个用户对于同主体微信小程序／公众号／APP 的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过UnionId，实现多个小程序、公众号、甚至 APP 之间的数据互通。同一个用户的这两个 ID 对于同一个小程序来说是永久不变的，就算用户删了小程序，下次用户进入小程序，开发者依旧可以通过后
2021-05-17 08:13:12
404
原创 新的标签&新的 css 属性
新的标签：上标： sup下标： sub新的 css 属性：word-break: break-all; // 作用：单词换行word-wrap: break-word; // 作用：特殊字符换行
2021-05-16 10:51:25
47
原创 面适配 - 基本说明
全局 less 变量 - 配置在 style 中导入其它样式文件： @import url('xxx');有了设计规范之后，我们就可以根据规范中的内容抽取less全局变量啦,把颜色抽取一波,同时配合自动化导入让代码中可以使用预处理器自动化导入style-resources-loader实现步骤：定义一个保存全局变量的文件/src/style/var.less装包vue add style-resources-loader注意:报上面错误就执行 npm i vue-cl
2021-05-16 10:48:45
103
原创 computed和methods有什么区别
在使用时，computed当做属性使用，而methods则当做方法调用computed可以具有getter和setter，因此可以赋值，而methods不行computed无法接收多个参数，而methods可以computed具有缓存，而methods没有vue对methods的处理比较简单，只需要遍历methods配置中的每个属性，将其对应的函数使用bind绑定当前组件实例后复制其引用到组件实例中即可而vue对computed的处理会稍微复杂一些。当组件实例触发生命..
2021-05-15 16:25:15
98
原创 new Vue之后，发生了什么？数据改变后，又发生了什么？
1. 创建vue实例和创建组件的流程基本一致首先做一些初始化的操作，主要是设置一些私有属性到实例中运行生命周期钩子函数beforeCreate进入注入流程：处理属性、computed、methods、data、provide、inject，最后使用代理模式将它们挂载到实例中运行生命周期钩子函数created生成render函数：如果有配置，直接使用配置的render，如果没有，使用运行时编译器，把模板编译为render运行生命周期钩子函数beforeMount创建一个Watcher，传入一.
2021-05-15 16:15:57
621
原创 闭包
闭包是指有权访问另外一个函数作用域中的变量的函数JavaScript代码的整个执行过程，分为两个阶段，代码编译阶段与代码执行阶段。编译阶段由编译器完成，将代码翻译成可执行代码，这个阶段作用域规则会确定。执行阶段由引擎完成，主要任务是执行可执行代码，执行上下文在这个阶段创建。什么是作用域？ES5 中只存在两种作用域：全局作用域和函数作用域。在 JavaScript 中，我们将作用域定义为一套规则，这套规则用来管理引擎如何在当前作用域以及嵌套子作用域中根据标识符名称进行变量（变量名或者函数名）查找什么
2021-05-15 14:20:28
50
原创 实现函数能够深度克隆基本类型
浅克隆：function shallowClone(obj) { let cloneObj = {}; for (let i in obj) { cloneObj[i] = obj[i]; } return cloneObj;}深克隆：考虑基础类型引用类型RegExp、Date、函数 不是 JSON 安全的会丢失 constructor，所有的构造函数都指向 Object破解循环引用function deepCopy(obj) { if (ty
2021-05-15 14:17:02
307
原创 SSH配置
1、配置SSH，主要是为了免输入用户名和密码进行git远程仓库操作2、如果你在跟远程仓库操作过程中习惯了输入用户名和密码进行操作，那么你可以跳过这一章节3、SSH的配置，跟我们的电脑系统息息相关，如果你换了电脑或是系统，需要重新配置4、配置好SSH key之后，把私钥留在自己的电脑中，公钥上传到Gitee后台5、使用SSH的方式，一定要记住，我们关联的远程仓库地址，是类似于 [email protected]:xxx/xxx.git 这样SSH 配置SSH的配置可以参考下面gitee.com上面的文章，
2021-05-15 10:45:02
1275
原创 Git操作
实际开发过程中，一般会有两个仓库，一个是位于本地的本地仓库，另外一个是远程仓库(gitee.com 或是自己公司搭建的 git 远程仓库)在做远程操作之前，一定要先把本地的代码进行提交在做分支操作之前（切换分支、合并分支），一定要把本地的代码进行提交在每次操作之前，可以通过 git status 查看下当前仓库的状态或是通过 vscode 的工具查看也可以常见操作创建本地仓库 创建好本地仓库之后，我们实际开发中，一般会跟远程仓库关联起来（gitee.com/github.com）切换到.
2021-05-15 10:43:21
63
原创 静默刷新
原理：在不刷新整个页面，只刷新页面的一部分，来显示数据的重新渲染实现过程：将需要重新渲染的部分使用 v-if<div v-if="show"></div>export default { data () { return { show: true } }}需要重新渲染时，进行以下操作：this.show = falsethis.$nextTick(() => { this.show
2021-05-15 10:05:59
663
原创 v-model 的原理
v-model即可以作用于表单元素，又可作用于自定义组件，无论是哪一种情况，它都是一个语法糖，最终会生成一个属性和一个事件当其作用于表单元素时， vue会根据作用的表单元素类型而生成合适的属性和事件。例如，作用于普通文本框的时候，它会生成value属性和input事件，而当其作用于单选框或多选框时，它会生成checked属性和change事件。v-model也可作用于自定义组件，当其作用于自定义组件时，默认情况下，它会生成一个value属性和input事件。<Comp v-model=".
2021-05-14 16:37:17
567
原创 阐述一下对vue虚拟dom的理解
1. 什么是虚拟dom？虚拟dom本质上就是一个普通的JS对象，用于描述视图的界面结构在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这也就意味着每个组件都对应一棵虚拟DOM树2.为什么需要虚拟dom？在vue中，渲染视图会调用render函数，这种渲染不仅发生在组件创建时，同时发生在视图依赖的数据更新时。如果在渲染时，直接使用真实DOM，由于真实DOM的创建、更新、插入等操作会带来大量的性能损耗，从而就会极大的降低渲染效率。因此，vue在渲染时
2021-05-14 14:50:05
726
原创 滚动条处理
未缓存过的页面：其他页面，切换过来之后，滚动条滚动到页面上顶部，缓存过的页面：find（例如），切换过来之后，保留滚动的位置方案一：未缓存的页面滚动到页面顶部router.afterEach(() => { window.scrollTo(0, 0)})方案二： 缓存的页面保存滚动的位置步骤：在导航前置守卫中记录页面离开时滚动条位置router.beforeEach((to,from,next)=>{ from.meta.scrollTo
2021-05-14 14:25:46
122
原创 Vue计算属性
计算属性是 vue 提供的一种技术，用来帮助我们对数据进行处理作用：可以通过已有的数据计算出新的数据新的数据还会根据已有数据的改变而改变特点：必须要有返回值会有缓存：第一次使用时会调用计算属性对应的方法，并且将结果缓存起来；下次使用直接从缓存中得到缓存会更新，计算属性中的缓存依赖项一旦改变，对应的方法会重新执行，并且再次将结果缓存<!DOCTYPE html><html lang="en"><head> <meta
2021-05-14 14:19:50
64
原创 qrcodejs2
使用第三方包将当前路径转为二维码使用步骤：下载第三方包：npm install qrcodejs2 --save导入第三方包：import QRCode from 'qrcodejs2'调用：添加结构：<div id="qrcode" ref="qrcode"></div>调用方法：getQRcode() { var res = new QRCode({ width: 200, // 二维码的宽 height: 200, // 二维码的高
2021-05-14 14:14:16
1012
原创 Vue使用html2canvas将页面转化为图片
微信端将页面截屏之后保存到本地，使用了html2canvas插加粗样式install npm install --save html2canvas在所需页面引入import html2canvas from "html2canvas"use<div ref="imageWrapper"> <div class="success"> <div class="img"> <img class="img-i
2021-05-13 17:31:41
555
3
原创 浅谈JS深拷贝（深克隆）
在学习深拷贝之前，我们要先搞明白什么是深拷贝？在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中。当我们对数据进行操作的时候，会发生两种情况基本数据类型var a = 3;var b = a;b = 5;console.log(a); // 3console.log(b); // 5可以看到的是对于基本类型来说，我们将一个基本类型的值赋予 a 变量，接着将
2021-05-13 08:39:11
78
原创 input 搜索如何防抖，如何处理中文输入
<input id='myinput'> function jeiliu(timeout){ var timer; function input(e){ if(e.target.composing){ return ; } if(timer){ clearTimeout(timer); } timer = setTimeout(.
2021-05-13 08:04:12
489
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人