伍哥的传说-CSDN博客

原创 Vue3 element-plus 中使用 sheetjs xlsx 导入导出 Excel

由出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xlsxlsxods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

2023-05-27 00:06:03 1314

原创 JavaScript代码出现栈溢出之尾调用优化

说栈溢出之前，我们先来一起学习下调用栈，为什么了什么是 javascript 调用栈javascript 引擎是利用栈的这种数据结构来管理执行上下文的。在执行上下文创建好后，javascript 引擎会将执行上下文数据压入栈中，通常把这种用来管理执行上下文件的栈称为执行上下文栈，又称调用栈。可以帮助了解 javascript 引擎的工作原理更好的调试 javascript比如你在开发代码时，有时候可能会遇到栈溢出的错误，如下图所示：function runStack(n, resul

2022-03-12 19:00:30 1135

原创 vue-cli 之 jest、@vue/test-utils 单元测试实践

安装 vue 项目安装脚手架npm install -g @vue/cli创建项目vue create vue-demo安装步骤用例1：renders 组件// HelloWorld.vue<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template><script>export d

2022-03-05 20:49:55 1658

原创 Rollup 如何封装自己的工具库详解之DAG 有向图判断是否有环

介绍Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。官网

2021-09-12 13:41:37 361

原创 npm 开源模块，如何配置属于本模块的命令集，全局、局部安装可以使用该命令

其实要配置属于查模块专属命令并不复杂，只需在 package.json 里配置 bin 属性就可以了，下面我们通过一个列子来说明// package.json "bin": { "tracelib": "./bin/tracelib.js" },#!/usr/bin/env nodeconst fs = require('fs');const path = require('path');const package = require('../package.json');

2021-09-10 20:57:31 194

原创 webpack的DllPlugin、DllReferencePlugin插件使用，提升打包速度之旅

webpack.dll.js'use strict'const path = require('path');const webpack = require('webpack');const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = { mode: 'production', entry: { vue: ['vue'], vueRouter: ['vue-rou

2021-08-30 22:50:10 348

原创 gulp 如何运用 babel 来打包项目中 es6 的新特性

什么是 babel ? 在前端项目中他能做什么了？Babel 是一个工具链，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。以下是 Babel 可以做的主要事情：转换语法源代码转换(codemods)简而言之，在前端开发过程中，大家会用很多 es6 的新特性，比如箭头函数、class、解构、Promise、async / await等。这些新的特性，简洁的语法、强大的功能，就好比给前端程序员插上了一对自由自由翱翔翅

2021-08-07 00:58:37 919

原创 @antv/x6、@antv/x6-react-components X6 图编辑引擎在 react typescript 项目中实践

X6 图编辑引擎X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。说明文档：https://x6.antv.vision/zh/docs/tutorial/about源码import React, { useEffect, useState } from 'react'import './index.scss'import { GithubOutlined, UserOutlin.

2021-07-28 23:36:53 2256

原创 vue 如何开发封装自己的公共组件库，并发布到 npm 上

一、全局安装 vue-cli 脚手架，使用 vue init webpack-simple yyl-npm-practice 初始化项目初始化项目后 npm install ; npm run dev，项目就能跑起来了。下面我们来试着封装一个属于我们自己的公用组件 Button在 src 目录下新建一个 components 存放自定义组件// Button.vue<template> <button :class="classes" type="button" @cl

2021-07-11 15:00:24 1783

原创 redux-saga 使用详解说明

redux-saga是一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的 library，它的目标是让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。可以想像为，一个 saga 就像是应用程序中一个单独的线程，它独自负责处理副作用。redux-saga是一个 redux 中间件，意味着这个线程可以通过正常的 redux action 从主应用程序启动，暂停和取消，它能访问完整的 redux state，也可以 dispatch redux a...

2021-07-08 20:47:46 1355

原创 react、react-redux、redux-thunk、react-saga运用

动机随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。三大原则单一数据源整个应用的state被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个store中。State 是只读的唯一改变 state 的方法就...

2021-07-08 20:46:34 278

原创 react proxy 详解，跨域配置 proxy is not a function

一个前后端分离的项目，本地联调，跨域配置至关重要。传统设置浏览器跨域设置这里就不继续累赘了。网上很多教程都在 “package.json” 里边设置"proxy": { "/api": { "target": "http://localhost:3001" }}初接触的小伙伴，直接按这种方式都做了发现有问题，结果项目都起不来了。When specified, “proxy” in package. json must be a string.Instead, th

2021-07-08 20:44:38 1366

原创 React.memo、React Hooks 里 useMemo 和 useCallback 的区别及运用

useMemo用来缓存数据，当组件内部某一部分渲染的数据（组件），需要通过计算而来，这个计算是依赖与特定的state、props数据，我们就用 useMemo 来缓存这个数据，以至于我们在修改她们没有依赖的数据源的情况下，多次调用这个计算函数，浪费计算资源。import React, { useState, useMemo } from 'react';function UserInfo(props) { const [ name, setName ] = useState('');

2021-06-27 14:13:41 338

原创 vue-ssr 服务端渲染

server 配置const Koa = require('koa');const Router = require('koa-router');const serve = require('koa-static');const path = require('path');const fs = require('fs');const backendApp = new Koa();const frontendApp = new Koa();const backendRoute...

2021-06-27 11:24:34 245

原创 React Hooks 状态的分层设计、自定义 hook

react-hooks 是 react16.8以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。react-hooks思想和初衷，也是把组件，颗粒化，单元化，形成独立的渲染环境，减少渲染次数，优化性能。React Hooks是React框架内的逻辑复用形式，因其轻量、易编写的形态，必然会逐渐成为一种主流。但在实际的开发中，我依然觉得大部分的开发者对hook的使用过于粗暴，缺乏设计感和复用性。在运用状态的过程中，颗粒化太细

2021-06-27 11:16:43 355

转载 React Hook Form 表单校验库

React 表单校验库React Hook Form是一个高性能、灵活、易拓展、易于使用的表单校验库，用于React Web＆Native的表单验证。特性使创建表单和集成更加便捷非受控表单校验以性能和开发体验为基础构建迷你的体积而没有其他依赖遵循 html 标准进行校验与 React Native 兼容支持Yup, Joi, Superstruct或自定义支持浏览器原生校验从这里快速构建你的表单原生表单中应用import React from 'react.

2021-06-27 11:08:08 1225

转载头条批量关注发消息,按键精灵自动化脚本

脚本代码Dim messageStr = array("你好！","hello!","1很高兴认识你！","2很高兴认识你！","3很高兴认识你！","4很高兴认识你！","5很高兴认识你！","6很高兴认识你！","7很高兴认识你！","8很高兴认识你！","9很高兴认识你！","10很高兴认识你！","11很高兴认识你！","12很高兴认识你！","13很高兴认识你！") //发消息内容Dim ygzPos = 1 //定义点第几个已关注(头条号)Dim sendTotal = 5 //定义发

2021-06-27 11:05:11 1385

前端开发-前端技术分享