- 博客(43)
- 收藏
- 关注
RSS订阅原创 模块化-CommonJS
前言：当项目功能越来越多，代码量也随之越来越大，后期维护难度会增大，此时在JS方面就会考虑使用模块化规范去管理。一、模块化的理解1、什么是模块？将一个复杂的程序依据一定的规则（规范）封装成几个（文件），并进行组合在一起。块的内部数据与实现是私有的，只是向外暴露一些接口（方法）与外部其他模块通信2、模块化的进化过程1）全局function模式：将不同的功能封装成不同的全局函数a. 编码：将不同的功能封装成不同的全局函数b. 问题：污染全局命令空间，容易引起命令冲突或数据不全，而且模块成员
2022-05-17 23:06:27
691
原创 vscode插件快速创建react组件的快捷键
一、查找插件es7 并安装二、快捷键1、rfc (快速创建一个组件fun)2、rcc （快速创建一个组件extends）3、rconst 快速创建一个 constuctor4、rcep 快速创建一个组件（使用extends方式）5、rcredux 快速创建一个 redux格式的类模板6、clg console.log()的快捷键7、其它快捷键列表...
2022-04-20 23:42:15
2585
1
原创 TS中的泛型是什么，适合什么应用场景
什么是泛型呢？泛型简单来说就是类型变量，在ts中存在类型，如number、string、boolean等。泛型就是使用一个类型变量来表示一种类型，类型值通常是在使用的时候才会设置。泛型的使用场景非常多，可以在函数、类、interface接口中使用为什么使用泛型?TypeScript 中不建议使用 any 类型，不能保证类型安全，调试时缺乏完整的信息。TypeScript可以使用泛型来创建可重用的组件。支持当前数据类型，同时也能支持未来的数据类型。扩展灵活,可以在编译时发现类型错误，从而保证了类型安全
2022-03-10 23:03:41
7253
原创 TS中any与unkonow与never类型都是什么
（一）any这应该是 typescript 中最开始就会接触到的类型，顾名思义：任意类型，这也是 ts 中不写类型申明时的默认类型，即不作任何约束，编译时会跳过对其的类型检查，let a1: any;a1 = 'abc';a1 = 123;a1 = true;const arr: any[] = [123, 'abc', true, null];（二）unknownunknown 表示未知类型，是 typescript 3.0 中引入的新类型，即写代码的时候还不清楚会得到怎样的数据类型，
2022-03-09 23:18:27
989
原创 函数式编程之柯里化和组合函数
（一）柯里化 （Curry）1、概念柯里化把接受多个参数的函数变换成接受一个单一参数的函数，并且返回接收剩余的参数柯里化，帮助我们将任意多元函数变成一元函数的处理。柯里化实现的意义能：代码能够更好地复用，这是对函数参数的一种缓存，让函数更灵活，颗粒度更小，便于函数组合产生最大的功能2、实现function curry(func) { return function curriedFn(...args) { if (args.length < func.length) {
2022-03-05 00:23:05
185
原创 理解函数式编程是什么，它有哪些优点
由一个例子引出声明式编程和函数式编程的区别const arr = [[1, 3, 6], [1, 6, 9], [2, 5], 8, [7, 1, 2, 3]];将arr通过一些列处理后得到结果为： [1, 2, 3, 5, 6, 7, 8, 9]通过分析，要得到上面的结果，数组需要经过 偏平化、去重、排序下面用两种不同的编程方式来实现：（一）、函数式编程(Imperative) ：命令式编程 命令式编程主要思想是关注计算机执行的步骤，即每一步应该做什么，怎么做// 1、偏平化const
2022-02-27 00:33:17
331
原创 算法篇二【线性表】：线程池和任务队列(Task- Queue)
队列的应用场景：一、CPU的超线程技术真双核：有两个核心，每个核心有一个指令队列（用户只能看见两个管子）虚拟四核：给每个核心增加一条虚拟队列，就是一个核心处理两个队列（因为CPU处理的速度很快，可以给它两个管子输入指令，可以使它一直都有任务来进行处理）四路CPU：计算核心一个CPU包含多个计算核心企业中用32核或者64核多路：一个机器中包含多个CPU（一般出现在服务器层面—多路–》计算节点–》集群–多个节点）笔记本一般包含一个CPU应用场景二：进程、线程what?比如、你-独立的你
2021-05-02 21:17:29
422
原创 算法篇一【线性表】：链表及经典问题（二）之链表的反转
【leetcode 141】环形链表https://leetcode-cn.com/problems/linked-list-cycle/submissions/解题思路：定义两个指针，一个快指针，一个慢指针，如果链表有环，快指针一定会追上慢指针。总结：我们只需要遍历整个链表，在遍历的过程中记录我们经历过的节点。如果遇到next节点为null，说明没有还。如果遇到我们以前遍历过的节点，说明有环。C++语言实现：class Solution {public: bool hasCycle
2021-03-22 07:41:15
129
原创 算法篇一【线性表】：链表及经典问题（一）之链表的基础知识和构造链表
链表（List）及经典问题一、链表的基础知识：单向链表什么时链表结构？若干个节点，串成一条链的结构，每个节点都有两个区域，一个是数据域，一个是指针域地址可以唯一的标识一个对象（数组下标（门牌号）是一个特殊地址，数组下标是相对地址的概念）树是树，链表是链表，链表添加一个指针，就是单项链表增加一个指针域。本质上树和链表差多了。单向链表只有一个指针，只能王一个方向走；双向是两个指针，可以两边走。头节点是否存储数据，根据设计程序的需要决定。特点：1、链表中的每个节点至少包含两个部分：数据域和指
2021-03-20 23:36:38
204
原创 装饰器实现过程描述-＞如何使用装饰器写出优雅的代码
装饰器模式装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。**意图：**动态地给一个对象添加一些额外的职责。就增加功能来说，装饰器模式相比生成子类更为灵活。**主要解决：**一般的，我们为了扩展一个类经常使用继承方式实现，由于继承为类引入静态特征，并且随着扩展功能的增多，子类会很膨胀。**
2020-08-22 11:02:25
190
原创 创建对象new Object() 和 Object.create()区分
new Object() 和 Object.create() 创建对象有什么不同之处，先看一个例子： var foo = { something: function() { console.log( "Tell me something good..." ); }};foo.c = 1var a = Object.create( foo );var b = new Object(foo)foo.foo='foo'a.a='a'b.b = 'b'b.some
2020-08-12 11:53:01
1137
原创 egg项目npm/cnpm出错Connect timeout
egg-init脚手架，项目安装使用国内镜像，安装过程老是报错，不是超时就是包不存在，究其原因主要是timeout 超时，改下配置即可报错问题描述：fetching npm info of egg-boilerplate-simpleConnectionTimeoutError: Connect timeout for 5000ms, GET https://registry.npmjs.org/egg-boilerplate-simple/latest -2 (connected: false, k
2020-08-09 10:09:32
2150
1
原创 vue-cli创建的项目，vue.config.js按配置生成favicon
最近开发一个项目基于vue-element-admin进行开发的，它是vue-cli构建生成的项目，项目配置在vue.config.js文件里根据需求favicon根据不同项目显示不同的icon，favicon默认配置在html文件中，每次手动改太麻烦，所以想在配置文件里统一配置favicon的值，每次只需要改一个配置文件就可以了。虾米那介绍配置favicon的方法：方法一：configureWebpack 修改配置项调整 webpack 配置最简单的方式就是在 vue.config.js 中的 c
2020-07-21 21:27:51
2064
原创 react---umi配置国际化语言 locale 踩坑
因为项目创建的比较早,用的是umi2+版本,修改默认语言是英文,官方说直接改配置的defalut,但是我改完并不生效,可能是我的版本呢原因,找了好久,总算找到解决办法的方法了其中我的项目版本使用的umi和国际化插件如下:"umi": "^2.4.4", "umi-plugin-react": "^1.7.2"1 修改默认显示语言,方法如下2 再在app.js加入一下代码小小的问题,可能是版本的原因,尝试了好久,也是挺折腾人的…...
2020-06-26 09:23:35
5987
1
原创 uniapp动态配置底部栏tabBar权限菜单，根据业务需求展示不同的菜单
根据业务需求，有时我们需要针对不同角色展示不同的菜单，uniapp默认的菜单配置就不适用了，但是我们可以自己自定义配置菜单栏步骤如下：1、page.json问价去掉默认的tabBar配置项；2、在component目录下，新建一个tabBar.vue组件,这个组件里就是配置动态的底部菜单栏tabBar.vue代码参考:<template> <view class="uni-tabbar"> <view class="uni-tabbar__item" v-for
2020-06-26 08:57:18
11237
5
原创 使用git单独为指定项目设置用户名和密码
在开发中，经常会有很多个项目，不同的项目可能对应不同的账号密码，全局配置就不适用了，那么，这时候我么需要针对项目取配置账号和密码1、找到项目中.git文件夹，如果没有看到，估计是隐藏起来了，使用git init，就可以看到了。进入.git文件夹git config user.name ‘你的账号名’2、查看git配置文件cating config如下图，会看到git配置里最后一行多了用户名，这就是单独为该项目设置的用户账号3、再执行新增配置git config credential.he
2020-06-26 08:17:07
8027
1
原创 koa中间件实现
const add = (x,y) => x+yconst square = z => z *z//中间件思想，把多个函数进行融合// (...args) 意思是返回新函数// const compose = (fn1,fn2) => (...args) => fn2(fn1(...args))// const compose = (...[first,...other]) => (...args) => {// let ret = firs.
2020-05-30 09:37:12
190
原创 mysql的Workbench和数据可视化简单使用
mysql的Workbench和数据可视化如何使用先安装：下载地址：https://nodejs.org/zh-cn/download/安装教程略：二、打开安装好之后，打开工作台2、新建数据库 test,填写好之后，点击右下角的应用3、创建数据表：选择test数据库，右击设置此连接为默认的数据库，后面所有的操作都在这个数据库进行4、创建表如图：给Table命名，添加Column，设置Column的Datatype，PrimaryKey等属性。点击Apply此时，仍会生成sql
2020-05-24 09:26:25
1706
原创 数组扁平化（flat）、去重(Set)、排序(sort),扩展 ： ES10出现的Array.flat() Array.flatMap()
一、将以下数组扁平化、去重并排序var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];1、扁平化：（注：arr.flat(Infinity) 可以将n维转为一维）let flatArr = arr.flat(4); //flat扁平化4次//arr.flat()..flat() = ...
2020-04-26 12:07:34
387
原创 VUE源码学习之数据响应式-----代码调试
学习调试源码，通过一个data响应式实现的问题来探讨：data: { obj: { foo: “foo” } } 有几个Observer，几个Dep，几个watcher？调试vue源码1、State.js：断点：1）initData(vm)—53行2）Observe() --151行—开始对data数据进行响应式2、进入observe()方法里面进行观察：observe/index....
2020-04-14 09:55:11
197
原创 css的line-height和vertical-align布局问题
当元素的 CSS 属性display 的计算值为inline, inline-block 或 inline-table 时，称它为行内级元素。行内级元素生成行内级盒(inline-level boxes)，参与行内格式化上下文(inline formatting context)。同时参与生成行内格式化上下文的行内级盒称为行内盒(Inline boxes)。
2020-03-25 11:33:52
282
原创 vue-cli 安装，查看版本，更新版本，以及如何查看webpack配置命令
1、vue-cli安装npm install vue-cli -g2、vue-cli的版本查看（注意-V大写）vue -V 3、vue-cli的3.0+以后使用的不是vue-cli了，如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的npm install @vue/cli -g4、如果之前已经安装了，先卸载再安装新的npm uninsta...
2020-03-22 09:27:04
20076
原创 前端跨域问题和解决方法
1 为什么会出现跨域？由于浏览器的同域策略的限制，也是为了安全起见，防止浏览器的正常功能可能会受到影响，同源策略会阻止一个js脚本和另一个域的内容进行相互补充。2、什么是跨域？当一个请求url的协议（protocol），主机（host）和端口号（port）三者之间任意一个与当前页面的url不同就是跨域。3、解决跨域的方法：【1】设置document.domain解决无法读取非同源网页的...
2020-03-17 14:34:50
190
原创 深入理解函数的预解析和作用域
先了解什么是预解析与解析步骤：第一步：代码还没执行，预览页面之前，写完之后1、找程序中的var关键字，如果找到了提前给var定义的变量赋值undefined；2、找程序中的普通函数，如果找到了，函数提升，将整个函数赋值给函数名；3、如果找到的var的名字和函数名相同，函数优先。第二步：逐行解析代码，按照上下文顺序。如果碰到函数定义，忽略。看代码理解：例1：function fun...
2020-03-17 10:48:56
260
原创 构造函数 和 this
一、 构造函数一般以大写字母开头(大写小都可以，规范是大写开头)function Fruits(type= "apple", color= "red") { this.type= type; this.color= color;}二、构造函数会执行以下几个过程：（1）使用new关键字调用时，会创建一个新的内存空间（2）函数体内部的this指向该内存（3）执行函数体内的...
2020-03-16 17:18:19
384
原创 ES6之new Set()
Set对象存储的值总是唯一的一、Set对象方法：1、add ： 添加某个值，返回Set对象本身；2、clear ： 删除所有键/值对，没有返回值；3、delete ： 删除某个键，返回true。若删除失败，返回false；4、 forEach ： 对每个元素执行指定操作；5、 has ： 返回一个布尔值，表示某个键是否在当前Set对象中；add添加某个值，返回Set对象...
2020-03-16 10:55:16
504
原创 vue中input按照一定的规则输入，不符合规则输入不进（vue输入框input只允许输入数字，并保留一位或两位小数）
自己写了一个自定义，只允许输入数字的input，把不符合规则的输入过滤掉：onInput(e) { let cval = e.target.value; cval = cval.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符 cval = cval.replace(/^\./g, ""); //验证第一个字符是数字而不是 cva...
2020-03-02 20:21:36
2562
1
原创 vuex状态管理（一）实现原理
vuex实现源码：1、维护状态state2、修改状态commit3、业务逻辑控制dispatch4、状态派发getters5、实现state响应式6、插件7、混入vux实现源码kvuex.js：let Vue;//安装插件function install(_Vue, storeNamr = "$store") { Vue = _Vue; //混入目的：把st...
2020-02-13 01:38:23
526
原创 vuex状态管理（一）基本用法
vuex核心概念：1 State 状态、数据2 Mutation 更改状态函数3 Action 异步操作4 store包含以上概念的容器引入：npm install vuex --savestore.jsimport Vue from "vue";import Vuex from 'vuex';Vue.use(Vuex)export default new Vuex.Sto...
2020-02-13 01:25:58
101
原创 Vue搭建项目，配置方法和注意事项
一、搭建项目：1、安装vue-cli脚手架:安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。npm install --global vue-cli2、创建项目vue init wepack my-project3、打开项目+运行：cd my-projectnpm run dev二、开发编辑器配置此处使用vs code编辑器1）安装可识别vue的...
2020-02-10 22:32:34
380
原创 h5应用获取当前位置，计算到商家距离，并调用地图导航应用的实现
baidu地图使用介绍：文档：http://lbsyun.baidu.com/index.php?title=jspopular1、获取位置、计算距离：1）使用baidu的map，先申请密钥:申请密钥(ak)地址：http://lbs.baidu.com/apiconsole/key?application=key2）引入api:function MP() { const ak = '...
2020-02-10 11:52:46
1492
原创 Redux Flow 数据流理解
redux 数据流解释：1、React components 是react的组件库2、Store是一个大仓库， 用于存储公用的数据，一个项目只用一个store，放在最外层App.js，所有子组件都可以调用3、Action(意思：行动) 所有的事件都放在action里面，通过dispatch方法执行到store，store里面都是数据，4、Reducers （是一个纯函数）store和...
2020-02-05 00:47:44
283
原创 react全家桶之router（三）拓展：BrowserRouter、Route、Link实现源码
react-router 秉承一切皆组件，因此实现的核心就是BrowserRouter、Route、Link一、实现BrowserRouterBrowserRouter: 历史纪录管理对象history初始化及向下传递，location变更监听...
2020-02-03 13:46:01
770
原创 react全家桶之router（二）路由守卫
前言：项目中访问页面时需要判断用户是否登录来设置权限实现思路：创建高阶组件包装Route使用，具有权限判断功能1、创建PrivateRoutecomponents/PrivateRoute.jsimport React, { Component } from 'react';import { connect } from "react-redux";import { Route, Re...
2020-02-02 16:11:54
286
原创 react全家桶之router（一）基本使用
react-router包含3个库，react-router、eact-router-dom(在浏览器中使用)和react-router-native（在rn中使用）。react-router提供最基本的路由功能。react-router-dom和react-router-native都依赖react-router，所以在安装时，react-router也会⾃动安装安装：npm instal...
2020-02-02 15:54:29
230
原创 redux之react-redux实现原理
Redux Flow一、先介绍redux：1、reducer念：reducer就是一个纯函数，接收旧的state和action，返回新的state。(previousState,action)=>newState;名字由来：Array.prototype.reduce(reducer,initValue)里的回调函数属于相同的类型。reduce解释：https://www.run...
2020-02-01 13:56:18
518
原创 react-media高阶组件实现媒体查询
开发一个项目需要自适应移动端的，需要每个页面进行媒体查询，比较麻烦，封装一个高阶组件，直接引入即可，方便快捷步骤如下：1、先安装依赖：npm install react-media --save2、建立一个组件文件：HocMedia.jsimport React, { Component } from 'react'import Media from 'react-media'con...
2020-01-29 22:55:02
4071
原创 react 状态state异步转化为同步的3种方式
setState在钩子函数和合成函数里是异步的执行的，setTimeout和setInterval是同步的要获得同步数据，有3中方法：1、传递函数给setState方法 this.setState((prestate, props) => ({ count: prestate.count + 1 }));2、使用定时器setTimeout ...
2020-01-26 16:50:42
4649
原创 React组件的两种形式
react组件有两种形式：class 和 function1、class组件class组件通常拥有状态和生命周期，继承与component，实现render方法创建Home组件：import React, { Component } from 'react'export default class Home extends Component { constructor(p...
2020-01-26 14:34:29
585
原创 vscode 编辑器快速生成代码
vscode扩展搜索 ES7 React/Redux/GraphQL/React-Native snippetsd或React-Native/React/Redux snippets for es6/es7 并安装1、在vscode扩展中搜索：点击下载安装。2、新建js文件，1)如果安装的是：ES7 React/Redux/GraphQL/React-Native snippetsd输...
2020-01-26 13:45:25
2863
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人