qq_873366938的博客

官方给出的解释：接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象// 只读 function computed < T >(getter :() => T , debuggerOptions?

js， npm, 幽灵依赖

基于Vue3的排班日历

Vite，webpack

foreach 作为一个无返回值的遍历而言应用的场景很普遍假设有一个工具箱，foreach完成的就是告诉工具箱的每个工具需要干什么 tool.forEach( (todo) => { todu.pickUpSoap(); //具体的工作 });map 遍历构成返回一个新的数组通俗的来说就是你有一个新的容器， 然后将你原有篮子里的苹果（假设苹果对应的有每个人的名字，编号）一个个都按顺序丢进去。结束的时候你回得到一个完整的按顺序排列的新容器（里面是所有丢进去的苹果）let box

要想了解这些首先我们先要明确一点 什么是 Promise官方的解释：Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。深层的描述可以解释成 *一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。供其使用的方法也有很多例如P

业务场景 离散点位或卡口，视频等固定点位抓拍设备拍摄到的信息点位。需要模拟出其行驶路径，并完成业务轨迹绘制，或者轨迹回放这里其实我们只需要关注两个点不考虑精度及实际意义的情况下增密点位路径上行驶角度的处理（车辆时）具体处理方式 /** * @Description:坐标增密 line 需要增密的线路 distance 增密的步长 types 增密的单位 （degrees, radians, miles, or kilometers） * @Au

/** * 给定一个指定对象和多源对象 * 将源对象中的所有特性复制到目标对象中 * 最后一个给定的源对象将覆盖上一个源对象的属性 * source objects. * @param {Object} dest destination object * @param {...Object} 从 sources中提取属性的源 * @returns {Object} dest * @private */export function extend(dest) { for (let

打包可视化1.使用BundleAnalyzerPlugin 插件 安装后在vue.config.js中完成引入并配置即可更方便直观的分析打包后整体工程的各个文件占用，优化部署文件压缩1.使用CompressionWebpackPlugin插件完成对打包文件的整体压缩，减小部署包体积占用打包后除去工程console使用babel-plugin-transform-remove-console，在打包阶段完成对工程整体console删除工作打包配置分类1.工程打包期间常常分有分类环间，比如外

需求很明了，首先我们来看原始数据 // 样例数据 const data= [ { "id": null, "projectId": "4513f7ec42f34a3eb41a40dafe8a35c8", "companyId": "f2358250285c45f697dc46c2819fd93b", "companyName": "ly公路施工单位1",

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

首先我们可以观察常用的百度和高德两家地图自带的路径规划都是基于了起点终点已知情况下根据类型区分（步行，骑行，驾车）等采用路径最短，路径拥堵指标等综合规划出的一套路线MineMap同样也提供了基础的路径规划服务，开发者需要在使用时注意：MineMapLBS同样也是最多支持7个选点 。起点+终点 +5个经过点的 /** * @Description:自动路径规划 生产最短路径 及起始点 * @Author: ShiWei * @Date: 2020..

//页面容器 <div class="canvas_loop" v-show="isCanvas"> <canvas id="can" width="490" height="490" style=" margin:0 auto;"></canvas> </div>//调用 Rds.init() //雷达主体 ////////////////////////////////////////////////.

前端很多页面会要求可以实时刷新页面内容，切在响应操后短暂终止无操作后继续定时刷新，这里需求一般多集中在大屏信息展示的页面中我们针对此可以进行一次动作分解1.了解刷新的整体流程其中我们需要用到两个定时器，一个是总流程的定时刷新，另外一个就是我们熔断器的定时刷新/** * @Description: * 自动更新及暂停更新页面信息 初始化页面后一分钟钟内刷新，发生任何操作后停止更新，当无操作1min后重启更新 * @Author: ShiWei * @Date: 2021-01-28

我们常常在Vue项目中的Data 中会定义很多数据变量，类型也多样。老司机可能轻车熟路，但且有老马失蹄数组，private cardList:Array<any>=[]; 作为我们常用的一个数据类型，我们真的那么了解它么？很多人在面试时候也会被问到Vue data()中的的Object,Array可以直接赋值修改吗？有什么问题吗？要解答这些首先我们要明确一个问题Array在内存中的存储方式Array ======>> 它指向的是一段内存地址 public

前端常用框架内有很多类似的功能可以直接使用，但往往都缺乏可控性是否想过如何自己动手也实现也一个更加自定义，更加可控的类似组件呢结合是业务-算法流程与数据管理控制，我们来手动造一个功能实现数据源的增删，输入数据的更新流程梳理：1.我们需要一个可以动态增删空行FORM的方法2.我们需要知道我们在删除，及编辑的是哪一个3.我们需要时刻保证编辑及回显的是当前行及当前顺序下的所有元素构建一个TODOLISTclass TodoList extends React.Component {

我们常在JavaScript使用typeof判断数据类型，但这种只能区分基本类型，即：number、string、undefined、boolean、object。对于一些像null、array、function、object来说，使用typeof只会返回object字符串。若是要想区分对象、数组、函数、仅仅使用typeof这种方式肯定是行不通的。对于这类无法直接判断类型的，在JS种我们可以借助Object.prototype.toString方法，判断某个对象属于哪种内置类型。可以将这些归纳为一

背景分析：采用Layer绘制方案中存在很多情况下需求在一张地图绘制n个属性显示的问题，例如行政区划面，边界等等。例如如下场合未知多个元素汇集在同一张地图实例上去做显示，编辑等效果。处理方案：1.第一反应是N个layer叠加显示优点：数据处理简单，执行编辑方案简单缺点：需要使用存储全局变量多，绘制性能占用大，内存占用大，后续清理图层，清理数据麻烦2.单图N元素的显示核心利用 数据组装时 组装 features=[];优点：需要使用存储变量少，绘制性能占用低，图层唯一，数据，图层清理简单。整体

前面分享过在cli2x下typescript的开发，这次分享的是目前比较贴近Vue3bate版本的cli3下的typescript开发不了解typescript的同学可以先去看看基本的typescript跳过createVue阶段 我们直接看生产环境下的目录结构与cli2下的目录我们不再做过多的比较，我们只看typeScript下文件的变化1.main.ts 我们发现其实并没有什么变化2.App.vue作为路由页面初始化给出的入口很多同学喜欢直接在App下进行后续开发，我个人喜欢使用新建Ho

常用的UI组件为我们提供了很便捷的树形展示和操作方案，例如ant,element,Iview等Tree组件；以此为基础，无历是友好的java同学直接给你treeList 还是评级结构下的前端组装数据的处理仍需要使用者自己来动手为了事半功倍工具函数是不可少的1.树形数据组装： /** * @Description:sourceData数据源 * @Author: ShiWei * @Date: 2020-11-04 */export const cre

前端参数传输安全的必要性我们在任何场合都不应该直接或间接的暴露用户信息，或核心参数指标在浏览器上即是做不到无法查看也应做基本的加密处理放置恶意攻击或信息泄露那么如何保证自己前端简单又便捷的生成加密参数呢1.我们可以使用window.btoa（） window对象自带的一个base64加密规则实现 前提参数需要时独立的string。 解密方式 是将加密后的文本使用window.atob(Str) 注意Str: 必需是一个通过 btoa() 方法编码的字符串。代码中我们可以这样使用 /*

需求：在已有显示地图上增加一个可编辑的动态面，圆形拖动圆形实现将圆形范围内的点位显示；初始化时需要默认一个范围面…效果预览需求分解：类似的功能会有很多，单核心都只有一个就是可以编辑的动态的图形的绘制问题。加载地图相关应用/** * @Description: 初始化地图 * @Author: ShiWei * @Date: 2020-09-07 */ init(){ if (!this.mapContro

vuex无论你喜不喜欢或者想不想，但凡涉及到了Vue项目多数时候你都会需要。但万物都有弊端，页面刷新后状态，数据丢失一直很头大。而这个问题我们也常常在面试中被问到，传统的解决方案是Vuex+sessionStorage等存储方案解决好吧 不墨迹直接上封装好的干货，喜欢那个选那个。直接在Vuex中调用即可var Storage = { // ==================sessionStorage设置缓存================ // 设置缓存 sessionSet: f

随手打开一个网页，输入’Vue源码’各种五花八门的介绍都能让你或多或少的理解一些。但多数时候我们都停在了"use"这个阶段。举一个很简单的例子，一个中量级的Vue项目多人合作开发。然后统一的代码风格，愉快的开发过程。在一段时间的手舞足蹈后有人掉队了。回头看看接手的变成你一个人了，内心窃喜（成果都是我的了）但常年的快速开发让你也很敏感（接手接锅）！！！打开前几个社畜的模块你发现了很多不好的习惯例如 props [XX], ""诸如此类的写法。手起刀落你开始正篇幅的找然后开始改。改了玩编辑器没有黄色警告了

1.需求概要可视化界面显示气象云图及台风中心运动变化，实时数据显示；2.效果预览方案实施1.>图层构成分析：可视范围内构成的应该包含基础图层和动态移动图层，运动线路，运动风标，及运动信息框；2.>结构拆分：//：基于但图层创建多个根据风力大小为半径的风面圆图层；数据组装： /** * @Description:圆心处理 * @Author: ShiWei * @Date: 2020-09-07 */

还记得上次那个要了你半条命才实现的高难度目录树吗？往期回顾：树功能展开节点图标为目录打开，收起为目录关闭图标；节点支持拖拽移动嵌入；树目录支持导入；按类型分类展示标题组成三部分；点击节点对应面包屑导航生成；点击面包屑导航可以展开对应指定树内心在不断的嚎叫！！！是的本来不富裕的家庭今天又有新的饥荒了介于目前这个树已经这么完美多样了 ，我们再加点功能！树要支持点击父节点收起所有已展开的子节点，也就是跨级收缩我。。。。。。。。。一顿分析后得出结论，既然我做不到让谁都开心的收起，可是介于目前的.

前端同学每次看到树形数据，无论是表格还是各种奇葩的Tree第一反应都是

背景图+js鼠标移动折线特效直接上效果图速食版模块login<template> <div id="login"> <!-- 背景及不规则图形效果 --> <div id="particles-js"> <div class="sk-rotating-plane"> </div> </div> <div class=

VueX---->Vue中标准的状态管理库1.了解业务常见，多问问自己为什么要使用VueX.2.Vuex的组成部分3.如何快速构建自己的Store4.项目上如何使用初学者眼中的VueX1.当你是一个Vue的初学者时，无论你看多少资料，听多少人说Vue，总会时不时让你听到一个名词“VueX”然而你看完官网介绍，网上数不清的案例后内心的真实写照：很多时候讲地再多不如实际操作一下。放我们来构建一个最简单的业务场景A组件有一个MODAl弹窗，B页面是一个独立的编辑页面，现在A,B页面都

树形结构数据表格1：预期效果2：需求分析，2-1.UI设计原型表格为组织结构2-2.含有子节点的组织不能选择,单选按钮为禁用状态2-3.默认展开所有组织结构2-4.只有一级组织显示展开按钮2-5.期望在选择后带回当前所选择组织的全结构即可选组织为为三级时应该带回全1，2，3级。2-6.后台存储需要id:id/id/id.3.业务处理3-1.数据结构分析：数据格式应采用树形结构 data :[ { key: 1,

Vue多表格展示及导出1.设计背景：在有限的容器内展示以多表格形式展示数据，不能使用单一表格绘制添加滚动轴2.期望效果3.需求分析：1.在有限的容器内使用table组件但，但渲染成本回大大增加，table:表头+数据；2.替代方案，前端仿写成表格样式，但采用简单的dom绘制。对比：方案2更具灵活性，且渲染成本回大大降低。可控制性增加4.实现思路：1.表格数据一般由两部分构成，但目前形式下 推荐使用一个list返回，这种方式后台也会很喜欢list{“xx”:xx,…}.2.数据解构，分离出

一：需求点：对数动力道路，车辆，人流道路，载能分析道路等等道路渐变色属性支持：mapBox(支持)，mineMap(3.0支持，目前我们内部使用)；官网提供的为mineMap2.0(不支持)，传统瓦片地图（不支持）解决对象：1.使用传统道路绘制方式，绘制道路的地图。2.mineMap2.0使用者。3.传统瓦片地图使用方案者。核心：道路数据特点，geo数据中核心点的coordinates:[]是一个Array这是我们可以最大化利用的一点；方案：已知的所有道路coordinates是一个连续的数量

前端可以做并发吗答案是：理论上可以，实际操作可能会有点差强人意。javascript没有多线程这样一个说法，其次，不建议使用这种方式解决问题，多线程应该交给后台去做首先我们会想到第一个很实际的方式采用setInterval(function) 定时器异步调用callee() – 触发函数的自我递归方法let n=5; //请求的数量 4 setInterval(function(){ 5 //创建一批10个“线程” 6 for(let k=0;k<n;k++

什么是GET和POST广义的理解其实就是数据请求的两种方式，区别的也基本人尽可之1.GET在浏览器回退时是无害的，而POST会再次提交请求。2.GET产生的URL地址可以被Bookmark，而POST不可以。3.GET请求会被浏览器主动cache，而POST不会，除非手动设置。4.GET请求只能进行url编码，而POST支持多种编码方式。5.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。6.GET请求在URL中传送的参数是有长度限制的，而POST么有。7.对参数

一：需求分析1.场景：多数道路车辆信息都会设计到历史轨迹回放，包含当前车辆信息，道路信息，已经随之变化的响应数据变更，常采用图表形式展现2：效果展示静态：二 核心分析轨迹 要素：点[经纬度]，车头的方向（保证车的反向是当前的行进方向），速度(车的行驶速度)2.图表联动时数据的传输：当前点位与之对应的变化图表的数据应该时同步的三 解决方案1.了解可以实时播放的数据处理方式：1-1:后端提供接口，按照约定的时间间隔实时获取1-2：前端一次获取，使用定时器触发利弊分析：后端实时获取可以省去

一：基础版本 不需要多于插件优化，可以提供基础配置服务即可 开箱即用const path = require(‘path’)const isPro = process.env.NODE_ENV === ‘production’ //环境标识const resolve = dir => {return path.join(__dirname, dir)}module.exports = {// 基本路径publicPath: ‘./’,// 打包输出文件目录outputDir:

@前端工具函数篇（最近工作比较忙整理一下）常用树形结构数据处理export const NewTree = function (sourceData,id,pid) { // 转换成插件需要格式的树结构 // const id = id // const pid = pid // 深拷贝 const data = sourceData.map(item => { return Object.assign({}, item) }) const res = []

1:对于私有store的使用；store=>{....}简历项目的初期就应该在每一个模块的入口下简历属于自己的storestore 数据处理前的变量定义，或者引用定义很明显一个区别在于当你使用mobx作为自己的状态管理机时，你应该有高度的警惕！因为它自己本身就是一个观察者：当你在@observable 中定义一个对象或者类，或者一个变量时@observable a;@...

函数防抖概念**函数防抖当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间 **export function debounce(func,wait=500){let timeOut=null; （用来处理事件的定时器）return function(event){ clearTimeout(timeout); //每次触发前先清除上一次的定...