- 博客(48)
- 收藏
- 关注
RSS订阅原创 前端本地存储方案-localForage
localForage 是前端本地存储的库，支持多种存储后端，并提供了一致的API来存储和检索数据，遵循“渐进增强”或“优雅降级”的原则。
2023-05-10 22:26:49
2167
1
原创 WebAssembly与Go实践
WebAssembly（简称Wasm）是一种可移植、高性能的二进制代码格式，可以在现代Web浏览器中运行。Wasm是一种开放的标准，由WebAssembly组织推广和维护。它旨在通过在浏览器中提供一种比JavaScript更高效和更快的运行时环境，来改进Web应用程序的性能和功能。
2023-05-10 22:18:31
1920
原创 crypto-js进行字符串的加密解密（可搭配localStorage使用）
导入crypto-js然后，需要设置自己的秘钥2.加密对字符串进行加密3.解密对字符串进行解密4. 搭配localStorage使用从localStorage读取数据存数据至localStorage
2022-12-08 11:06:40
1557
原创 js中json与map数据互相转换
2. JSON String 数据转 MAP通过JSON.stringify将JSON转为String再先执行第一步isJsonStr ，判断字符串是否为JSON字符串再将JSON String 数据转 MAP3. MAP 数据转 JSON StringMAP 数据转 JSON String如果只想要json数据可直接return obj 即可
2022-12-08 11:00:44
6334
原创 控制台彩色输出（npm 包 chalk）
使用console.log 来查看状态，打印某些变量，回发现终端中打印出来的信息毫无辨识度，这时候才意识到在终端输出高辨识度的信息是多么的重要。这时需要对某些重要信息用颜色进行标识。
2022-10-23 14:11:08
487
原创 JS中关于let（const）暂时性死区的分析笔记
let的暂时性死区const与let在这个地方原理上差不多，故以let为例进行分析1.什么是暂时性死区首先来看一段代码console.log(a); // undefinedvar a = 123;如果你了解变量提升，那么很容易就会知道，var 声明变量的这段代码相当于var aconsole.log(tmp); // undefineda = 123;但同样的代码用let声明变量时会报错console.log(a); // ReferenceError: Cannot acces
2021-11-18 14:20:57
1562
原创 npm切换淘宝源（npm源）
npm切换淘宝源（npm源）1 .切换淘宝源npm config set registry http://registry.npm.taobao.org/2 .切换npm源npm config set registry https://registry.npmjs.org/
2021-11-18 10:05:46
1351
原创 chrome调试代码时遇到问题，在vscode中修改代码保存后，chrome刷新后没有更新
chrome调试代码时遇到问题，在vscode中修改代码保存后，chrome刷新后没有更新。解决办法a：勾选调试工具中【Network】Disable cache禁止缓存解决办法b：chrome要想即时看到效果 是用 ctrl F5全部强制刷新。...
2021-11-16 15:37:48
1777
原创 js实现生成一个随机的指定长度的key
js实现生成一个随机的指定长度的keyfunction generateKey(keyLength = 18) { let rlt = '' for (let i = 0; i < keyLength; i++) { if (Math.round(Math.random())) { rlt += Math.ceil(Math.random() * 9) } else { const ranNum = Math.ceil(Math.random() *
2021-11-16 15:36:25
1854
原创 使用rem，使字体大小自适应屏幕
rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em区别在于使用rem为元素设 定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。将以下代码放在入口文件，即可使字体大小自适应屏幕大小function resize() { let doc = document.documentElement //返回文档的根节点 let w
2021-11-16 15:25:56
3824
原创 css中图片不清晰解决方法
图片不清晰问题：用100%设置其宽度（高度不用设置，长宽只设置一个）如果不起作用可以长沙给img加入以下属性image-rendering 属性用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。此属性对于未缩放的图像没有影响。.img { image-rendering: -webkit-optimize-contrast;}加入这段代码后图片变得很清晰（使用了某些图像处理的算法来达到这样的效果）...
2021-11-16 15:22:26
9469
2
原创 js将数字转换成字母
数字转换成字母a=>1;b=>2;.aa=>27等等这个问题的本质是进制转换，进制转换的原理是aaaa = 1×26^3 + 1×26^2 + 1×26^1 + 1×26^0 = 18279abcd = 1×26^3 + 2×26^2 + 3×26^1 + 4×26^0 = 19010这可以得到字母转换成数字的公式。首先得到字母字符串的长度n，然后单个字符串转换成数字（1-26）。如abcdef，可知n=6，转换：1. a×26^(n-1) + b×26^(n-2) + c
2021-11-16 15:19:19
3857
原创 js数组合并、去重、降维(ES6:扩展运算符、Set)
js数组合并、去重、降维1.合并1.1使用concat()进行合并数组function get_union(collection_a, collection_b) { return collection_a.concat(collection_b)}1.2使用…(扩展运算符)进行合并数组function get_union(collection_a, collection_b) { return [...collection_a,...collection_b]}2.去重fun
2021-11-16 15:05:40
2305
原创 js选出给定数组中所有的偶数/奇数/n的倍数（filter）
js选出给定数组中所有的偶数/奇数/n的倍数（filter）1.选出给定数组中所有的偶数用forfunction collect_all_even(collection) { let res = []; for (let i of collection) { if (i % 2 === 0) { res.push(i); } } return res;}用filterfunction collect_all_even(collection) {
2021-11-16 14:47:00
3320
原创 next服务端渲染时跳过指定组件
next服务端渲染时跳过指定组件，由于某些组件使用了客户端的api，如果不跳过的服务端渲染话会报错，因为服务端没有这些api在对应的pages中导入组件由import Components from '../components'修改为import dynamic from 'next/dynamic'const Components = dynamic(() => import('../components'), { ssr: false,})即可...
2021-11-16 14:13:00
1080
原创 js（ES6）中let、var的区别(const)
1.let与varES6 新增了let命令，用来声明变量。它的用法类似于var，但let所声明的变量，只在let命令所在的代码块内有效。if(true){ let a = 1; var b = 2; console.log(a) // 1 console.log(b) // 2}console.log(a) // ReferenceError: a is not defined.console.log(b) // 2在if代码块之中，分别用let和var声明了两个变量。然后在
2021-11-16 11:52:31
92
原创 js中的try...catch笔记
try…catch可以规避由于报错而导致程序终止，他会跳过错误（跳出try…catch）继续执行try…catch语句标记要尝试的 语句块，并指定一个出现异常时抛出的响应。语法：try { try_statements // 需要被执行的语句}[catch (exception_var_1 if condition_1) { // non-standard catch_statements_1 //如果有异常抛出语句 }]...[catch (exception_var_2) {
2021-11-16 10:25:40
510
原创 js 逻辑运算符
1 常用逻辑运算符逻辑与（&&）expr1 && expr2 若 expr1 可转换为 true，则返回 expr2；否则，返回 expr1。逻辑或（||）expr1 || expr2 若 expr1 可转换为 true，则返回 expr1；否则，返回 expr2。逻辑非（!）!expr 若 expr 可转换为 true，则返回 false；否则，返回 true。双重非（!!）运算符!!expr 可将expr转化为 boolean类型2 会被转换为 fal
2021-11-15 17:29:08
71
原创 react中export 和 export default
export 和 export default 的区别exportexport命令用于规定模块的对外接口。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。// profile.jsexport var firstName = 'Jack';export var lastName = 'Ma';export var year = 1964;// profile.jsvar firstName =
2021-11-15 17:23:09
2666
原创 React 路由（Router、Link、Route）
React Router1.RouterRouter我们可以把它看做是react路由的一个路由外层盒子，它里面的内容就是我们单页面应用的路由以及路由组件。import { BrowserRouter as Router } from "react-router-dom";class Main extends Component{ render(){ return( <Router> <div>
2021-11-15 17:09:37
1115
原创 react路由（Route ）中的exact使用
react之exactexact是Route下的一条属性，一般而言，react路由会匹配所有匹配到的路由组价，exact能够使得路由的匹配更严格一些。exact的值为bool型，为true是表示严格匹配，为false时为正常匹配。如在exact为true时，’/link’与’/’是不匹配的，但是在false的情况下它们又是匹配的。一个常用的场景是这样的：<Route path='/' component={Home} /><Route path='/page' component=
2021-11-15 17:08:17
5744
原创 setState更新状态的2种写法
setState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callback])------函数式的setState
2021-11-15 17:06:07
113
原创 三个常用的React Hooks
1. React Hook/Hooks是什么?(1). Hook是React 16.8.0版本增加的新特性/新语法(2). 可以让你在函数组件中使用 state 以及其他的 React 特性2. 三个常用的Hook(1). State Hook: React.useState()(2). Effect Hook: React.useEffect()(3). Ref Hook: React.useRef()3. State Hook(1). State Hook让函数组件也可以有state
2021-11-15 17:04:56
137
原创 react-router 笔记
react-router最主要的API1 BrowserRouter或HashRouterRouter中包含了对路径改变的监听，并且会将相应的路径传递给子组件；BrowserRouter使用history模式；HashRouter使用hash模式；2 Link和NavLink：通常路径的跳转是使用Link组件，最终会被渲染成a元素；NavLink是在Link基础之上增加了一些样式属性to属性：Link中最重要的属性，用于设置跳转到的路径；ps：NavLink即在当前的路径时导航栏可以显示不
2021-11-15 17:02:52
49
原创 useState/useEffect简单使用
useState// 传入初始值，作为 stateconst [state, setState] = useState(initialState)// `惰性初始 state`；传入函数，由函数计算出的值作为 state// 此函数只在初始渲染时被调用const [state, setState] = useState(() => { const initialState = someExpensiveComputation(props) return initialState
2021-11-15 16:54:21
468
原创 react中动态添加类名className(css modules)
react中动态添加类名className(css modules)添加多个类名可以使用：// 第1种 直接加上一个空格的字符串className={style.name0ne + ' ' + style.nameTwo}// 第2种 数组用逗号隔开，然后用join(' ')替换成空格 className={[style.name0ne, style.nameTwo].join(' ')}// 第3种 直接使用模板字符串 className={`${style.name0ne} ${style
2021-11-09 16:29:58
4768
原创 less变量切换主题背景色等等（react）
less变量切换主题（react）第一步：在public文件夹下有入口文件index.html,在入口文件中引入同文件夹下的less文件<link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/theme.less" />注意：使用link标签，rel为stylesheet/less，type为text/css，href为%PUBLIC_URL%/theme.less第二步：在public文件夹下的theme.le
2021-11-09 14:07:41
2117
原创 react 项目支持less配置
react 项目支持less配置less配置初始步骤，暴露配置文件yarn eject第一步：在webpack.config.js文件(暴露后在config文件夹下)中设置如下:66行 插入less更改:const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/;500行，插入：{ test: lessRegex, exclude: lessModuleRegex, use: get
2021-11-09 14:04:20
369
原创 React Hook 基本使用规则
React Hook 基本使用规则Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则。1.只在最顶层使用 Hook不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。2.只在 React 函数中调用 Hook不要在普通
2021-11-09 14:01:21
1149
原创 useState、useEffect笔记
Hook APIuseState的两种用法function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button o
2021-11-09 13:59:22
263
原创 useContext简单使用笔记
useContext简单使用笔记useContext,可以用来传递参数，不光是父子之间传参，可以跨越组件层级直接传递变量，实现共享useContext：解决的是组件之间值传递的问题redux：是应用中统一管理状态的问题但通过和useReducer的配合使用，可以实现类似Redux的作用。Context的作用就是对它所包含的组件树提供全局共享数据的一种技术代码例：createContext 函数创建 context直接在src目录下新建一个文件 Example.tsx,然后代码如下：impor
2021-11-09 13:57:52
270
原创 mobx记录用户登录状态（react）
mobx记录用户登录状态（react）新建userStatus.tsimport { makeAutoObservable } from 'mobx'import { UserInfo } from '../types'interface UserInfoStatus extends UserInfo{ status:string}class UserStatus { userStatus: UserInfoStatus = { account: '', pwd: '
2021-11-09 13:56:11
958
原创 react antd注册账号Form 表单组件
注册账号Form 表单组件<Form form={form} name="normal_login" className="login-form" initialValues={{ remember: true }}> <Form.Item name="username" rules={[ { required: true, message: '请输入你的账号!' }, { patte
2021-11-09 13:54:07
763
原创 路由组件与一般组件的区别
路由组件与一般组件的区别1.写法不同// 一般组件<Demo/>// 路由组件<Route path='/demo' component={Demo}/>2.存放位置不同// 一般组件 component// 路由组件 pages3.接收到的props不同// 一般组件 写组件标签时传递了什么，就能收到什么// 路由组件 接收到三个固定的属性history: go: ƒ go(n) goBack: ƒ goBack() goFor
2021-11-09 13:51:40
1038
3
原创 ts(TypeScript)常用语法(Omit、Pick、Partial、Required)
ts(TypeScript)常用语法比如有一个联系人列表export interface Contact{ name: string; // 姓名 phone?: string; // 手机号 email?: string; // 邮箱 avatar: string; // 头像 userid: string; // id}1.去除类型中某些项（官方提供）现在需要定义一个新的数据类型，新的联系人列表没有邮箱项可以使用Omit，其源码如下/** * Construct a
2021-11-01 10:35:25
30524
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人