Missy Peng-CSDN博客

原创自动化导入模块：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 814

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

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

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

2021-09-25 21:39:08 1031

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

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

2021-08-12 21:39:45 4144 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 1005

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

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

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

原创 webpack externals键值研究

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

2021-06-11 17:44:12 274 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 546 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 213

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

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

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

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

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

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

2021-04-11 11:46:12 3904

原创 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 26627 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 786

原创 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 1282 2

原创 box-sizing失效情况

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

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

原创 eslint关闭 nodef 校验

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

2021-03-08 16:20:06 405

原创 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 16435 11

原创 uniapp如何动态绑定事件

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

2021-02-01 09:59:59 2939

原创 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 2173 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 141

转载 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 218

空空如也

空空如也