m0_58447769的博客

原创 小程序中定位功能的实现

1.通过wx.getLocation获取经纬度通过调用小程序自带的API wx.getLocation获取用户当前位置的地理坐标wx.getLocation({ type: 'gcj02', //返回可以用于wx.openLocation的经纬度 success(res) { console.log(res) } })2.借助腾讯位置服务的逆地址解析,获取用户所在地信息具体流程如下:微信小程序JavaS.

原创 使用TS时，在Redux中类型声明的各文件关系图

以下均为固定套路

原创 快速入门TypeScript

了解TypeScriptTypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。 它与JS最大的不同就是，在 JS 的基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行。为什么要为 JS 添加类型支持?JS的缺陷 JS 的类...

原创 实现数组扁平化的方法

一、概念数组扁平化，又叫做多维数组降维，是指将一个多维数组变为一维数组二、实现方法1.reduce遍历数组每一项，若值为数组则递归遍历，否则concat。function flatten(arr) { return arr.reduce((result, item)=> { return result.concat(Array.isArray(item) ? flatten(item) : item); }, []);}reduce是数

原创 React中如何在非组件环境下拿到路由信息

用location.href直接赋值会导致页面刷新。如何在非组件内使用history跳转？背景react-router-dom中直接有Router这个包，但是它的Router 没有history属性有如下公式：Router + HashHistroy = HashRouterRouter + BrowerHistroy = BrowerRouter安装react-router-dom时，默认会安装history包，我们可以通过这个包来自己创建history对象思路单独

原创 用React 手写 倒计时功能--自定义hooks (逻辑复用)

平时工作偶尔会把一些逻辑相通的功能作逻辑复用，这里记录下来 希望对大家实际开发有些帮助需求 : 点击一个按钮 按钮用 过n秒回复import { useState, useEffect, useRef } from 'react'// 第一参数为你定时的数字// 第二参数为你定时结束时想做的事// 返回的第一参数为可变值// 返回第二参数为触发函数export function useTimer (Num, callBack = () => {}) { const [nu..

原创 React项目开始阶段 - store文件夹的配置

每次创建store文件夹都是一个麻烦事 干脆发篇通用博客 方便以后直接复制exlist 配置可以看我其他博客|- store |- actions # action creator |- channel.js # 创建与 频道相关的 的action |- newsList.js # 创建与 新闻列表的 的action |- reducers # reducer ...

原创 项目中配置 eslint与prettier-now 引入的方法

配置eslint在react项目中配置eslint，并启用保存自动格式化功能第一步npm i eslinttypescript-D第二步在项目根目录，运行npx eslint --init按交互提示完成相关配置项第三步设置vscode的自动保存格式化在项目根目录下，补充配置文件：.vscode\settings.json，其内容如下：{ "eslint.run": "onType", "eslint.options": { ...

原创 SPA的理解与优缺点

单页Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA 不会因为用户 的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换 HTML 的内容，从而实现 UI 与用户的交互。由于避免了页面的重新加载， SPA 可以提供较为流畅的用户体验。得益于 aj...

原创 Javascript闭包

要了解闭包这个概念,首先需要弄清作用域是什么.作用域和自由变量所谓万丈高楼平地起，盘龙卧虎高山齐，在进入闭包的学习之前，我们先要去了解一下作用域的概念，只能说真正理解作用域才能更好地学习闭包，通俗来讲，作用域就是在定义的变量在某个范围内是可使用的一个区域。简单地画了个图，上述的框框我们可以看出，其实作用域就是某个变量可使用的合法范围，比如变量a，作为全局作用域，是公开使用的，不论是函数外部还是fn1，2，3都可以使用，就好比公厕这种地方是面向全社会人员的。我们再看看fn3，假如fn2，f..

原创 React中useEffect与生命周期钩子函数的对应关系

在React的函数组件中，useEffect的作用其实也对标了类组件中的生命周期，它的四种使用格式也与生命周期的四种钩子函数形成着对应关系。使用格式一：不带参数的情况执行时机：（1）初始执行 （2）每次页面更新之后都要执行 useEffect( () => { //执行函数 })对应关系：componentDidMount + componentDidUpdate使用格式二：带第二个参数，参数为空数组执行时机：只执行第一次（...

原创 React中useContext(全局公共状态)的使用

关于使用useContext的固定套路有以下几个步骤:(一) 导入并调用createContext,得到Context对象并导出.import { useContext } from 'react'export const Context = React.createContext() // 这里有导出 (二) 使用Provider组件包裹根组件,并通过value属性提供要共享的数据. return ( <Context.Provider valu

原创 Vue 数据双向绑定的原理

定义：Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时 发布消息给订阅者，触发相应的监听回调。数据劫持：在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果.数据劫持最典型的应用------双向的数据绑定,Vue 2.x 利用 Object.defineProperty()，并且把内部解耦为 Observer, Dep, 并使用 W

原创 React组件通讯

一，组件通讯介绍基本概念：组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯二，三种常用的组件通讯方式父子组件之间兄弟组件之间跨组件层级先了解props基本使用：格式：父组件传入数据<子组件 自定义属性1={值1} 自定义属性2

原创 React的生命周期钩子函数

组件生命周期-挂载阶段钩子 函数 触发时机 作用 constructor 创建组件时，最先执行 1. 初始化state 2. 创建Ref等 render 每次组件渲染都会触发 渲染UI（注意： 不能调用setState() ） componentDidMount 组件挂载（完成DOM渲染）后 1. 发送网络请求 2.DOM操作 挂载阶段钩子的执行顺序:组件生命周期-更新阶段钩子函数 触发时机 作用 ..

原创 Vue 该如何实现组件缓存?

首先我们要知道为什么需要组件缓存?在面向组件化开发中，我们会把整个项目拆分为很多业务组件，然后按照合 理的方式组织起来，那么自然会存在组件之前切换的问题，Vue 中有个动态组件 的概念，它能够帮助开发者更好的实现组件之间的切换，但是在面对需求频繁的 变化，去要切换组件时，动态组件在切换的过程中，组件的实例都是重新创建的， 而我们需要保留组件的状态，为了解决这个问题，需要使用到 Vue 中内置组件 <keep-alive><keep-alive>的作用.

原创 Vue 组件里的定时器要怎么销毁?

对于这个问题，我们分为两种情况：(1) 组件中有多个定时器 如果页面上有很多个定时器，可以在data选项中创建一个对象，给每个定时器定义一个名字，并且一 一映射在这个对象中。然后在beforeDestroy 钩子函数中通过循环这个对象，来消除每一个定时器 for(let k in this.timer){clearInterval(k)}；(2) 组件中只有一个定时器 那么可以直接在beforeDestroy 钩子函数中直接用clearInterval(...

原创 v-if和v-show的区别

虽然v-if和v-show都能够实现元素的"显示"和'隐藏'，但是本质上有很大的差别。实现的逻辑不同v-if的实现是通过元素的创建和销毁来实现的v-show 的实现则是通过改变元素的样式display来实现的vue生命周期区别因为v-if是通过元素的创建和销毁所实现的，所以每一次切换都会重新走一遍生命周期钩子函数。而v-show因为是通过样式来切换，元素一直存在。所以切换时不会再走生命周期钩子了。性能区别v-show比v-if性能更高，因为v-show只能动态的.

原创 Git工作原理的深入了解

git介绍分布式：Git版本控制系统是一个分布式的系统，是用来保存工程源代码历史状态的命令行工具。保存点：Git的保存点可以追踪源码中的文件, 并能得到某一个时间点上的整个工程项目的状态；可以在该保存点将多人提交的源码合并, 也可以回退到某一个保存点上。Git离线操作性：Git可以离线进行代码提交，因此它称得上是完全的分布式处理，Git所有的操作不需要在线进行；这意味着Git的速度要比SVN等工具快得多，因为SVN等工具需要在线时才能操作，如果网络环境不好， 提交代码会变得非常缓慢。Git基

原创 RBAC权限管理思想

这两天在写人力资源后台管理项目中，有一个颇有意思的功能设计。在后台管理项目中，根据每个用户的身份不同，他们能够操作的功能和可以进入的界面也各不相同。具体如下图所示：功能难点1.首先需要解决的就是不同身份的用户在登陆后，他可以操作的界面也不同。（这里在之前的代码编写中，已经把用户信息存入到Vuex）那么这个问题的根源就是：如何在不同用户登陆后，改变为不同的路由配置。这里首先就应该想到 动态路由添加（addroutes）然而在代码的哪个执行阶段添加呢？结...

原创 用递归算法将数组转化成树形结构

原创 防抖与节流的实现思路及应用场景

防抖防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。好处: 能够保证用户在频繁触发某些事件的时候,不会频繁的执行回调,只会被执行一次防抖的应用场景用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；防抖的实现思路节流节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。节流的应用场景...

原创 数组去重的方法---小练习

var arr = [1,2,1,1,3,5,4,5,5,6,4,7,8,9,7]将上述数组的元素去重一.forEach方法 var newarr = [] arr.forEach((item)=>{ newarr.includes(item) ? '' : newarr.push(item) }) console.log(newarr); // [1, 2, 3, 5, 4, 6, ...

原创 element组件中关于表格的序列问题

在后台管理项目中。我们经常会遇到这种带有分页器的表格数据。上图中的序号列数据是根据element表格组件中的type=‘index’属性设置的。问题但因为分页器的存在，数据请求是根据分页器的页数来发起的。这就导致了不管是哪一页的数据，他们的序列号永远是从1开始的。而一般情况下的项目需求是让每条数据延续上一页的序号。解决方案在element表格组件中，有一个index自定义属性（自定义序列号）通过这个属性，我们可以自己在代码中封装...

原创 vue侦听器

一, 为什么要用侦听器虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。二,watch是什么watch是一个对象，对象就有键跟值，　　键就是我们要监听的数据，　　值可以是函数：当我们监听的数据发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前的值，第二个是变化后的值；　　值也可以是method中的函数名：函数名要用引号

原创 Vue中.sync和v-model的区别

首先我们先了解它们的原理V-model对于v-model可以说是老熟人了，他的作用为：实现视图层的Dom元素内容和数据层的双向绑定。即为双向绑定。在v-model用于父子元素的数据双向绑定时，它的原理可理解为：// 父组件中<com1 v-model="num"></com1>// 等价于<com1 :value="num" @input="(val)=>this.num=val"></com1>.sync修饰符的原理

原创 计算数组中每个元素出现的次数---小练习

练习["b", "c","b", "c","a", "b", "c"] 统计每个元素出现的次数 (一道数组API的练手题) var arr = ["a", "c", "b", "c", "a", "b", "c"]; var num = arr.reduce((allItem, item) => { if (item in allItem) { allItem[item]++; }else{ ..

原创 关于token数据失效的处理

着手这个问题首先得了解token数据是什么。这里不做过多赘述，如果不太懂token的读者老爷，可以阅读博主之前发的文章：Vuex数据持久化---token(个人理解)_m0_58447769的博客-CSDN博客那么接下来言归正传，token数据失效问题的根源token数据是由后端服务器响应给客户端的，且一般情况下，后端哥们都会给token数据设置一个失效时间。那么问题就在于，一旦token数据失效。相对应的，网站内的所有资源请求的请求头（也就是token）也都会失效。这将导致用户的网

原创 网站登录功能 --- 关系图

因为用户信息数据在项目中会运用于多个组件，所以最好存储在Vuex中，方便数据的拿取。执行过程如下图所示：

原创 Vuex数据持久化---token(个人理解)

想要弄明白这个命题，首先要了解token是什么。一.Token顾名思义嘛，令牌，可以理解为一种身份验证标识。举个例子，你去游乐园玩，进去得要门票吧，不然门口的保安大哥怎么都不会让你进去，token就像是一张（年卡门票）。那问题来了，全国那么多游乐园，我不可能拿着一家的票逛全国的游乐园吧。所以每家游乐园发的门票都是独一无二的。这里的游乐园其实就是各个网站，你在网站登录后，服务器就会结合你的用户信息，发一个你的专属token。二.Token的存储问题我们一般会把从服务器请求来的数据存

原创 Web前端开发最常见的八种编程软件

1.Visual Studio Code(VS Code) 简介: Visual Studio Code(VS Code)是微软2015年推出的一个轻量但功能强大的源代码编辑器，基于 Electron 开发，支持 Windows、Linux 和 macOS 操作系统。它内置了对JavaScript，TypeScript和Node.js的支持并且具有丰富的其它语言和扩展的支持，功能超级强大。Visual Studio Code是一款免费开源的现代化轻量级代码编辑...

原创 Vue项目---主页的组件构成结构(模板)

（一）基础主页布局结构（二）主页的组件结构图 一般情况下，App根组件里只存放一条router-view标签，用来映射Layout组件。 （在路由配置中设置默认Path:"/"，通过重定向映射Layout组件） 在Layout组件中注册Sidebar、Navbar、Main三大主体内容组件 而后在三个主体组件中根据需求，再添加不同的内容组件 以上内容仅供参考，具体结构根据需求不同而变化。...

原创 购物车结算

<template> <div> <h3>购物车结算</h3> <div> <!-- disabled="disabled" 价格及运费输入框禁用，用户不能输入 --> <p> 手机： 价格<input type="text" style="width: 100px" disabled="disab.

原创 常用的十个VS code快捷键 (干货!!)

快捷键 作用 Ctrl + S 保存当前文件代码 Ctrl + P 快捷打开项目文件 Tab 当前行头部缩进两格 Shift + Tab 当前行头部前退两格 Ctrl + Z 返回到上一次输入指令 Alt + ↑或Alt + ↓ 当前行上移动或下移动 F8 转到下一个错误或者警告 Ctrl + ` (Tab上面的键位) 打开终端 Ctrl + D 批量替换当前文件中所有匹配的文本 .

原创 常用的十五个数组方法 (干货)

Array.push()push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。const animals = ['pigs', 'goats', 'sheep'];const count = animals.push('cows');console.log(count);// expected output: 4console.log(animals);// expected output: Array ["pigs", "goats", "shee.

原创 Vuex中actions与map函数的总结（vuex摘要）

Actionsaction中可以通过调用 mutation来修改state，而不是直接变更状态。 action 可以包含任意异步(例如ajax请求)操作。actions的定义格式new Vuex.store({ // 省略其他... actions: { // context对象会自动传入，它与store实例具有相同的方法和属性 action的名字: function(context, 载荷) { // 1. 发异步请求, 请求数据

原创 Vue生命周期

一.理解生命周期概念一个Vue实例的生命周期即是 从创建到销毁的整个过程。就如同人的一生中会经历很多个阶段，如幼年、青年、成年、中年、老年等等。(也可以理解为一个人从出生到死亡的过程.)二.钩子函数概念理解：人在生命的每个阶段要做的事情也不同,如青年时应该好好读书，大学毕业后就要步入社会等等。 钩子函数即是在生命周期中"特定的时间点"，执行特定的操作。钩子函数的本质：是Vue框架内置函数，随着组件的生命周期阶段进行而自动执行。三：钩子函数的分类总体上分为：四大阶.