- 博客(62)
- 收藏
- 关注
RSS订阅
原创 浅谈Vue3 computed计算属性
官方给出的解释：接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象// 只读 function computed < T >(getter :() => T , debuggerOptions?
2023-07-31 14:21:04
329
原创 通俗易懂篇---JavaScript 中 map、foreach、reduce 间的区别？
foreach 作为一个无返回值的遍历而言应用的场景很普遍假设有一个工具箱，foreach完成的就是告诉工具箱的每个工具需要干什么 tool.forEach( (todo) => { todu.pickUpSoap(); //具体的工作 });map 遍历构成返回一个新的数组通俗的来说就是你有一个新的容器， 然后将你原有篮子里的苹果（假设苹果对应的有每个人的名字，编号）一个个都按顺序丢进去。结束的时候你回得到一个完整的按顺序排列的新容器（里面是所有丢进去的苹果）let box
2022-02-23 10:30:12
746
原创 Promise.resolve() 和Promise.reject() 使用及其覆盖场景
要想了解这些首先我们先要明确一点 什么是 Promise官方的解释：Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。深层的描述可以解释成 *一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。供其使用的方法也有很多例如P
2022-02-22 11:33:28
8920
原创 MineMap动态路线规划方案(自定义途径点，可删除，可拖动)
使用场景：同百度，高德路线规划一样，该方案支持对途径点的动态拖动，增加，删除，路线动态变更1.整合方案原理：1.使用路径规划服务作为路线绘制基础2.可拖动marker及Popup结合作为标记点使用3.动态构建的路线，途径点4.支持获取link级别数据，支持增加多种模式路线规划选择2.使用方式 /** * @Description:线指示器 * @Author: ShiWei * @Date: 2021-08-19 */ /** *初始化地图编辑 .
2021-09-14 15:50:18
1457
1
原创 js树形数据处理--树形数据转换，获取指定类型节点下的所有子节点或指定类型下的所有父节点
常用的UI组件为我们提供了很便捷的树形展示和操作方案，例如ant,element,Iview等Tree组件；以此为基础，无历是友好的java同学直接给你treeList 还是评级结构下的前端组装数据的处理仍需要使用者自己来动手为了事半功倍工具函数是不可少的1.树形数据组装： /** * @Description:sourceData数据源 * @Author: ShiWei * @Date: 2020-11-04 */export const cre
2020-11-04 16:14:39
2401
原创 前端-传参安全处理window.btoa base64加密，线性对称加密
前端参数传输安全的必要性我们在任何场合都不应该直接或间接的暴露用户信息，或核心参数指标在浏览器上即是做不到无法查看也应做基本的加密处理放置恶意攻击或信息泄露那么如何保证自己前端简单又便捷的生成加密参数呢1.我们可以使用window.btoa（） window对象自带的一个base64加密规则实现 前提参数需要时独立的string。 解密方式 是将加密后的文本使用window.atob(Str) 注意Str: 必需是一个通过 btoa() 方法编码的字符串。代码中我们可以这样使用 /*
2020-10-28 17:08:47
2713
1
原创 轨迹回放与echarts图表响应变化（基于mapbox/mineMap）此方式适用于目前绝大部分地图服务
一：需求分析1.场景：多数道路车辆信息都会设计到历史轨迹回放，包含当前车辆信息，道路信息，已经随之变化的响应数据变更，常采用图表形式展现2：效果展示静态：二 核心分析轨迹 要素：点[经纬度]，车头的方向（保证车的反向是当前的行进方向），速度(车的行驶速度)2.图表联动时数据的传输：当前点位与之对应的变化图表的数据应该时同步的三 解决方案1.了解可以实时播放的数据处理方式：1-1:后端提供接口，按照约定的时间间隔实时获取1-2：前端一次获取，使用定时器触发利弊分析：后端实时获取可以省去
2020-05-14 18:25:00
2166
7
原创 vue3 setup函数与setup语法糖之间的区别
重新刷新后我们发现此时组件2中的count也已经可以直接查看到。通过上述一系列的演示体现出了无论时从代码面上，还是底层编译上亦或者是内部使用过程中都存在一定的差异性。所谓的互相转换也并不是A==B的逻辑。1.我们在Base页面分别引入了两个组件，并定义了他们各自的ref。当我们使用setup语法糖开发时常常也会使用到一个跟他相关的宏，这个插件可以帮助我们在业务编写过程中实时查看我们的编译源码。例如我们需要在业务子组件中暴露子组件的一些数据，方法。编译完的结果也加上了这个指定暴露的内容。
2024-03-06 17:20:29
968
原创 前端开发中，并发请求工具的实现＜多文件上传，数据切片＞
这里我们假设需要做一个多文件上传，支持进度等业务处理。并发的过程中要求，单次并发完成后统一返回该轮次结果。返回结果的数据顺序应该与并发开启的数据获取顺序相同。即【1，2，3】===> resolve(1,2,3)2.> 多数据源的无参静态数据分片获取，如地图业务中海量静态点位的获取分片方式的实现。1.> 多文件上传，支持过程中的进度展示，暂停，删除业务。可以看到，传入的并发是4个，最大上限是3。2.针对业务定义需要处理的过程函数。
2024-03-05 10:37:49
408
原创 vue跨标签页通信（BroadcastChannel）方案
日常业务开发中我们常常会碰到如下的场景，即两个标签页之间的通信问题。我们在第一个标签页如何执行操作后在第二个标签页获取到信息。首先我们需要创建一个可以在多数环境下都可以快速使用的方法，在工程的任意位置创建一个可以访问的。创建比代理的东西，一个引用类型且被代理的东西肯定是不会允许克隆的，毕竟大家指向的地址是同一个。并没又直接获取到反而在发送的时候就报错了,再仔细看看发送的消息。文件，当然你可以叫它任何你想叫的名字。为我们提供了一种快捷且高效的途径。2.创建发送及接收的方法。发送消息标签页的使用。
2023-05-30 16:41:04
1650
原创 获取图片中的颜色动态设置背景色（colorThief）
上述的三张图分别是鼠标移入某个图片后根据获取的图片的原色动态设置的容器渐变背景。那么想要实现这个效果，我们必须先搞定一件事。鼠标移入某个图片获取当前图片的原色。为了保证获取的时效性采用异步的方式构建使用效果极佳。构建一个获取并执行操作的方法。分解获取到的色值执行填充背景。
2023-05-30 16:05:55
759
原创 浅谈Vue响应式
不管是自己面试还是八股文告诉你的是，响应式描述的是视图与数据变化之间的一种关系。但这不够准确。要要了解什么是响应式，我们必须了解不管是React,还是Vue其实本质就是一个函数。响应式描述的就是函数与数据之间的关联（数据与数据之间是无法相互作用的）
2023-05-15 11:08:15
486
原创 地图散点制作路径及轨迹回放常用数据处理（turf.lineChunk，bearing）
业务场景 离散点位或卡口，视频等固定点位抓拍设备拍摄到的信息点位。需要模拟出其行驶路径，并完成业务轨迹绘制，或者轨迹回放这里其实我们只需要关注两个点不考虑精度及实际意义的情况下增密点位路径上行驶角度的处理（车辆时）具体处理方式 /** * @Description:坐标增密 line 需要增密的线路 distance 增密的步长 types 增密的单位 （degrees, radians, miles, or kilometers） * @Au
2021-11-23 16:52:31
1296
原创 前端常用对象处理工具(含getOwnPropertyDescriptor)
/** * 给定一个指定对象和多源对象 * 将源对象中的所有特性复制到目标对象中 * 最后一个给定的源对象将覆盖上一个源对象的属性 * source objects. * @param {Object} dest destination object * @param {...Object} 从 sources中提取属性的源 * @returns {Object} dest * @private */export function extend(dest) { for (let
2021-11-11 10:41:27
517
原创 前端打包配置优化选择
打包可视化1.使用BundleAnalyzerPlugin 插件 安装后在vue.config.js中完成引入并配置即可更方便直观的分析打包后整体工程的各个文件占用，优化部署文件压缩1.使用CompressionWebpackPlugin插件完成对打包文件的整体压缩，减小部署包体积占用打包后除去工程console使用babel-plugin-transform-remove-console，在打包阶段完成对工程整体console删除工作打包配置分类1.工程打包期间常常分有分类环间，比如外
2021-09-28 17:41:20
348
原创 JS 数组reduce()函数统计数组中重复元素的个数，并重新组装输出
需求很明了，首先我们来看原始数据 // 样例数据 const data= [ { "id": null, "projectId": "4513f7ec42f34a3eb41a40dafe8a35c8", "companyId": "f2358250285c45f697dc46c2819fd93b", "companyName": "ly公路施工单位1",
2021-04-12 17:07:12
1507
原创 Vue3.0+typescript+element plus 持续更新中
1.Node环境配置推荐使用nvm 管理node.js Vue3.0及后续版本均在12x后的node版本中运行，nvm具体操作可以异步度娘2.Vue3.0构建方式官方给出了两种直接构建方式，前提是在cli4x之后，若脚手架版本过低可以@next升级后使用1.> vue create xxx 传统构建方式 有npm 驱动2.> npm install -g create-vite-app使用 ‘create-vite-app xxx’ 的方式区别在于传统的 create xx
2021-04-09 10:23:20
594
原创 MineMap动态路径规划方案
首先我们可以观察常用的百度和高德两家地图自带的路径规划都是基于了起点终点已知情况下根据类型区分（步行，骑行，驾车）等采用路径最短，路径拥堵指标等综合规划出的一套路线MineMap同样也提供了基础的路径规划服务，开发者需要在使用时注意：MineMapLBS同样也是最多支持7个选点 。起点+终点 +5个经过点的 /** * @Description:自动路径规划 生产最短路径 及起始点 * @Author: ShiWei * @Date: 2020..
2021-03-22 15:15:55
2001
原创 前端js+canvas实现雷达扫描效果
//页面容器 <div class="canvas_loop" v-show="isCanvas"> <canvas id="can" width="490" height="490" style=" margin:0 auto;"></canvas> </div>//调用 Rds.init() //雷达主体 ////////////////////////////////////////////////.
2021-02-03 16:32:19
2774
原创 前端实时刷新页面、操作后停止自动刷新，无操作后重新启动刷新
前端很多页面会要求可以实时刷新页面内容，切在响应操后短暂终止无操作后继续定时刷新，这里需求一般多集中在大屏信息展示的页面中我们针对此可以进行一次动作分解1.了解刷新的整体流程其中我们需要用到两个定时器，一个是总流程的定时刷新，另外一个就是我们熔断器的定时刷新/** * @Description: * 自动更新及暂停更新页面信息 初始化页面后一分钟钟内刷新，发生任何操作后停止更新，当无操作1min后重启更新 * @Author: ShiWei * @Date: 2021-01-28
2021-02-03 16:23:41
2340
原创 js数组赋值改变一个，引发原数组改变问题
我们常常在Vue项目中的Data 中会定义很多数据变量，类型也多样。老司机可能轻车熟路，但且有老马失蹄数组，private cardList:Array<any>=[]; 作为我们常用的一个数据类型，我们真的那么了解它么？很多人在面试时候也会被问到Vue data()中的的Object,Array可以直接赋值修改吗？有什么问题吗？要解答这些首先我们要明确一个问题Array在内存中的存储方式Array ======>> 它指向的是一段内存地址 public
2021-01-05 11:04:04
2539
原创 react动态表单增减-自定义解决方案
前端常用框架内有很多类似的功能可以直接使用，但往往都缺乏可控性是否想过如何自己动手也实现也一个更加自定义，更加可控的类似组件呢结合是业务-算法流程与数据管理控制，我们来手动造一个功能实现数据源的增删，输入数据的更新流程梳理：1.我们需要一个可以动态增删空行FORM的方法2.我们需要知道我们在删除，及编辑的是哪一个3.我们需要时刻保证编辑及回显的是当前行及当前顺序下的所有元素构建一个TODOLISTclass TodoList extends React.Component {
2021-01-04 11:29:56
1257
原创 JavaScript数据类型判断Typeof()/Object.prototype.toString.call()
我们常在JavaScript使用typeof判断数据类型，但这种只能区分基本类型，即：number、string、undefined、boolean、object。对于一些像null、array、function、object来说，使用typeof只会返回object字符串。若是要想区分对象、数组、函数、仅仅使用typeof这种方式肯定是行不通的。对于这类无法直接判断类型的，在JS种我们可以借助Object.prototype.toString方法，判断某个对象属于哪种内置类型。可以将这些归纳为一
2020-11-19 15:46:19
316
原创 mapbox/MineMap单一图层绘制多元素后点击变更指定点击位置元素属性
背景分析：采用Layer绘制方案中存在很多情况下需求在一张地图绘制n个属性显示的问题，例如行政区划面，边界等等。例如如下场合未知多个元素汇集在同一张地图实例上去做显示，编辑等效果。处理方案：1.第一反应是N个layer叠加显示优点：数据处理简单，执行编辑方案简单缺点：需要使用存储全局变量多，绘制性能占用大，内存占用大，后续清理图层，清理数据麻烦2.单图N元素的显示核心利用 数据组装时 组装 features=[];优点：需要使用存储变量少，绘制性能占用低，图层唯一，数据，图层清理简单。整体
2020-11-18 11:12:50
1914
原创 TypeScript+VueCli3+Router+Vuex
前面分享过在cli2x下typescript的开发，这次分享的是目前比较贴近Vue3bate版本的cli3下的typescript开发不了解typescript的同学可以先去看看基本的typescript跳过createVue阶段 我们直接看生产环境下的目录结构与cli2下的目录我们不再做过多的比较，我们只看typeScript下文件的变化1.main.ts 我们发现其实并没有什么变化2.App.vue作为路由页面初始化给出的入口很多同学喜欢直接在App下进行后续开发，我个人喜欢使用新建Ho
2020-11-05 16:33:25
573
原创 mineMap地图编辑图形功能---多边形绘制
需求：在已有显示地图上增加一个可编辑的动态面，圆形拖动圆形实现将圆形范围内的点位显示；初始化时需要默认一个范围面…效果预览需求分解：类似的功能会有很多，单核心都只有一个就是可以编辑的动态的图形的绘制问题。加载地图相关应用/** * @Description: 初始化地图 * @Author: ShiWei * @Date: 2020-09-07 */ init(){ if (!this.mapContro
2020-10-26 10:23:49
2931
2
原创 Vuex---数据持久化的多种方式
vuex无论你喜不喜欢或者想不想，但凡涉及到了Vue项目多数时候你都会需要。但万物都有弊端，页面刷新后状态，数据丢失一直很头大。而这个问题我们也常常在面试中被问到，传统的解决方案是Vuex+sessionStorage等存储方案解决好吧 不墨迹直接上封装好的干货，喜欢那个选那个。直接在Vuex中调用即可var Storage = { // ==================sessionStorage设置缓存================ // 设置缓存 sessionSet: f
2020-10-13 16:35:30
2945
原创 Vue源码解析------Part1认识Flow
随手打开一个网页，输入’Vue源码’各种五花八门的介绍都能让你或多或少的理解一些。但多数时候我们都停在了"use"这个阶段。举一个很简单的例子，一个中量级的Vue项目多人合作开发。然后统一的代码风格，愉快的开发过程。在一段时间的手舞足蹈后有人掉队了。回头看看接手的变成你一个人了，内心窃喜（成果都是我的了）但常年的快速开发让你也很敏感（接手接锅）！！！打开前几个社畜的模块你发现了很多不好的习惯例如 props [XX], ""诸如此类的写法。手起刀落你开始正篇幅的找然后开始改。改了玩编辑器没有黄色警告了
2020-10-12 11:30:54
148
原创 地图已知一个坐标和一个半径生成随机多边形
背景这个方案背景其实就是上篇中那次快速响应的一个额外需求，客户需要一个面来表示一个特定的区域，但客户只能提供一个点，且要求生成的图形不能是很规则的圆，长方形或者正方形需求分析：已知一个点center,一个半径R。我们首先能想到的就是一个圆。以当前圆的圆心为基点我们可以将该圆切割成4个象限。那么是否我们可以使用随机的角度去去这个四个象限内的随机坐标呢？初次实验，结果是成立的满足可以四边形需求。但仍不满足我们多边不含（四边）的需求。如果想做我们需要一个合理的算法支撑。时间是不允许我这样考虑的换个思路：外
2020-09-17 11:05:24
926
原创 基于mineMap的地图台风灾害预警轨迹可视化方案
1.需求概要可视化界面显示气象云图及台风中心运动变化，实时数据显示；2.效果预览方案实施1.>图层构成分析：可视范围内构成的应该包含基础图层和动态移动图层，运动线路，运动风标，及运动信息框；2.>结构拆分：//：基于但图层创建多个根据风力大小为半径的风面圆图层；数据组装： /** * @Description:圆心处理 * @Author: ShiWei * @Date: 2020-09-07 */
2020-09-08 17:09:55
1485
3
原创 ant Tree 点击父节点收起所有展开的子节点方式
还记得上次那个要了你半条命才实现的高难度目录树吗？往期回顾：树功能展开节点图标为目录打开，收起为目录关闭图标；节点支持拖拽移动嵌入；树目录支持导入；按类型分类展示标题组成三部分；点击节点对应面包屑导航生成；点击面包屑导航可以展开对应指定树内心在不断的嚎叫！！！是的本来不富裕的家庭今天又有新的饥荒了介于目前这个树已经这么完美多样了 ，我们再加点功能！树要支持点击父节点收起所有已展开的子节点，也就是跨级收缩我。。。。。。。。。一顿分析后得出结论，既然我做不到让谁都开心的收起，可是介于目前的.
2020-08-10 16:59:06
4127
原创 前端树形数据选中节点返回该节点所有父级信息（id，name）,TreeNode,el-cascader,Breadcrumb面包屑信息显示
前端同学每次看到树形数据，无论是表格还是各种奇葩的Tree第一反应都是
2020-08-07 17:40:07
978
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人