自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(92)
  • 收藏
  • 关注

原创 自动化导入模块:require.context

在日常引入组件,模块的时候,其实目录格式都差不多,能不能一键引入所有呢?require.context 可以帮助我们实现这个功能。需要 webpack (或在内部使用了 webpack 的 Vue CLI 3+)传统引入,如果文件有很多,就会很麻烦,而且后期每加一个文件,需要再导入一次import moduleA from './modules/moduleA.vue'import moduleB from './modules/moduleB.vue'import moduleC from './

2021-11-06 17:10:31 894

原创 JS 数据类型判定 typeof原理 instanceof原理

typeoftypeof 一般被用于判断一个变量的类型,我们可以利用 typeof 来判断number, string, object, boolean, function, undefined, symbol 这七种类型,这种判断能帮助我们搞定一些问题;但是,很遗憾的一点是,typeof 在判断一个 object的数据的时候只能告诉我们这个数据是 object, 而不能细致的具体到是哪一种 object。原理其实,js 在底层存储变量的时候,会在变量的机器码的低位1-3位存储其类型信息????0

2021-11-02 10:18:59 692

原创 Vue2响应式原理解析和实现

核心原理Vue通过 Object.defineProperty 的 getter/setter 对收集的依赖项进行监听,在属性被访问和修改时通知变化,进而更新视图数据。监听器 Observer ,用来劫持并监听所有属性,如果属性发生变化,就通知订阅者;订阅器 Dep,用来收集订阅者,对监听器 Observer 和 订阅者 Watcher 进行统一管理;订阅者 Watcher,可以收到属性的变化通知并执行相应的方法,从而更新视图;Object.definePropertyObject.def

2021-09-25 21:39:08 1121

原创 高德WMTS图层 调用天地图瓦片地图

项目需要展示海外地点标注(且卫星图与标准矢量地图切换),但是高德地图不显示海外地点数据,查了高德的海外LBS服务,是收费的,而且还处于试运行状态,遇到问题还得提工单,比较麻烦。后来查了查资料,发现天地图可以满足需求,而且天地图提供给WMTS服务,高德有个TileLayer类可以直接调用WTMS服务。所以便采用使用高德进行点标注等功能,调用天地图的图层方案,完成项目。实现// 天地图的访问keyconst key = "yourkey";// 初始化layerthis.staelliteLayer

2021-08-12 21:39:45 4428 4

原创 vue-amap、兼容高德原生sdk 实现多个点标记、自定义信息窗体

vue-amap与高德原生sdk一起使用时,需要在index.html里面引入原生sdk<html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"&gt

2021-08-12 20:52:53 1065

原创 JS this指向以及call、apply、bind

this值为当前执行上下文(global、functio或eval)的一个属性,在非严格模式下,总是指向一个对象,在严格模式下可以是任意值。描述全局上下文无论是否在严格模式下,在全局执行环境中(在任何函数体外部)this 都指向全局对象。// 在浏览器中, window 对象同时也是全局对象:console.log(this === window); // truea = 37;console.log(window.a); // 37this.b = "MDN";console.lo

2021-07-31 22:07:29 214

原创 JS 原型与原型链

原型、原型链为什么需要原型原型链?function Person(name, age) { this.name = name; this.age = age; this.eat = function() { console.log(age + "岁的" + name + "在吃饭。"); }}let p1 = new Person("xiaohong", 24);let p2 = new Person("xiaohong", 24);console.log(p1.ea

2021-07-25 11:09:08 190

原创 H5端 调起WhatsApp选择联系人以及给固定联系人进行内容分享

封装了一个工具类,如果传入参数phone,则发给指定联系人,不传入phone,则到WhatsApp应用中选择联系人进行分享util.js/** * 调起第三方 whatsApp 应用进行内容分享 * 如果传入参数phone,则发给指定人,如果不传入参数,则可以选择联系人进行分享 * @param {Object} phone */export function share(phone) { const curHref = window.location.href; // content是自

2021-06-27 11:37:49 3818

原创 webpack externals键值研究

做性能优化缩小打包体积时,利用externals+cdn方案,防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖。能够了解externals的键为依赖的包名但对于这个externals的值就有点迷了,官方文档上给的解释是酱紫的:关键的一句话是:为了替换jquery模块,jQuery的值将被用来检索一个全局的jQuery变量对于这句话我的理解是:import $ from 'jquery'中,原始没配置过externa

2021-06-11 17:44:12 338 1

原创 vue-cli3.x 配置打包可视化插件webpack-bundle-analyzer

介绍最近学习webpack的时候发现了一个好用的插件——webpack-bundle-analyzer,这个插件可以在代码运行或者打包的时候,清晰的用图展示出打包情况:bundle 的具体打包了什么展示包以及文件的打包前、后、Gzip体积找到哪些模块导致了bundle的体积过大(包的体积越大占据图示方块的面积越大)进行优化配置安装:# NPMnpm install --save-dev webpack-bundle-analyzer# Yarnyarn add -D webpac

2021-06-11 16:51:21 621 1

原创 call apply bind 用法与区别

用法call执行 call 方法时:1.首先把要操作的函数中的this关键字变为call方法第一个传递的实参2.把call方法第二个及之后的实参获取到3.把要操作的函数执行,并且把第二个以后传递进来的实参传递给函数fn.call(obj, param1, param2, ...)关于传参function func (a,b,c) {}func.call(obj, 1,2,3)// func 接收到的参数实际上是 1,2,3func.call(obj, [1,2,3])// fu

2021-06-07 09:19:35 287

原创 js 导出json文件

function saveJSON(data, filename){ if(!data) { alert('保存的数据为空'); return; } if(!filename) filename = 'json.json' if(typeof data === 'object'){ data = JSON.stringify(data, undefined, 4) } var blob = new Blob([data], {type: 'text/json'}), e =

2021-05-23 10:57:52 1439

原创 for、foreach、for in、for of 的区别

forjavascript 中的 for 循环,用来遍历数组foreachforeach 循环可以直接取到元素,同时也可以取到 index 值。但是 foreach 的局限是,不能 continue 跳过或者 break 终止循环。let arr = [1,2,3,4];arr.forEach(function (item, index, arr) { // item是当前元素,index是当前索引值,arr是当前元素所属的数组对象 console.log("当前元素: " + item

2021-05-16 11:36:46 2592

原创 uniapp 动态获取节点信息

使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。自定义组件编译模式(默认模式),需要使用到 selectorQuery.in 方法。const query = uni.createSelectorQuery().in(_this).select('#test');query.boundingClientRect(data => { subBtnHeight = data.height;}).exec();...

2021-04-18 08:14:50 1112

原创 js 合并两个数组

在原先的内存基础上进行合并// 方法一:for循环(代码不优美)var a = [1,2,3];var b = [4,5,6];for(var i in b){ a.push(b[i]);}console.log(a); // [1,2,3,4,5,6]// 方法二:扩展运算符(推荐)var a = [1,2,3];var b = [4,5,6];a.push(...b);console.log(a); // [1,2,3,4,5,6]// 方法三:applyvar a.

2021-04-11 11:49:28 538

原创 uniapp 页面通讯 uni.$on执行多次

解决办法就是在beforeDestroy或destroy周期中将事件进行销毁created() { uni.$on('getApprover', (res)=>{ console.log(res); });},beforeDestroy () { uni.$off('getApprover');}

2021-04-11 11:46:12 4315

原创 js promise resolve()的用法

Promise 对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成 ,又称 Fulfilled)和 Rejected(已失败)。通过回调里的resolve(data)将这个promise标记为resolved,然后进行下一步then((data)=>{//do something}),resolve里的参数就是你要传入then的数据执行到 resolve()这个方法的时候,就改变promise的状态为fullfiled ,当状态为 fuulfiled的时候就

2021-04-05 16:53:33 27591 3

原创 Js 三种绑定事件方式 及 区别

三种事件绑定方式DOM里直接绑定事件<button id="btn" onclick="submit()">提交</button><script> function submit() { console.log('DOM click......'); };</script>js代码里获取DOM元素进行事件绑定<button id="btn">提交</button><script&gt

2021-03-27 14:42:48 857

原创 vue、uniapp 动态创建input进行文件上传

占位 <view ref="input" class="input"></view> mouted里创建input// 创建inputmounted() { input = document.createElement('input'); input.type = 'file'; input.onchange = this.inputUpload; this.$refs.input.$el.appendChild(input); },文件上传//.

2021-03-21 11:00:29 1446 2

原创 box-sizing失效情况

box-sizing: content-box;//宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。box-sizing: border-box;// 为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。分析;如果目标元素的高度(或宽度)只由其内容、padding、border确定的情况下,则会存在失效情况。解决方法:对目标元素设置固.

2021-03-14 10:59:37 7347 2

原创 eslint关闭 nodef 校验

方法一:eslint添加globals全局变量globals: { // 设置jquery为全局 "$": true},rules: { ...}globals里面的变量被eslint识别为全局变量,就不会报nodef错误方法二:直接关闭eslintnodef校验"no-undef": 0...

2021-03-08 16:20:06 463

原创 VScode+ESlint 自动格式化代码(2021)

本文用 Vue 项目做示范,基于项目已有eslint环境。利用 Vue CLI 创建项目时要将 ESlint 选上,下载完依赖后,用 VSCode 打开项目。1、安装插件 ESLint,2、配置eslint插件File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json将以下选项添加到配置文件 //配置eslint "eslint.val

2021-02-21 12:15:52 16698 11

原创 uniapp如何动态绑定事件

需求:展示列表与内容详情使用的是同一个组件,想要实现列表里长按删除,而内容详情里不可以长按删除。由于统一绑定了@longpress事件,所以想实现:isforbid为true的时候解绑@longpress事件,isforbid为false时绑定@longpress事件这种效果。经过一波分析和搜索,没有找到合适的解决方案,uniapp官方好像就没有提供这种动态绑定与解绑的解决方案,最后采用了“曲线救国”的方式,实现了这种效果。解决思路统一绑定@longpress事件isforbid为true时,

2021-02-01 09:59:59 3092

原创 java setter 的链式调用

方法一:setter 返回当前POJO 类型,而不是 void,然后将 this 返回public Student setName(String name) { this.name = name; return this;}public Student setAge(Integer age) { this.age = age; return this;}public Student setScore(Integer score) { this.scor

2020-12-27 10:33:51 2259 1

原创 export default 与 export 区别

在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,使用的时候可以在其它文件或模块中通过import (常量 | 函数 | 文件 | 模块)名的方式,将其导入,进行使用。区别:在一个文件或模块中,export、import可以有多个,export default仅有一个export default后面不能跟const或let的关键词具体使用:(1)demo1.jsexport const str = 'hello world'

2020-12-13 11:49:25 160

转载 em与rem的区别与使用

一:区别(1)em:em是一种相对长度单位,相对于自身元素的字号大小,如果没有设置即参照父容器的字号大小或浏览器默认字号大小。举例:如一个div#box的宽度设置为#box { width: 10em },其字号大小#box { font-size: 14px },则此div的宽度为140px。(2)rem: rem是css3的新标准也是一种相对长度单位,其相对于HTML根标签的字号大小。举例: 如有css: html { font-size: 14px},此根标签内有元素div#box的宽度为:#

2020-12-13 11:29:11 272

原创 js中map与foreach的区别

2020-12-06 14:00:51 237

原创 eladmin前端 学习笔记

后台管理系统前端项目简介用户账号密码管理员: admin测试用户: test密码: 123456运行:# 配置镜像加速https://www.ydyno.com/archives/1219.html# 安装依赖npm install# 启动服务 localhost:8013npm run dev# 构建生产环境npm run build:prod技术栈Vuevue-routeraxioselement ui项目结构|-- public 存放静态资源,

2020-11-29 09:43:09 2578 3

转载 浅谈vue中index.html、main.js、App.vue、index.js之前的关系以及加载过程

简介项目部署完成后的项目结构以及解释如下图所示项目运行项目的运行入口index.html为什么index.html是项目的入口以及为什么index.html加载后会继续加载main.js、App.vue、index.js,以及他们之间的关系是如何联系起来的呢,这块的配置文件位于build文件夹下,包括webpack.dev.conf.js等,感兴趣的可以了解下。通过项目的配置文件,可以加载运行我们的index.html文件以及自动关联vue相关的模块。首先我们来看一下index.html中的内容

2020-11-23 11:24:16 536

原创 力扣打卡:有效的字母异同位

题目描述给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词。示例 1:输入: s = "anagram", t = "nagaram"输出: true示例 2:输入: s = "rat", t = "car"输出: false说明:你可以假设字符串只包含小写字母。解题思路方法一:集合存储(不推荐)自己写的菜菜的方法,因为有较多集合移除操作,所以执行时间较慢首先判断两个字符串长度是否相等,不相等则直接返回 false若不相等,先遍历存储s里的字符

2020-11-22 11:05:37 143

原创 力扣 反转链表II

反转从位置 m 到 n 的链表。请使用一趟扫描完成反转。说明:1 ≤ m ≤ n ≤ 链表长度。示例:输入: 1->2->3->4->5->NULL, m = 2, n = 4输出: 1->4->3->2->5->NULL解答/** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode nex

2020-11-15 14:24:27 173

原创 前端性能优化之vue-cli3 开启gizp压缩及nginx配置

需求项目build后的文件过大,导致网站加载时间过长,所以需要尽量压缩文件的大小,之前的文章介绍过cdn加速方法进行优化(vue cdn加速 解决vendor.js文件过大),这次在介绍一个更加厉害的优化方法——gzip,可以在原先的基础上,再压缩50%以上gzip压缩原理一般浏览器都已支持.gz的资源文件,在http请求的Request Headers中能看到 Accept-Encoding:gzip客户端http请求头声明浏览器支持的压缩方式,服务端配置启用压缩,压缩的文件类型,压缩方式。当客

2020-10-30 17:46:45 750

原创 百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法

百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件。ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的,我们需要能够上传自制的MP3音频格式的文件。那么如何实现呐,下面介绍一种方法:分析其实ueditor的视频上传功能是可以上传音频文件的,只是在加入到编辑器里面的时候,html结构不正确而已。所以,我们可以根据这个思路去找解决的方法。效果图先po一下效果图实现第一步:选择配置文件在页面加载.

2020-10-23 11:34:26 2998 2

原创 Vue 子组件修改父组件值的解决方法

分析vue中父组件向子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样可以防止子组件意外改变父组件的值,怕子组件污染父组件,造成不可控; 此外,每次父组件的数据发生更新时,子组件的值都会更新到最新的数据,但不能直接在子组件内部改变prop(父组件传过来的值),否则浏览器就会发出警告但我们可能会遇到,需要在子组件修改父组件值的需求,这里介绍三种方法实现:实现方法一:通过$emit派发一个自定义事件,父组件收到后,由父组件进行修改子组件:接受父组件传来的cateId值,但是子组件

2020-10-21 22:51:30 11184

原创 Element-ui Radio单选框中label绑定数据类型问题

:label绑定的是Boolean布尔类型或Integer整型数值label绑定的是String字符串类型例如:用 lable绑定的是字符串类型 <el-radio-group v-model="form.type"> <el-radio label="1">学习体会</el-radio> <el-radio label="2">学习任务</el-radio></el-radio-group>用 :la.

2020-10-19 17:41:56 7651

原创 蓝桥杯常用知识点总结

字符串 //字符串转为char String str = "abc"; char[] strArr = str.toCharArray(); //char转换为字符串 str = String.valueOf(strArr); //将char类型转换为int类型 int c = str.charAt(0) - '0'; //字符串截取方法,str.substring(a,b),截取从位置a到位置b的字符串,左闭右开[a,b) String substring

2020-10-16 22:33:32 1930

原创 leetcode:特定深度节点链表(层次遍历)

题目描述给定一棵二叉树,设计一个算法,创建含有某一深度上所有节点的链表(比如,若一棵树的深度为 D,则会创建出 D 个链表)。返回一个包含所有深度的链表的数组。代码实现/** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; * TreeNode right; * TreeNode(int x) { val = x; } *

2020-10-10 22:35:41 254

原创 element-ui 表格中带有按钮的loading详细解决方案

最近写项目遇到一个问题就是表格里的按钮加载状态设置,就是表格里的按钮在进行操作时,显示相应的加载状态,操作完成后,恢复正常状态。解决思路在找到解决方案前,还进行了其它方案尝试:方案一:data中设置一个对象,里面放很多个btnloading{ btnLoading1: false, btnLoading2: false,... }缺点:不知道会列表里会有多少条数据(鸡肋,不建议采用,本篇文章不再介绍)方案二:按钮直接设置 v-loading="scope.row.MarkUpPirceLoad

2020-09-19 16:01:32 12620 1

原创 Vue集成UEditor(vue-ueditor-wrap)

第一步:下载依赖npm i vue-ueditor-wrap -S第二步:下载ueditor并将其复制到public目录下Ueditor下载下载完成后会发现怎么需要根据官网的Readme.md文档,进行相应操作执行完上述步骤后,项目下会产生一个dist文件把utf8-php文件下的所有文件复制到自己的项目的publc目录下的ueditor目录下第三步:引入到项目中import VueUeditorWrap from 'vue-ueditor-wrap'第四步:在模板中使用组件

2020-09-12 11:19:11 3215

原创 Vue项目部署到nginx

1、Vue打包执行npm run build打包项目,可看到一个dist文件夹2、安装nginx请参考:docker安装与运行nginx(挂载目录)3、将dist目录下的文件传输到/test/nginx/www/目录下这里使用的是filella软件进行本地传输到服务器现在进入到/test/nginx/www目录下即可看到dist目录(存放vue项目打包文件)4、配置本项目的配置文件进入到/test/nginx/conf.d目录下,创建本项目的配置文件,并进行配置server

2020-08-24 15:20:20 615

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除