- 博客(105)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 表格封装之 useTable 封装
封装 useTable 可以实现基于配置化得到表格的数据、分页的数据等参数，基于 useTable 的结果封装 Table 组件。
2024-01-04 18:19:11
1328
原创 表格封装之 useForm 封装
封装 useForm 可以实现基于配置化得到 formValue、column、onReset，基于 useForm 的结果封装 Form 组件。
2024-01-04 14:51:30
1229
原创 通过 nvm 管理 Node 版本
nvm 就是一个 Node 版本管理器，它可以在一台机器上安装和切换多个 Node 的版本，使用起来非常简单方便。
2024-01-03 15:25:57
404
原创 TypeScript 面试题
typescript可以自动推导变量的类型，而无需显式的指定类型；当你申明的变量没有指定类型时，typescript会根据变量的初始值与上下文推导出变量的类型。// 初始值类型推导 string// 函数返回值 number类型拓宽是编译器在某些情况下自动将类型拓宽为更宽泛的类型。age: 28,类型缩小是通过条件判断来缩小变量的类型范围。// 类型缩小为 number')模块化是将代码拆分为独立的块，各自封装，相互独立，同时自行决定引入执行哪些外部模块以及暴露自身模块。在typescript。
2023-10-12 10:40:08
153
原创 配置 Git Husky 代码提交约束
通过 `husky` 可以自动化地运行脚本，避免了手动操作的繁琐性，提高了效率，保证了代码质量和规范性。
2023-03-30 16:24:28
2923
1
原创 基于 Promise/A+ 规范手写 Promise
Promise是基于发布订阅模式实现的。then方法对于还在pending的任务，将回调函数和onRejected存入数组。Promise的resolvereject方法将数组中的方法依次执行方法会返回一个新的Promise方法以便链式调用。
2023-02-28 09:15:10
199
原创 设计模式之发布订阅模式
发布订阅模式是一种设计模式，它是一种编程思想，它可以帮助我们解决”回调地狱“的问题。Promise也是借鉴了发布订阅设计模式的思想来实现的。
2023-02-20 09:10:52
502
原创 Plop 简化重复工作流，维持团队代码一致性
通过命令式交互，简化工作流程，拒绝复制粘贴，减少重复机械性的工作，同时也能统一团队代码的一致性，是前端工程化实践中值得去尝试的工具。
2022-11-10 21:27:17
413
原创 provide/inject 依赖注入
provide/inject 依赖注入相比 props，极大的减少了依赖嵌套，使得代码更加的简洁并且利于维护，日常开发中要思考多加思考是否能够依赖注入解决问题。
2022-09-05 08:46:28
382
原创 为什么不要使用setInterval绘制动画
定时器将我们的任务放入到异步队列中执行，只有当主线程上的任务执行完成后才会去检查异步队列的任务是否需要执行。
2022-07-15 08:00:26
273
原创 前端项目打包优化
性能优化的目的就是如何让页面加载的更快或者说如何让用户感觉到很快，当页面加载速度大于 ，用户可以感知到白屏的存在；当页面加载速度大于 ，用户会觉得烦躁以及会关掉页面。所以性能优化在前端是非常重要！...
2022-07-03 11:43:55
2958
原创 【已解决】解决 JSX 元素类型“ElAside”不具有任何构造签名或调用签名 报错提示的问题。
解决 JSX 元素类型“ElAside”不具有任何构造签名或调用签名 报错提示的问题。
2022-06-08 22:35:30
2681
2
原创 Router中Hash和history的简单实现
Router 是路由管理工具，Vue,React 中分别常用的是 vue-router 和 react-router-dom。在探究其实现原理前，我们先来复习一下 Location 对象Location 对象中包含有关当前 URL 的信息。而当浏览器 URL 发生改变后 PopStateEvent 事件。window.addEventListener('popstate', e => { console.log(e);});在 vue-router 和 react-router-d
2021-08-17 11:14:00
232
原创 你可能真的不会用sticky
position: sticky 是开发中相对高频的一个用法，不过在最近的项目中竟然被我玩翻车了，设置了sticky尽然不生效了，于是便想一探究竟。元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top,right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
2021-08-13 15:36:17
970
1
原创 CSS clip-path 运用
偶然间接触到 clip-path 的 CSS 属性，接的挺有意思，想着记录一下。clip-path 是通过裁剪元素的方式显示裁剪的指定区域。通俗来说就是像剪窗花一样。根据 MDN 官方的实例，裁剪一共有四个属性，他们分别是 inset | circle | ellipse | polygon | pathinset 向内部剪裁circle 按照圆形裁剪ellipse 按照椭圆形剪裁polygon 按照多边形裁剪基于以上的一些用法，我们可以想到 Tips 提示的用法，之前使用的拼接的方法
2021-06-18 16:56:29
401
1
原创 基于 Vite 2.x 的 Vue 3.x 项目的搭建
Router 4.x 需要搭配 Vue 3.x 进行使用，通过 Vite 进行创建一个 Vue 3.x 的项目就可以上手 Router 4.x。创建 Vue 3.x 项目npm init @vitejs/app my-vue-app --template vue-ts此处创建的是 Vue 3.x + TypeScript 项目 引入 Router 4.xnpm install vue-router@4 --save配置路由在 Vue Cli 中，我们可以直接使用命令进行添加，但是在 Vu
2021-03-11 10:38:33
372
原创 JavaScript 中 Long 类型 尾数舍去 和 Double类型 科学计数法 的问题
Long 类型 尾数舍去 的问题Long 类型的数据在 JavaScript 中会出现尾数舍去的情况， 比如说 后端一个数为 864943364894076928 但是在 JavaScript 中为 864943364894076900，尾数直接被舍去。console.log(864943364894076928)864943364894076900遇见这种情况下，我们一般想到的是后端为我们处理，将 Long 类型转化为 String 类型，其实前端也是可以处理的。JSONBig 是一个第三方
2021-01-23 10:33:04
888
原创 记一次SPA项目打包优化的过程
前言在完成spa 项目打包上线后，最让人困扰的一个spa的缺点就是首屏加载事件过长，在之前的解决方案中我们通常是添加一个loading页面来减少用户等待所带来的焦虑感，但是这样的解决方案治标不治本，我们还需要从根本出发。文章目录前言原因分析解决方案移除第三方插件引入在线CDN开始gzip压缩细节优化问题总结原因分析首先我们分析spa项目的解析原理，从浏览器内输入地址后开始下载静态资源，静态资源下载完成后在执行reader渲染元素节点。通过浏览器 F12 中查看文件下载的速度，结果发现 chunk-v
2020-12-05 18:21:31
521
原创 Vue 中引入 Less
1. 安装style-resources-loadervue add style-resources-loader2. 安装lessnpm install less less-loader --save-dev3. 全局引入公众样式const path = require('path');module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less',
2020-09-11 15:09:27
507
3
原创 最简单的 tradingview 连接我的数据实时渲染带你入坑！！！
tradingview 是什么？当你点开这片博文的的时候相信不需要我介绍你也应该知道tradingview是什么的工具了，而我也是刚接触这个工具不久，国内的资料少之又少，在掉落99根头发的情况下可以简单的运用，特此在此处记录一下，希望正在看博客的你可以少掉一些头发~申请图表库准备好公司的营业执照与公章，进入官网申请授权。申请需要等待7个工作日，届时会有工作人员和你邮箱联系。收集了一些资源在下方链接，你可以在申请期间阅读查看，不过这有些难度。1.tradingview 申请地址2.github
2020-09-11 11:39:13
8519
11
原创 dva/dynamic LoadingComponent 属性实现路由切换的加载效果
前言我们使用的dvajs项目中我们一般使用dva/dynamic进行路由动态加载解决引入models的问题，但是随之而来的一个新的问题就出现了，当每次进入新的页面的时候总会有一段js执行的时间是空白的状态对于客户的体验感不是很好。文章目录前言LoadingComponent属性二、使用步骤1.引入加载组件2.定义组件3.路由配置总结LoadingComponent属性在dva/dynamic中有一个隐藏属性LoadingComponent属性，这个属性是知道js执行完成渲染页面前显示的组件。
2020-09-09 17:38:31
1124
原创 App与H5交互的几种方式
文章目录App与H5交互1、直接调用App的定义的方法2、调用方法获取数据3、暴露方法给App调用传值总结App与H5交互在App内置H5中，我们H5页面经常会与App进行交互，本文中将记录几种常用的交互方式，可能不太完善，欢迎大家补充~1、直接调用App的定义的方法toLogin: () => { if (window.webkit && window.webkit.messageHandlers) { // Ios 客户端调用方法 window.w
2020-09-09 17:19:05
5652
4
原创 html2canvas 在IOS手机中浏览器出现白屏和微信无法截图的解决方案
每次开始截图前是浏览器置顶window.scrollTo(0,0);白屏和微信无法截图是可以尝试降低版本，如果还无法解决可以使用大神的方案 https://github.com/FEA-Dven/html2Canvas// 引入import html2canvas from "../../lib/html2canvas";// 使用, 全局window对象加入html2canvas，如果没有window就调用原来的，所以需要做判断(window.html2canvas || html2canv
2020-09-02 16:46:33
1856
原创 解决客户端缓存的问题
缓存分为服务端缓存和客户端缓存，服务端缓存一般都是让运维去清理一下缓存，剩下来的缓存就需要前端或者前端和后台协同解决了。为什么会缓存？浏览器的缓存真的是让人又爱又恨，他可以帮助我们加快页面响应速度，同时也会带来开发中的困难。当浏览器读取相同的文件名时，浏览器会去读取缓存中的文件，而不是从服务端读取文件，这样就造成了服务端修改了页面客户端确迟迟不显示。解决思路让浏览器读取的文件名每次都不一致就可以解决客户端缓存的问题。情况一图片是由后台传输的，但是每次返回的地址是一样的，这样就算服务器更换了文件，
2020-08-12 21:04:52
1068
原创 React 项目兼容低版本浏览器
兼容低版本浏览器真的是让人头大，不过现在好在有框架鱼插件的运用，让我们轻松的兼容低版本浏览器，本文中以 DvaJS Cli 举例下载 react-app-polyfill 和 core-js 插件npm install react-app-polyfill core-js --save使用插件在 ./src/index.js 的最上方引入插件import 'core-js/es' import 'react-app-polyfill/ie9' // 引入兼容的版本，一般ie9就可以了im
2020-08-12 20:39:32
3953
原创 部分 React Hooks 的运用
目录前言useMemouseRefuseContextuseReducer前言在 React Hooks 中，分为基础 Hook 和额外的 Hook ，这之前的文章中有写到过基础的 Hook 中的 useState和useEffect的运用，那么今天就跳过这两个 Hook 继续向下介绍部分 Hook ~useMemouseMemo 是可以作为性能优化，把创建函数和依赖项作为参数，它仅仅在依赖项改变时才会重新计算。import React, { useState, useMemo } from 'r
2020-07-29 17:00:23
105
原创 Vue CLI 3+ 多页面项目的搭建
在使用 Vue CLI 搭建项目时，我们需要先检查 Vue CLI 的版本，本篇文章主要记录在 Vue CLI 3 以上的版本中搭建多页面项目。刚接手公司的项目的是Vue CLI2 版本的，所以会在目录中的 build 和 config 文件夹内进行配置，而 Vue CLI3 以上的版本直接通过 vue.config.js 文件中进行配置，这个文件默认不存在，我们需要手动添加。...
2020-07-28 18:19:45
293
原创 React DvaJS组件接收状态得两种方式
以下示例均在DvaJS环境中moldes中的cms.js文件下。同一页面渲染的不同组件// ./index/index.jsimport Home from './home';@connect(({ layout, share, index, list, cms }) => ({ layout, share, index, list, cms }))// ./index/home.jsconst Home = ({ dispatch, index, cms, setSelected,
2020-07-25 01:11:53
241
原创 DvaJS 的核心概念
DvaJS 概念DvaJS是一个轻量级的框架，其共有6大核心概念，分别为State、Action、dispatch函数、Reduer、Effect和Subscription。数据流向通过 dispatch 发起 action，同步直接 Reducers 改变 State，异步则触发 Effects 流向 Reducers 改变 State。StateState 是Model的状态数据，export default { // 命名空间 namespace: 'example', sta
2020-07-25 00:56:02
227
原创 State Hook 与 Effect Hook 的运用
目录Hook 是什么？State HookEffect HookHook 是什么？Hook 是一个特殊的函数，可以使你不编写类组件的情况下使用state以及其他React的特性。State Hookimport React, { useState } from 'react';function Example(){ // 创建一个变量count，创建一个改变变量count的方法setCount,并且设置变量初始值为0; const [count, setCount] = useState(
2020-07-22 20:31:53
195
原创 git的使用以及远程仓库（github、gitlab）的关联使用
目录GIT是什么？GIT BashGIT Bash 常见的命令GIT的使用GIT的工作流程配置用户名和邮箱创建git项目初始化git文件夹查看文件的状态提交到暂存区还原到工作区提交到本地仓库查看提交日志切换任意版本查看分支创建分支切换分支合并分支删除分支强制删除分支本地仓库与远程仓库关联ssh配置关联远程仓库测试通信本地仓库和远程之间的通信克隆项目发布项目提交(本地-远程)更新(远程-本地)GIT是什么？Git是一个分布式版本控制系统，可以为我们搭建本地代码仓库，也可以与Github，GitLab简历连
2020-07-20 21:22:40
1043
原创 记录React 的安装与运用以及生命周期
目录下载创建下载首先需要确保NodeJS在较新的版本，输入以下命令可以下载搭建本地环境。npx create-react-app my-app进入项目目录后输入命令 npm start 启动项目。创建
2020-06-23 19:58:36
140
原创 vue在history模式下刷新页面404
在vue的项目中我们为了美化路由而选择history模式，但是使用了history模式时刷新页面会出现404。import Vue from 'vue'import VueRouter from 'vue-router'import Nav from '../views/Nav.vue'Vue.use(VueRouter)export default new VueRouter({ mode: 'history'}）造成这种原因是因为服务端并不能够解析，所以我们需要在服务端进行解
2020-06-14 20:18:25
974
2
tradingViewWikiCn.zip
2020-09-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人