- 博客(48)
- 资源 (5)
- 收藏
- 关注
RSS订阅
原创 常用的ES6语法
<!-- <p> Let const：ES5只有全局作用域和函数作用域，let是块级作用域 。const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。 class, extends, super，箭头函数： classAnimal{//class定义类 //构造方法内定义自己私有的属性方法 constructor(){ this.type='anim...
2020-11-27 11:55:26
109
1
原创 常用数组方法总结中
数组属性属性 描述 constructor 返回创建数组对象的原型函数。 length 设置或返回数组元素的个数。 prototype 允许你向数组对象添加属性或方法。 Array 对象方法方法 描述 map() 通过指定函数处理数组的每个元素，并返回处理后的数组。 filter() 检测数值元素，并返回符合条件所有元素的数组。 find() 返回符合传入测试（函数）条件的数组元素。 some() 检测数组元素中是
2020-09-27 11:02:10
91
原创 正则表达式总结（校验数字,字符串及特殊需求的表达式）
例：验证字符串全为数字，全为数字返回true，否则返回false。注：str为空时，也返回true，即先要判断非空。var pattern = /^[0-9]*$/, str = '';console.log(pattern.test(str));一、校验数字的表达式数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$ 零和非零开头的数字：^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字：^..
2020-08-18 19:52:59
3230
原创 git常用操作与常用命令行总结
本地git与远程仓库添加关联：1.安装git，在命令行里设置用户名和邮箱:git config --global user.name "Your Name" git config --global user.email "email@example.com"2.关联仓库：先创建ssh key: ssh-keygen -t rsa -C "email@example.com"一直回车找到id_rsa.pub所在的目录，把公钥添加到远程仓库的ssh公钥里本地项目推送到远程空仓库：
2020-08-18 17:57:22
151
原创 前端开发中手机端相关知识点
综上所述，解决手机端前端开发的兼容性问题需要综合考虑多个方面，包括编写标准化和兼容性的代码、使用Polyfill和转译工具、实现响应式设计和布局、添加CSS前缀、进行测试与调试，以及考虑渐进增强和优雅降级等策略。这些措施将有助于确保应用在各种设备和浏览器上都能良好运行，提供一致的用户体验。手机端前端开发面临的兼容性问题主要源于不同设备和浏览器之间的差异，包括浏览器内核、HTML/CSS/JavaScript特性支持、设备屏幕尺寸和分辨率、操作系统和浏览器版本，以及触摸事件和手势识别的差异。
2024-03-20 17:51:41
217
原创 Webpack、Vite在Vue项目中常用的用法
总之，Webpack在Vue项目中扮演了至关重要的角色，它帮助开发者高效地管理项目的模块和资源，优化代码性能，并提供了一个灵活的配置系统来适应不同的项目需求。在Vue项目中，Webpack是一个核心工具，用于处理项目的模块打包、资源优化以及开发服务器的配置等任务。这些只是Vite在Vue 3项目中常用的一些用法示例。实际上，Vite还提供了更多高级功能和配置选项，你可以根据项目的具体需求进行进一步的探索和定制。Vite在Vue 3项目中是一个快速且高效的构建工具，它提供了许多实用的功能和用法。
2024-03-07 21:53:29
639
原创 vue3笔记
Vue 会在“next tick”更新周期中缓冲所有状态的修改，要等待 DOM 更新完成后再执行额外的代码，可以使用。与 reactive 对象不同的是，当 ref 作为响应式数组或原生集合类型(如。属性给予了 Vue 一个机会来检测 ref 何时被访问或修改。的局限性：有限的值类型 不能替换整个对象 对解构操作不友好。一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。在模板渲染上下文中，只有顶级的 ref 属性才会被解包。属性的 ref 对象中返回。) 中的元素被访问时，它。
2024-01-18 16:57:14
515
原创 html2canvas
npm install --save html2canvas // 执行下载图片逻辑 downloadPic(refName) { window.scrollTo(0, 0) html2canvas(this.$refs[refName], { // backgroundColor: 'red' }).then((canvas) => { // 回调中返回的其实就是一个canvas对象 // 可以使
2021-12-13 10:11:05
1007
原创 axios利用Blob下载
Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 download(param) { // 响应类型：arraybuffer, blob this.$axios .post('url', param, {...
2021-10-28 16:24:38
1651
原创 async await 循环
串行async function dbFuc(db) { let docs = [{}, {}, {}]; for (let doc of docs) { await db.post(doc); }}并行async function dbFuc(db) { let docs = [{}, {}, {}]; let promises = docs.map((doc) => db.post(doc)); let results = await Prom
2021-09-28 16:23:50
134
原创 前端相关知识总结中
undefined与null的区别 null：没有 undefined：未定义 JS中怎样判断undefined xx===undefined
2021-04-09 23:24:05
79
原创 vue相关知识概览总结中
1、MVVM的理解MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View代表UI 组件，它负责将数据模型转化成UI 展现出来。ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之..
2021-04-08 11:18:05
198
2
原创 scss 常用语法
变量、混合器及引入 $width: 100px; // 用$定义变量nav { width: $width; // 引用变量}@mixin div-back($color) {//用 @mixin 定义一组css并且可以传入变量 background: $color;}.item { @include div-back(red);//使用@include 引入混合器} 嵌套及父选择器标识符& article { a{ colo.
2021-03-30 16:53:22
106
原创 使用xlsx.full.min.js处理excel表格
下载地址：xlsx.full.min.js<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> </head> <body> <div id="..
2021-03-19 17:25:28
2618
原创 展开运算符...
// 合并数组和对象 a = [1, 2, 3] b = [3, 4, 5] console.log([...a, ...b])//[1, 2, 3, 3, 4, 5] c = { 'c': 1, 'c1': 2 } d = { 'c1': 2, 'd1': 3 } console.log({ ...c, ...d })//{c: 1, c1: 2, d1: 3} key相同的会覆盖 // 解构赋值数组和对象 let [e, .....
2021-02-08 16:28:24
84
原创 深拷贝与浅拷贝
如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。深拷贝与浅拷贝，只对于引用数据类型（数组，对象），浅拷贝只是复制了引用地址，深拷贝是复制了其值,并有了新的内存地址深拷贝：通过JSON对象来实现深拷贝： function deepClone2(obj) { var _obj = JSON.stringify(obj), objClo...
2021-02-08 16:01:11
66
原创 map对象
定义：Map是一组键值对的结构,键可以为数字，数组，对象等，是ES6标准新增的数据类型，优点：具有很快的查询速度，主要用于数据存储创建： var m = new Map([[1, 'zhang'], [2, 'wang'], [3, 'li']]); //参数为二维数组或者一个对象常用方法：keys获取所有的keyvalues获取所有的valueforEach循环map对象set添加一个新建元素到映射。ge...
2021-02-08 15:19:16
563
原创 常用日期方法总结
时间戳转为固定格式 Number.prototype.formatDate = function (bool) { var date = new Date(this.toString().length === 13 ? this : this * 1000) var y = date.getFullYear() var m = date.getMonth() + 1 var d = date.getDate() var h = d..
2021-02-05 10:59:07
194
1
原创 niceScroll 的使用
官方网址【https://nicescroll.areaaperta.com/】 注：效果见官网右侧滚动条jquery.nicescroll文件下载地址引入核心文件，插件需要引入1.5.X以上版本的jquery库<html><head></head><body id="scrollid" style='margin:10px auto; padding-right:12px; overflow:hidden;'><div styl.
2021-01-12 11:46:51
261
原创 简单数组和对象数组的去重及排序
function trimArr(arr) { return Array.from(new Set(arr)); } console.log(trimArr([2, 3, 2, 2, 44]))//[2, 3, 44] function trimObjArr(arr) { var mapObj = new Map() return arr.filter(n => !mapObj.has(n.id) && mapOb...
2020-12-30 20:06:29
133
原创 离线安装sass
1.通过报错查看需要安装的版本2.下载对应的版本https://github.com/sass/node-sass/releases3.离线安装sass ：npm install --sass-binary-path="C:\ folder\win32-x64-57_binding.node"4.如：node_modules\node-sass\vendor\win32-x64-57新建目录并把win32-x64-57_binding.node改名为binding.node离线安装完成..
2020-12-30 19:41:04
473
原创 时间戳转换其他格式
function timestampToTime(timestamp) { var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000 var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; .
2020-12-21 16:03:31
72
原创 元素占满剩余空间
假设元素c(height为百分百或者vh)包含a和b他们垂直排列,b需要占满剩余空间（高度自适应），有三种情况：1.a的高度固定，b占满剩余空间，解决方式设置b的height为calc(100%-a的height)，或者使用position的top和bottom特性或者使用绝对地位和margin特性，建议使用calc计算属性（减号两边要有空格）2.a的高度不固定（a是个集合，里面的子元素高度是要固定的，但是每次多少个子元素不是固定的），b占满剩余空间，用js动态计算：...
2020-12-16 15:49:00
1357
1
原创 文本两端对齐
/*整段文本两端对齐*//*.xx{text-align:justify;text-align-last:left;text-justify:distribute-all-lines;}*//*一行文本两端对齐*//*#dd:after{content:"";display:inline-block;width:100%;}*/...
2020-12-07 10:19:27
137
1
原创 flex布局总结
display:flex 指定HTML元素盒子类型为弹性flex-direction 子元素的排列方向row|columnjustify-content 子元素在主轴方向上的对齐方式center|space-between|space-around|flex-start|flex-endalign-items 子元素在侧轴方向上的对齐方式flex-wrap 是否换行align-content 修改...
2020-12-07 10:17:50
163
1
原创 简单的图片放大插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .zoomin { cursor: poin.
2020-12-03 18:10:33
173
原创 flexible.js例子
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .labc { color: #7C7C7C; font-size: 0.2rem; } .labc h2 .
2020-12-01 17:24:24
336
原创 简单的提示插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script src="ht.
2020-12-01 15:39:49
138
原创 关于new，继承的理解
类和实例是大多数面向对象编程语言的基本概念，js通过原型（prototype）来实现面向对象编程，类指具有相同属性和方法的泛指的一群对象（人类），实例指具有特性的单个个体（小明）通过new（语法糖）类得到实例，实例的原型就是类，实例一定具有类的属性和方法，但类不具有实例特有的属性和方法。之所以使用原型的概念，因为这样可以让多个实例相同的属性方法都指向同一个地址，可以节省内存ES5通过函数（构造函数）创建类，通过prototype给类添加属性和方法，再new构造函数来创建实...
2020-11-27 17:21:17
494
原创 简单的jq插件例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <img src="h.
2020-11-27 11:44:34
144
原创 Promise定义及应用
定义：Promise对象代表了未来将要发生的事件，用来传递异步操作的消息。（用来处理异步事件的对象）为什么要用？可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。使代码更加具有可读性和可维护性，将数据请求与数据处理明确的区分开来,此外，Promise对象提供统一的接口，使得控制异步操作更加容易。Promise对象有以下两个特点:1.Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resol...
2020-11-20 17:23:27
683
原创 关于回调函数
回调函数定义：回调函数作为参数传递给另一个函数，并在父函数完成后执行。第一句的理解：函数名(函数对象)可以把它当成形参传给需要回调函数的函数，加上()之后就会执行此函数。第二句的理解：回调函数在父函数里面当然会在父函数执行完后再执行，这样函数的执行就存在了前后的依赖关系，所以当有些方法执行需要前提条件的时候，这些方法就可以写成回调函数。为什么要用回调函数?因为回调函数是作为形参在父函数上存在的，所以可以通过传不同的实参(不同的函数名)，来实现不同的功...
2020-09-10 10:36:46
308
原创 JavaScript与或运算符 || && 妙用
1.几乎所有语言中||和&&都遵循“短路”原理，如&&中第一个表达式为假就不会去处理第二个表达式，而||正好相反。2.在js逻辑运算中，0、""、null、false、undefined、NaN都会判为false，其他都为true // 例： // aaa为10时，bbb为1； // aaa为20时，bbb为2； // aaa为30时，bbb为3； // aaa为40时，bbb为4； // 其他情况bbb为0。...
2020-09-01 14:39:39
377
原创 在js函数中关于this指向问题及call()、apply()、bind() 的用法
1.在js函数中关于this指向问题 var name = "张三"; var obj = { name: "李四", es5fun: function () { console.log(this); }, es6fun: () => { console.log(this); }, }; obj.es5fun(); //obj .
2020-08-28 17:06:52
217
原创 移动端常用头部标签
<!DOCTYPE html><html><head> <title></title> <!-- 网页格式和内容编码格式 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 删除默认的苹果工具栏和菜单栏。 --> <meta name="apple-mobile-web-app-capab.
2020-08-27 20:08:36
280
原创 测试position和margin的百分比
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } /*测试top百分比*/ .box { backgr.
2020-08-27 20:01:15
280
vue浏览器插件开发工具devtools
2020-07-18
vue浏览器插件开发工具devtools
2020-07-18
element-ui离线文档.zip
2020-07-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人