- 博客(64)
- 收藏
- 关注
RSS订阅
原创 前端获取用户地理定位的几种方式（Geolocation API，微信，腾讯地图）
文章目录前言一、 Geolocation API二、微信 SDK三、高德地图服务四、腾讯地图服务1.引入库2.读入数据总结前言前端在页面上获取用户定位是很常见的场景，尤其是移动端页面。一、 Geolocation API这是HTML5新推出的地理位置API，但从性能和精确度上来，都不理想。尤其PC端精确地非常低且经常获取失败。用者甚少。二、微信 SDK这种适用于在微信H5场景应用（比如公众号H5），只能在微信浏览器内使用微信的SDK。三、高德地图服务四、腾讯地图服务1.引入库代码如下
2021-06-07 10:54:37
14424
9
原创 vue源码学习——响应式数据
系列文章目录vue源码学习——初始化datavue源码学习——响应式数据文章目录系列文章目录前言一、observe()二、Observer类三、Dep类三、Watcher总结前言在《vue源码学习——初始化data》一文中，知道了在new Vue()时做了一系列初始化操作，其中在初始化data数据时，利用observe(data,true)方法，对数据属性进行了观察。下面来具体看下是如何对data进行的观察~一、observe()export function observe (val
2021-02-08 10:25:57
2435
7
原创 vue keep-alive 缓存 不生效解决方案
作用 vue 【缓存】方案，保留组件状态或避免重新渲染，能够缓存当前页面的所有数据用法与**【动态组件】**一起使用：（会缓存不活动的组件实例，而不是销毁它们）<keep-alive> <component :is="view"></component></keep-alive>与**【vue-router】**一起用：<keep-alive> <router-view></router-vi
2020-07-24 13:57:43
25468
31
原创 微信公众号H5页面缓存问题解决方案！
一、 问题背景微信公众号的H5页面，在新版本上线后部分用户无法获取最新的页面文件二、无法获取新版本页面的用户特征在上线前某段时间内，访问过该H5页面，手机本地存有该H5页面的缓存三、解决方案【亲测可行】对于JS和CSS静态文件【取以下两种方案其一即可】（1）在引用时加上动态版本号，例如<script src="index.js?v=2.5.0" />（2）动态命名问题，例如利用webpack等打包工具生成HASH文件名<script src="index.123213
2020-06-14 20:34:31
16456
原创 echarts 绘制多条折线图（横坐标，折线图条数不确定）
项目场景：使用echarts做业务图表统计，记录一下在项目中图表接口返回的数据处理问题需求描述1、一个统计图中实现多条折现图的显示，如下图所示2、后台返回的数据结构let data = [ { rate:"0.1", date:"20210915", expressBrandName:"顺丰速运", expressBrandId:"SF", }, {
2022-04-07 11:25:40
8925
1
原创 源码阅读——validate-npm-package-name
系列文章目录例如：第一章 Python 机器学习入门之pandas的使用文章目录系列文章目录前言一、源码阅读工具二、阅读源码1. 目录结构2.package.json3.index.js三、使用该包1. vue-cli中使用2. create-react-app 中使用总结前言validate-npm-package-name 是一个用于检测npm包是否符合标准的包，被很多脚手架创建工具使用：vue-cli 、create-react-app源码地址：https://github.com/np
2022-03-24 17:32:48
1704
原创 axios源码——工具函数utils.js
文章目录前言一、工具函数所在目录二、判定数据类型的函数1.isArray(判定数组)2.isString(判定字符串)3.isNumber(判定数值)4.isObject(判定对象)5.isPlainObject(判定纯对象)6.isUndefined(判定是否是undefined)7.isFunction(判定是否是Function)8.isDate(判定是否是Date对象)9.isFile(判定是否是File文件对象)10.isBlob(判定是否是Blob对象)11.isBuffer(判定是否是Buff
2022-03-14 14:08:48
3249
原创 前端JS 云打印 LODOP实践
文章目录前言一、Lodop是什么？二、如何使用Lodop1、下载打印插件2、配置打印机3、html中植入打印控件4、调用Lodop对应的JS相关方法接口实现打印功能三、Lodop主要方法接口三、注意点总结前言一般B/S系统总是“页面看到什么才能打印什么”，这种局面即便是采用一些传统打印控件也没有改观。现在利用Lodop简单强大的几个函数，配合JavaScript完全进入了“只看想看的、打印想打的”理想时代！涉及到的PC打印场景：电子面单打印（快递面单）标签打印一、Lodop是什么？.
2022-01-18 11:42:20
1217
原创 前端下载文件
文章目录前言一、a标签 + download属性二、window.open(url, "_blank")三、form表单四、接口请求 + blob + a标签+ download属性总结前言前端业务开发中，经常会遇到下载图片、文件等需求。核心实现下载功能有：<a href="xxx" downlaod="filname"></a>window.open()form表单提交ajax请求接口，处理文件流转为blob格式在实际业务中，根据实际接口和URL具体情况，制定具
2021-12-22 17:25:52
433
原创 vue-cli2 老项目webpack3升级webpack5过程总结
文章目录背景一、webpack5环境要求二、升级步骤1.脚手架webpack-cli2.升级webpack包3.更新webpack相关插件3.1 不推荐或被移除的插件3.2 升级babel到7版本3.3 更新插件4. 修改配置4.1 新增mode选项4.2 CommonsChunkPlugin4.3 module.loaders4.4 node4.5 资源模块4.6 devtool4.7 修改script启动命令总结背景2018年，用vue-cli2创建的webpack3的老项目。此次将项目进行升级配
2021-11-18 18:12:41
5670
1
原创 vue3 使用 swiper轮播库
文章目录前言一、Swiper引入方式1、HTML标签引入方式2、CommonJs引入方式3、ES引入方式（采用）二、使用Swiper总结前言轮播图在前端开发中，是常见需求。而Swiper库是最受前端开发者欢迎的轮播库~Swiper在vue2中可以通过npm install swiper vue-awesome-swiper --save安装使用据目前为止， vue-awesome-swiper 库是不支持vue3的。那在实践中如何在vue3中使用Swiper？一、Swiper引入方式官方
2021-11-04 15:57:35
3822
4
原创 vue 项目中引入字体文件的正确方式~
文章目录前言一、开发中需要什么样的字体1. 字体图标2. 特殊字体二、项目中引入字体文件1. 字体文件2. css文件3. 项目使用该字体总结前言在UI设计稿中，可能会有一些特殊字体，或者是一些字体图标。对于特殊字体，大多数用户本地电脑是没有安装该字体的字体包的。为了能够让漂亮特殊的字体能展示在用户PC电脑上，我们通常需要把【字体包文件】植入项目中。它们通常是这样的格式文件：.otf | .woff | .ttf | 格式文件。一、开发中需要什么样的字体1. 字体图标推荐一个比较大而全的字体
2021-10-21 11:05:01
5185
原创 JS基础 ——解释执行
文章目录前言一、词法分析二、预编译创建全局作用域GO对象创建局部作用域AO对象三、代码执行总结前言大家都知道，JS是一种不需要编译的解释型语言。但其实在浏览器执行JS代码前，也有一个词法分析和预编译过程，为后续代码执行做准备。一、词法分析将代码字符串，根据一定的规则，识别出一个个的单词。最终能通过这一过程， 检查出语法错误。二、预编译预编译发生在代码执行的前一刻，主要是开辟内存空间，存储变量函数等。创建全局作用域GO对象寻找声明【变量】作为属性名，值为undefined，寻找声明
2021-09-18 17:47:16
291
原创 vue3源码分析（二）—— 初始化流程
系列文章目录目录分析响应式系统shared工具函数初始化流程文章目录系列文章目录前言一、createApp在项目中的使用二、createApp源码追溯1.创建app实例1.1 ensureRenderer看看rendererOptions具体传入的什么？看看createRenderer前言vue3项目，需要通过createApp()函数创建一个vue实例，本文将从该方法入口分析~一、createApp在项目中的使用在vue3中，每个 Vue 应用都是通过用 createApp 函
2021-09-13 10:30:43
537
原创 vue3源码分析（四）—— shared工具函数
系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例
2021-09-08 17:12:12
3262
原创 vue3源码分析（三）—— 响应式系统（reactivity）
系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用文章目录系列文章目录前言一、reactivity模块有哪些API二、reactive模块1. 核心方法 - reactive(target: object)2.创建响应式对象 - createReactiveObject3.baseHandlers（Object Array）3.1 get 做了什么？3.1.1 思考：为什么用 Reflect.get，而不是直接 t
2021-09-08 10:48:04
474
原创 解决 vscode中js变量 文件不能自动跳转问题~
项目场景：在项目开发中，为了便于理解js代码逻辑和调试，通常会使用快捷键自动定位到变量原始定义的文件位置。mac中快捷键：command+鼠标点击。但在vue项目开发中，发现这一效果失灵了！！！问题描述：代码示例：import ajax from '@/common/js/ajax'; -- 第一行 引入对象ajax.....ajax.postFormData()...; --- 第N行 使用对象ajax想看看ajax.postFormData方法是如何自定义的，期望直接跳转
2021-08-25 12:02:36
6486
4
原创 基于vue-cli3构建自己的UI库
文章目录前言一、创建项目二、编写组件1.button组件2.引入字体图标icon文件3.引入Button组件看效果三、修改目录结构1. packages文件夹2. 打包修改2. demo展示四、将UI库部署到npm上五、项目使用自己的UI库总结前言github：https://github.com/Dream-wu/mj-ui知识基础：vue基础语法、过渡与动画处理组件思想vue-cli项目结构npm发布流程一、创建项目# CLI (@vue/cli) 是一个全局安装的 npm
2021-07-19 09:29:38
553
原创 H5 软键盘自动搜索功能
业务场景：通常APP中的顶部搜索栏，都配一个搜索按钮。同时输入文字软键盘弹起，回车键自动变成搜索键，点击软键盘中的搜索能进行搜索功能，如下图taobao所示：思考软键盘的回车键，如何变成了【搜索】文字?点击【软键盘】的【搜索】，如何发起的搜索功能？ 实现1、输入框元素+绑定keyup方法input【type=“search” 】, 在移动端会唤出“搜索”按键<input type="search" v-model.trim="title" @keyup="handle
2021-06-28 17:06:43
1197
原创 我理解的“大前端”
前言随着业务场景越来越复杂，前端技术也越来越丰富，这几年也迎来爆发期，【大前端】的概念逐渐涌现。本图根据本人理解整理，如有不足，欢迎指正，感谢~一、【终端】PC端PC端浏览器网页桌面端electron（chrome v8引擎+web技术）移动端主要是和APP原生的混合开发二、【业务场景】前台面向用户中后台管理系统、配置平台CRM系统等三、【技术】网页技术前端工程化中间件服务后台服务欢迎大家指正和补充~...
2021-06-02 13:57:33
252
原创 mac bash_profile报错导致所有命令失效解决办法
项目场景：搭建flutter环境时，在mac下需要配置环境变量。问题描述：配置环境变量，需要修改~/.bash_profile文件，修改文件保存退出后。发现文件有报错，导致所有命令不能使用解决方案：在终端中输入以下命令export PATH=/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11R6/bin【临时】的在此终端下【重置】环境变量不要关闭终端在终端中，打开.bash_profile文件open .bash_proflie修改且保存让
2021-06-01 14:07:42
1522
1
原创 一行代码实现数组中数据频次值
问题：一行代码实现统计数组中每个name出现的次数。数组示例如下：期望结果：{'哈哈':2, '哈哈1': 1,'哈哈2':2 }var arr = [{ name: '哈哈' },{ name: '哈哈1' },{ name: '哈哈' },{ name: '哈哈2' },{ name: '哈哈2'}]分析：提到统计频次，又要遍历数组，想到了reduce（时常用累加器）一行代码实现，想到了箭头函数具体实现：arr.reduce
2021-05-20 09:58:58
189
原创 防抖和节流在vue中的具体使用
前言防抖和节流属于性能优化的知识。它们都是基于短时间内高频的操作场景，例如输入，点击，滚动等，下面介绍下结合vue组件的具体使用一、防抖对于短时间内连续触发的事件，防抖就是不立即执行事件，给出一个时间期限（如1000毫秒），若在时间期限内再次触发，取消之前时间计时，重新开始计时；若无再次触发，则在时间期限到后执行。最终效果：如果短时间内高频触发同一事件，只会执行一次函数。示例：点击按钮的防抖<template> <button @click="clickme">点
2021-05-18 09:53:45
757
原创 vue3源码分析（一）—— 项目架构目录
文章目录前言源码目录前言Vue.js 3.0 (以下简称Vue3)，正式发布在 2020 年 09 月 18 日相关资料：vue3源码地址：https://github.com/vuejs/vue-nextvue3迁移指南：https://v3.cn.vuejs.org/guide/migration/introduction.htmlvue3官方文档：https://v3.cn.vuejs.org/guide/introduction.htmlvue3在线编译调试：http://vue
2021-05-11 11:22:00
5137
1
原创 vue源码学习——组件缓存keep-alive
系列文章目录vue源码学习——初始化datavue源码学习——响应式数据文章目录系列文章目录前言一、源码位置二、源码分析1.几个重要参数2.创建与销毁3、渲染3.1主要做了什么3.2 LRU（Least Recently Used ）附完整源码前言在《vue keep-alive 缓存 不生效解决方案》已经介绍了vue keep-alive的使用经验，这节主要介绍源码实现部分一、源码位置src/core/components/keep-alive.js二、源码分析1.几个重要参数
2021-05-08 16:49:37
555
2
原创 Vue 警告There are multiple modules with names that only differ in casing 文件路径大小写错误
问题描述：vue运行项目时，报一下错误：There are multiple modules with names that only differ in casing.This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.Use equal casing. Compare these module identifiers: 原因分析：根据以上提示，问题在于
2021-04-21 14:06:37
316
原创 vue2 vue3区别对比
Vue3在2020年正式推出，在源码和API都有显著变化。最近初步整理了一下vue2和vue3版本的区别：欢迎各位同行留言补充~
2021-04-14 17:21:45
836
原创 前端面试题目——JS
系列文章目录HTML篇CSS篇JS篇VUE篇webpack篇文章目录系列文章目录前言一、基础知识二、ES6+三、其他前言汇总常见面试题一、基础知识多维数组扁平化处理ajax 和 fetch区别取得URL后面query的参数值new 的实现原理，若构造函数中有返回值怎么办bind实现(用到了闭包)Math.prototype.max(arr)为啥必须有prototypethis指向方面，demo题 。this指向的几种情况eventloop、宏任务、微任务
2021-03-14 19:35:27
280
原创 webpack基础搭建
系列文章目录webpack 基础搭建文章目录系列文章目录前言一、创建项目二、安装基本依赖包1、webpack三大件2、处理JS的三大件3、处理CSS4、处理HTML三、配置四、配置命令五、启动项目总结前言从头搭建一个webpack项目，一定要有清晰的思路去做这件事情。虽然配置众多，只要掌握好思路就会从容不迫。一、创建项目新建目录mkdir webpack-project创建package.jsoncd webpack-projectnpm init 二、安装基本依赖包1
2021-03-08 20:21:13
125
1
原创 谈谈前端模块化的发展
文章目录前言一、前端模块化是什么？二、前端模块化要解决什么问题？1.引入库2.读入数据三、前端模块化的发展总结前言前端模块化发展了10余年左右，前前后后出现了commonJS,AMD,CMD等多种模块化标准方案，目前最新的是ES module。下面大概讲述一下这十年左右的发展历程~一、前端模块化是什么？示例：p
2021-03-08 09:41:55
325
4
原创 vue源码学习——模板编译
系列文章目录vue源码学习——初始化datavue源码学习——响应式数据文章目录系列文章目录前言一、Vue的模板语法二、Vue的$mount三、compiler主要文件四、compile过程1、parse2、optimize3、generate总结前言在vue中，我们一直使用的是template模板，而不是真正的html，所以我们才能在template模板中使用各种指令v-if，{{}}表达式等。但最终template需要经过编译过程，转化为真正的html语言，才能渲染成我们的页面~一、
2021-02-19 09:28:26
214
原创 vue源码学习——初始化data
系列文章目录vue源码学习——初始化data文章目录系列文章目录前言一、Vue的初始化二、initData总结前言在创建vue实例时，我们传入了option参数，包含data,methods,props等，今天我们来看下如何初始化data，为学习vue数据驱动做铺垫（v2.6.0）。一、Vue的初始化src/core/instance/index.js中：function Vue (options) { if (process.env.NODE_ENV !== 'productio
2021-02-05 11:23:18
1159
原创 vue-router源码解析（三） —— History
系列文章目录1、vue-router源码解析（一）2、vue-router源码解析（二） —— install3、vue-router源码解析（三） —— History文章目录系列文章目录前言一、index.js中的History初始化二、History目录1、base.js2、hash.js3、html5.js4、abstract.js总结前言上一篇简单介绍了下vue-router的挂载过程，本篇详细解析下VueRoute的三种路由模式~一、index.js中的History初
2021-01-19 17:56:15
735
原创 vue-router源码解析（二） —— install
系列文章目录1、vue-router源码解析（一）2、vue-router源码解析（二） —— install文章目录系列文章目录前言一、index.js中的install二、install.js总结前言上一篇简单介绍了下vue-router的源码大体思路框架，本篇详细解析下VueRouter是如何安装挂载的~一、index.js中的installVueRouter 对象是在 src/index.js 中暴露出来的，它有一个静态的 install 方法：// index.js//
2021-01-18 15:09:34
506
原创 vue-router源码解析（一）
系列文章目录1、vue-router源码解析（一）文章目录系列文章目录前言一、vue-router的常用方法二、源码src目录三、源码思维导图总结前言vue-router是Vue.js 官方的路由管理器。一、vue-router的常用方法// 1、引入vue-routerimport Router from 'vue-router'// 2、通过全局方法 Vue.use() 使用插件Vue.use(Router)// 3、创建router对象const createRou
2021-01-15 14:32:11
564
原创 css新一代特性
前言：sass和Less等css预处理器，已经被前端工程师们应用了好多年了，其中很多变量、函数、嵌套等规则让我们写起css来非常高效。在新一代的css规范中，也慢慢加入了一些新特性，支持css的动态编写等。虽然目前浏览器支持度不是很好，但一定是未来的趋势~文章目录前言：一、css新特性1、支持变量var()2、自定义属性集3、计算属性方法calc()4、语义化的媒体查询@custom-media5、嵌套写法&6、 image-set() 函数7、color() 函数二、在vue-cli4中使用
2021-01-08 16:53:41
224
原创 移动端H5页面调试利器vconsole
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、vconsole是什么？二、主要功能三、引入方式1.cdn引入2.npm包引入总结前言PC页面，我们可通过F12打开控制台，查看日志信息，便于测试调试。但放到移动端中，移动端是没有控制台的，我们就无法查看页面的console信息，非常不便。但vconsole插件解决了此问题~一、vconsole是什么？一个轻量、可拓展、针对手机网页的前端开发者调试面板。源码链接：https://github.com/Ten
2020-12-29 09:56:55
1745
原创 移动端H5常见问题
1、click事件，a href无效在APP中无效：场景：H5中绑定了click事件进行页面跳转，微信浏览器，手机内置浏览器测试没问题。内嵌到某APP中，点击事件无效，通过a标签href跳转也无效（IOS无效，安卓有效）解决方法：将click事件换成touchend事件进行跳转页面。2、swipe组件，上滑翻页，在移动端真机环境中有闪白屏情况场景：做一个活动H5页面，有上滑翻页效果。用到了swipe组件，在微信开发者平台中测试没问题。到真机上，一滑屏翻到下一页，就有闪屏效果，出现频率很高。解决方
2020-12-28 14:30:34
996
1
原创 移动端H5开发基础
文章目录前言一、移动端屏幕相关概念1. 屏幕尺寸2. 屏幕分辨率3. 屏幕像素密度（ppi = pixels per inch）二、像素1. 物理像素2. CSS像素3. 设备独立像素4. 位图像素5. 像素比 （dpr）三、视口1. 布局视口2. 视觉视口3. 理想视口三、缩放行为1. 用户缩放2. 系统总结前言随着移动端H5需求场景越来越多，例如微信公众号中H5页面的开发，APP中内嵌H5页面等，移动端H5开发基础知识和技巧是前端开发工程师必备的技能~一、移动端屏幕相关概念1. 屏幕尺寸.
2020-12-25 16:03:58
6228
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人