- 博客(73)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 关于导出的Excel文件的本质
上篇文章中提到关于xlsx改造冻结窗格的代码，我是怎么知道要加pane的呢，加下来就把我的心路历程记录一下。我改造之前也是没有头绪的，我网上查了很多，只告诉我如何使用，但源码里没有针对!freeze的处理，所以即便把!freeze传过去也是无用的。于是我想既然js可以实现excel的导出，那应该有办法能实现，只是原作者写到pro版里了，那么我能不能加上呢，如何加呢？我先贴上部分代码。
2023-10-11 18:51:48
634
原创 xlsx冻结单元格
其实SheetJs也是支持修改导出文件的样式的，不过是在它的专业版中， SheetJs 分为社区版和专业版，社区版是开源的，但是却不支持修改导出文件的样式，专业版拥有更多的功能，这其中就包括修改样式，但是如果需要使用专业版，要邮件联系SheetJS 的开发者，去咨询价格，购买它。文件，并且对导出文件的样式进行一些修改，比如颜色、字体、合并单元格等，所以我找到了xlsx-style这个项目，它可以对导出的。xlsx版本不同，改造的文件内容也是不用的，不过改动的地点都差不多，下面针对不同版本的改造进行说明。
2023-10-11 17:54:49
522
3
原创 mac真机调试h5攻略
对于mac，需要安装android和adb配置，才可以在chrome的调试工具中看到将要调试的页面。安装后需要配置adb，参考以下文章：https://www.jianshu.com/p/61339291c9e2。如果查看手机设备时，已添加的设备不是devices，而是【command not found: adb】，则需要刷新环境变量【source .bash_profile】。如果第一次配置环境变量，则该文档应该是空的。该命令的作用是如果不存在.bash_profile文件，则创建该文件；
2023-04-27 17:02:41
1954
原创 vconsole调试工具报错及解决方案
第一次遇见调试工具报错，无法正常使用，后来经过真机调试，发现是服务端开启了安全模式openSecurity=true, vconsole无法写入style,导致js报错。vue h5项目，想在手机上调试，装了vconsole调试工具，打包部署后发现在苹果手机上显示正常，在安卓手机上显示异常：底部显示了。2. 将npm install vconsole 改为 通过cdn方式引入vconsole, 样式通过style src 引入。1. 关闭openSecurity。
2023-04-27 16:00:53
1486
原创 性能分析收藏地址
Chrome的Performance面板 - 简书如何监控 JavaScript Web 应用内存及内存问题初解_WJP丶的博客-CSDN博客javascript 释放内存（js如何释放闭包内存）_小熊移动
2023-03-13 09:57:00
70
转载 js性能优化注意事项
一．执行效率1. DOM1.1 使用DocumentFragment优化多次append说明：添加多个dom元素时，先将元素append到DocumentFragment中，最后统一将DocumentFragment添加到页面。该做法可以减少页面渲染dom元素的次数。经IE和Fx下测试，在append1000个元素时，效率能提高10%-30%，Fx下提升较为明显。服用前：for (var i = 0; i < 1000; i++) { var el = document.creat
2023-03-13 09:49:39
363
转载 排查Javascript内存泄漏
简单总结一下排查内存泄漏的常见流程： 1. 用performance面板记录操作一段时间内的内存变化，找出可能发生内存泄漏的操作。2. 用“three snapshot”技巧，记录下发生泄漏前后的内存快照 3. 用comparison视图对泄漏前后的内存快照进行比较，找出泄漏的对象。4. 重点关注 Vue Component, Detached HTMLDivElement等Constructor。希望这篇文章对同样在排查内存泄漏问题的你有所帮助 :)
2023-03-13 09:46:02
568
原创 requestAnimationFrame实现由快到慢的锚点定位滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>锚点定位</title> <style> * { margin: 0; padding: 0; } .tops { position: fixed; top: 0; le.
2022-03-09 16:23:08
557
转载 es6中symbol类型的应用
应用场景1：使用Symbol来作为对象属性名(key)在这之前，我们通常定义或访问对象的属性时都是使用字符串，比如下面的代码：let obj = { abc: 123, "hello": "world"}obj["abc"] // 123obj["hello"] // 'world'而现在，Symbol可同样用于对象属性的定义和访问：const PROP_NAME = Symbol()const PROP_AGE = Symbol()let obj = { ..
2022-02-27 16:48:45
344
原创 原型和原型链
原型JS声明构造函数(用来实例化对象的函数)时，会在内存中创建一个对应的对象，这个对象就是原函数的原型原型规则1. 所有的引用类型（数组、对象、函数）都具有对象特性，即可自由扩展属性（除了“null”以外）var obj = {}; obj.a = 100;var arr = []; arr.a = 100;function fn() {}fn.a = 1002. 所有的引用类型（数组、对象、函数） 都有一个__proto__属性(隐式原型)，属性值是一个普通的对象// 继
2022-02-26 18:17:03
152
1
原创 qiankun报错调试小技巧
有时候single-spa可能会报一些我们现在无法理解的错误，我们可能需要去做代码调试，阅读源码时碰到不理解的地方也需要编写示例 + 单步调试，但是默认的是已经打包压缩后的代码，不太方便做这些，大家可以在node_modules目录找到single-spa目录，把目录下的package.json中的module字段的值改为lib/single-spa.dev.js，这是一个未压缩的bundle，利于代码的阅读的调试，当然需要重启应用。====================================
2022-01-20 09:56:07
919
原创 git常用命令
切换dev分支git checkout dev创建dev分支 并拉取远程分支git checkout -b dev origin/dev创建dev1分支git checkout -b dev1拉取远程dev1分支git pull origin dev1git push -u origin master 上面命令将本地的master分支推送到origin主机，同时指定origin为默认主机，后面就可以不加任何参数使用git push了。合并分支：git checkout dev
2022-01-20 09:36:57
652
原创 mac安装nvm-sh
如果之前安装了nodejs，需要先卸载nodejs卸载命令：1，命令行输入：which node #查看node安装位置，一般都在/usr/local/node2，命令行输入：sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}安装nvmcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/in
2022-01-19 14:20:59
1110
原创 chrome真机调试Android
1. 打开Android手机的调试模式将手机与电脑用数据线连接，确保电脑上安装了手机的驱动，手机打开调试模式2.打开chrome, 输入网址： chrome://inspect/#devices点击inspect按钮，会弹出一个新的窗口，上面会显示手机上的页面如果打开白屏，可以尝试下翻墙或代理...
2021-11-18 15:38:29
3119
原创 Node.js REPL(交互式解释器)
Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境，类似 Window 系统的终端或 Unix/Linux shell，我们可以在终端中输入命令，并接收系统的响应。Node 自带了交互式解释器，可以执行以下任务： 读取- 读取用户输入，解析输入的 Javascript 数据结构并存储在内存中。 执行- 执行输入的数据结构 打印- 输出结果 循环- 循环操作以上步骤直到用户两次按下ctrl-c按钮退出。或输...
2021-11-17 15:26:00
763
原创 vscode设置背景图，并解决【不受支持】的问题
一.设置背景图1.在扩展程序中搜索【background】插件进行安装2.打开设置，在搜索中输入background，选择扩展中的plugin background，选择在setting.json中编辑3. 在settings.json中输入以下代码，保存，重启vscode{ ... //其他配置信息 // background配置信息 "background.enabled": true, "background.useDefault": fals
2021-10-13 13:12:37
3336
1
原创 Axios取消请求 - CancelToken
Axios官网axios中文文档|axios中文网 | axios (axios-js.com)http://www.axios-js.com/zh-cn/docs/#%E5%8F%96%E6%B6%88案例：import request from '@/utils/request'import axios from 'axios'export function queryUserInfo(data, _this) { const CancelToken= axios.CancelTok
2021-09-28 13:12:03
149
原创 vue lib 打包后的cdn引用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wb.
2021-06-08 13:46:03
213
原创 GIT 创建VUE-CLI项目遇到上下选择失效问题
GIT 创建VUE-CLI项目遇到上下选择失效问题vue create 项目名称改成winpty vue.cmd create 项目名称
2021-05-27 10:18:09
311
原创 vue项目npm run serve启动成功，但页面报Vue is not defined的解决方案
vue项目，npm run serve运行成功，但在浏览器上输入地址，报Vue is not defined错误原因是把通过cdn引入的文件给拆分了单个字符，如下图出现问题的原因：public/index.html文件里面，使用cdn加载js的代码是这样的//public/index.html<!-- 使用CDN的JS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn &&
2021-05-25 13:17:41
4410
3
原创 解决ie浏览器el-select选择后出现光标的问题
使用element-ui中的el-select, 作为切换当前用户的状态（在线，忙碌，离开），在chrome浏览器下显示是正常的，但在ie（11）浏览器下，切换用户状态后，会出现光标闪烁的问题，如下图，‘忙碌’后面是闪烁的光标解决方案：因为是input引起的，我们只需要给input加上UNSELECTABLE属性，让UNSELECTABLE=“on”即可，这里我们不用ref获取dom，使用id，可以直接定位到input, 直接给input添加属性。代码如下：<el-select
2021-05-20 15:57:09
2255
原创 在函数组件中使用react-redux
创建redux/hooks.ts文件import {useSelector as useReduxSelector, TypedUseSelectorHook} from 'react-redux';import { RootState } from './store';export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector;store.js文件const store = cr
2021-04-22 18:19:25
1355
原创 类组件中使用react-redux
react-redux 官网地址：https://react-redux.js.org/安装react-reduxnpm install react-redux在index.tsx文件中，引入react-reduximport store from './redux/store';import {Provider} from 'react-redux';ReactDOM.render( <React.StrictMode> <Provider sto.
2021-04-22 17:28:45
959
原创 redux的使用
设计思想（1）Web 应用是一个状态机，视图与状态是一一对应的。（2）所有的状态，保存在一个对象里面。基本原则整个应用只有唯一一个可信数据源，也就是只有一个 Store State 只能通过触发 Action 来更改 State 的更改必须写成纯函数，也就是每次更改总是返回一个新的 State，在 Redux 里这种函数称为 ReducerRedux工作流store 数据仓库，通过createStore创建状态树store，通过订阅store.subscribe将stat.
2021-04-22 12:47:07
188
原创 react event事件
event.target 事件发生的元素event.currentTarget 事件处理绑定的元素示例：import React from 'react';import style from './ShoppingCart.module.css';import { FiShoppingCart } from "react-icons/fi";interface Props{}interface State{ isOpen : boolean;}class S...
2021-04-16 17:49:47
388
原创 css module模组化
使用react最大的优势就是模组化，何为模组化，就是每个jsx或者tsx文件就被视为一个独立存在的原件，原件所包含的所有内容也同样都应该是独立存在的。但是如果我们只是使用一个简单的import关键词来import整个css文件，将会直接引入整个文件，而不是按需加载，这样处理就极有可能对css造成全局污染或者冲突，从而就无法达到我们组件化的目的了。那么从组件的角度我们应该怎么处理呢？很简单，我们只需要把import './index.css'换成 import style from './index.
2021-04-16 12:44:32
657
1
原创 给一个已经存在的react项目添加ts支持
比如一个已经存在的react项目my-appcd到my-app项目目录cd my-appnpm install --save typescript @types/node @types/react @types/react-dom @types/jest安装好依赖包后，讲my-app项目目录下的 js 文件的后缀 js 改为 tsx 就可以了...
2021-04-16 10:51:21
1799
原创 tsconfig配置文件讲解
搭建基于ts的react项目后，可以看到项目目录下有个tsconfig.json文件打开这个tsconfig.json{ "compilerOptions": { "noImplicitAny": false, //不需要显示的声明变量的类型any "target": "es5", //编译后的目标javascript版本， ES5, ES6/ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ESNext "lib":
2021-04-16 10:41:18
5705
原创 webpackChunkName
/*webpackChunkName:"register"*/ 代码分隔出来的js文件名constRegister=lazy(()=>import(/*webpackChunkName:"register"*/'./views/register'));
2021-04-15 18:11:41
3733
原创 react配置homepage并去掉sourcemap
打包build生成的文件index.html，里面的默认的路径是跟目录/ ，如果想改变路径，可以配置homepage配置homepagepackage.json文件，添加"homepage":"./"如果不想生成打包的map文件，可以将package.json文件中的nodescripts/build.js 修改为 setGENERATE_SOURCEMAP=false&&nodescripts/build.js（注意：false和&&之间不能有空格...
2021-04-15 18:08:03
1089
1
原创 react创建新项目
npm install -g create-react-app 全局安装create-react-app reactproject 新建并对react项目进行命名（注:项目名称不能有大写）或者npx create-react-app reactproject 新建并对react项目进行命名（注:项目名称不能有大写）新建项目中报错：原因：网络原因，解决办法：//换源npm config set registry https://registry.npm...
2021-04-15 17:52:26
80
原创 web移动端真机调试工具
web移动端真机上调试的两种工具：1. vconsole直接在html页面中引入vConsole的JS文件<script src="vconsole.min.js"></script><script> // 初始化vConsole var vConsole = new VConsole(); console.log('hellocode')</script>页面会出现vConsole小图标，
2021-03-19 11:46:41
526
原创 vue 渲染大数据优化方案
思路减少对DOM节点的渲染，通过滚动函数节流实现滚动后事件来动态渲染数据一、Vue自定义指令 （通过自定义指令隐藏数据）二、使用 pl table(轻松解决1w+数据量)链接：https://www.jianshu.com/p/714ac44da077vxe-table文档：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api演示：https://xuliangzhan_admin.gitee.io/vxe-table/..
2021-03-18 13:55:16
1091
原创 vue-awesome-swiper遇到的坑
1. 自动删了部分依赖包，导致运行失败通过cnpm install swiper vue-awesome-swiper --save 安装的是最新版本vue-awesome-swiper 4.1.1swiper 6.4.15安装后 npm run dev 运行失败，原因是安装swiper vue-awesome-swiper依赖包的过程中自动把node-sass，axios，vuex依赖包自动删除了解放方法：重新安装node-sass，axios，vuex依赖包就好了2.不能..
2021-02-26 11:12:04
684
原创 webpack 入口与输出
配置文件webpack.config.js中引入node的path模块const path = require('path')const config = { entry:'./src/index.js', output: { path: path.join(__dirname,'./dist'), filename: 'bundle.js' }}module.exports = config入口 entry输出output中
2021-01-26 16:15:28
82
原创 创建nodejs空项目
1.创建nodejs空项目npm init -y创建后在文件夹内生成一个package.json文件，里面是默认的一些配置信息{ "name": "webpack_demo", "version": "1.0.0", "description": "webpackdemo", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1"
2021-01-26 15:35:59
978
原创 vue chrome devtools调试工具的安装
在vue官网 我们找到 Cookbook页面 中的‘替代方案’鼠标点击红框里的 【chrome版本】，打开的地址是这样的:https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd如果打不开连接，可以复制【nhdogjmejiglipccpnnnanhbledajbpd】，这个是chrome上devtools扩展的id然后打开https://chrome-ext..
2020-11-20 14:27:13
1451
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人