上一页 1 2 3 4 5 6 7 ··· 9 下一页
2023年5月8日
ES6字符串API
摘要： ES6 字符串API 以下均为字符串的实例（原型）方法 includes 判断字符串中是否包含指定的子字符串 startsWith 判断字符串中是否以指定的字符串开始 endsWith 判断字符串中是否以指定的字符串结尾 repeat 将字符串重复指定的次数，然后返回一个新字符串。 const te 阅读全文
posted @ 2023-05-08 21:14 HuangBingQuan 阅读(9) 评论(0) 推荐(0) 编辑
js得到一个字符串的真实长度
摘要： 早期，由于存储空间宝贵，Unicode使用16位二进制来存储文字。我们将一个16位的二进制编码叫做一个码元（Code Unit）。 后来，由于技术的发展，Unicode对文字编码进行了扩展，将某些文字扩展到了32位（占用两个码元），并且，将某个文字对应的二进制数字叫做码点（Code Point）。 阅读全文
posted @ 2023-05-08 20:40 HuangBingQuan 阅读(82) 评论(0) 推荐(0) 编辑
2023年4月19日
Webpack编译结果分析
摘要： ### 编译结果分析 #### 观察编译结果后，模拟打包模块 ``` // 改对象中保存了所有的模块，以及模块对应的代码 var modules = ((modules)=> { var moduleExports = {}; // 用于缓存模块的导出结果 // require函数相当于是运行一个模 阅读全文
posted @ 2023-04-19 16:44 HuangBingQuan 阅读(38) 评论(0) 推荐(0) 编辑
2023年4月12日
Antd TreeSelect 不支持字母搜索
摘要： 解决方案 配置 treeNodeFilterProp 属性，treeNodeFilterProp='title' 阅读全文
posted @ 2023-04-12 12:49 HuangBingQuan 阅读(6) 评论(0) 推荐(0) 编辑
2023年3月23日
React-router v6 路由总结
摘要： React-router v6 路由总结 组件 BrowserRouter：整个前端路由以 history 模式开始，包裹根组件 HashRouter：整个前端路由以 hash 模式开始，包裹根组件 Routes：类似于 v5 版本的 Switch，主要是提供一个上下文环境 Route：在 Rout 阅读全文
posted @ 2023-03-23 11:20 HuangBingQuan 阅读(125) 评论(0) 推荐(0) 编辑
2023年3月11日
h5移动端适配
摘要： 1. viewviewport 缩放适配 (()=> { let viewprot = document.querySelector('#viewport'); // 获取设备宽度 let curWidth = document.documentElement.clientWidth; // 计算缩 阅读全文
posted @ 2023-03-11 22:43 HuangBingQuan 阅读(85) 评论(0) 推荐(0) 编辑
2023年3月9日
深入认识setState
摘要： 深入认识React类组建修改状态-setState setState，它对状态的改变，可能是异步的； 如果改变状态的代码处于HTML元素事件中，则其是异步的，否则是同步 如果遇到某个事件中，需要同步调用多次，需要使用的函数方式得到最新状态。 最佳实践 把所有的setState当作是异步的。 永远不要 阅读全文
posted @ 2023-03-09 11:13 HuangBingQuan 阅读(28) 评论(0) 推荐(0) 编辑
2023年3月8日
React+TypeScript+Mobx6
摘要： react hook 风格下不再使用class类的形式定义组件，也就不再适用mobx以前版本的装饰器语法。 以下分享 reack hook 语法风格下使用 mobx v6 版本的状态管理配置使用方式。 相关依赖： "mobx": "^6.8.0", "mobx-react-lite": "^3.4. 阅读全文
posted @ 2023-03-08 11:36 HuangBingQuan 阅读(185) 评论(0) 推荐(0) 编辑
2023年3月5日
CSS3-选择器
摘要： 关系选择器 E+F：下一个满足条件的兄弟元素节点 div + p (选中和div并列的第一个p) E~F：所有满足条件兄弟元素节点 div ~ p (选中和div并列的所有p) 属性选择器 div[class~=“a”] // 选中class值中有a div[class|=“a”] // 选中cla 阅读全文
posted @ 2023-03-05 17:00 HuangBingQuan 阅读(28) 评论(0) 推荐(0) 编辑
2023年3月3日
HelloReact
摘要： 单页面中使用React 在单页面中使用React需要引入三个js：React的核心库、依赖核心库、babel（编译JSX） <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> 阅读全文
posted @ 2023-03-03 21:32 HuangBingQuan 阅读(11) 评论(0) 推荐(0) 编辑
2023年2月26日
HelloTypeScript
摘要： Hello TypeScript TypeScript是JS的超级，是一个可选的、静态的类型系统 静态的（类型检查发生的时间，在编译的时候，而非运行时） 类型系统（对代码中所有的标识符（变量、函数、参数、返回值）进行类型检查） 在node中搭建TypeScript环境 安装typescript：ya 阅读全文
posted @ 2023-02-26 22:13 HuangBingQuan 阅读(21) 评论(0) 推荐(0) 编辑
2023年2月25日
生成一个唯一ID
摘要： 生成一个唯一ID，时间戳+4位随机数 export function generateId() { return Date.now() + Math.random().toString(16).substring(2, 4); } 阅读全文
posted @ 2023-02-25 19:08 HuangBingQuan 阅读(20) 评论(0) 推荐(0) 编辑
2023年2月21日
数组对象属性去重
摘要： // 原数组 let objArray = [ { name: "111", id: "1" }, { name: "333", id: "3" }, { name: "111", id: "2" }, { name: "222", id: "3" }, ]; function objSet(arr 阅读全文
posted @ 2023-02-21 13:01 HuangBingQuan 阅读(16) 评论(0) 推荐(0) 编辑
2023年2月19日
Vue数据响应式底层原理
摘要： Vue数据响应式底层原理 数据响应式定义：（当数据变化的时候，会自动运行一些相关函数） 原理就是通过Object.defineProperty() 对属性进行劫持，当访问该属性时我们就收集依赖，当数据发生改变后就派发更新 function observe(obj) { for (const key 阅读全文
posted @ 2023-02-19 21:59 HuangBingQuan 阅读(43) 评论(0) 推荐(0) 编辑
2023年2月7日
理想适口
摘要： <!-- 理想适口 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scalc=1, maximum-scale=1, user-scalable=no"> <!-- 代码意义： wi 阅读全文
posted @ 2023-02-07 22:05 HuangBingQuan 阅读(25) 评论(0) 推荐(0) 编辑
2023年2月2日
准确判断一个变量的数据类型
摘要： 准确判断一个变量的数据类型 由于typeof无法判断引用数据类型 所以需要调用 Object.prototype.toString.call上的方法 /** * 获取变量准确类型的函数 * @param { * } target "目标变量" * @returns { String } */ con 阅读全文
posted @ 2023-02-02 13:45 HuangBingQuan 阅读(34) 评论(0) 推荐(0) 编辑
2023年1月19日
样式穿透
摘要： 应用场景 Vue组件中写样式，通常如下方代码： <style scoped> .comA .data { background: red; } </style> 因为关键字scoped的原因,style标签内的样式只会对当前组件内容生效,因为最终生成出来的样式选择器是这样的: .comA .data 阅读全文
posted @ 2023-01-19 19:51 HuangBingQuan 阅读(107) 评论(0) 推荐(0) 编辑
2023年1月6日
简化if，条件映射
摘要： 简化if，条件映射 举个例子 - 根据一个分数转换成绩 阅读全文
posted @ 2023-01-06 23:13 HuangBingQuan 阅读(38) 评论(0) 推荐(0) 编辑
2023年1月3日
vuex报错 this.$store显示undefined
摘要： 报错：vuex报错 this.$store显示undefined 可能是版本问题或者store压根就没有注入到vue的原型上所以导致undefined。 解决方案 检查main.js中是否将store注入vue实例中，如果没有将store引入并注入！ import Vue from "vue"; i 阅读全文
posted @ 2023-01-03 00:27 HuangBingQuan 阅读(696) 评论(0) 推荐(0) 编辑
2022年12月29日
深度克隆（深拷贝）
摘要： 深度克隆（深拷贝） export const deepClone = (targetObj)=> { return new Promise(resolve => { const { port1, port2 } = new MessageChannel(); port1.postMessage(ta 阅读全文
posted @ 2022-12-29 23:54 HuangBingQuan 阅读(76) 评论(0) 推荐(0) 编辑
Mobx
摘要： Mobx解决的问题 React的数据管理，除了redux之外，一个新的状态管理方案mobx 传统React使用的数据管理库为Redux。Redux要解决的问题是统一数据流，数据流完全可控并可追踪。要实现该目标，便需要进行相关的约束。Redux由此引出了dispatch action reducer等 阅读全文
posted @ 2022-12-29 16:30 HuangBingQuan 阅读(101) 评论(0) 推荐(0) 编辑
2022年12月28日
Vue插槽
摘要： 什么是插槽？ 插槽（Slot）是Vue提出来的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有更大的重用性。 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。 1. 举个栗子（默认插槽） 父组件 <template> <div> 我是父 阅读全文
posted @ 2022-12-28 22:32 HuangBingQuan 阅读(34) 评论(0) 推荐(0) 编辑
2022年12月27日
React项目中使用装饰器报错
摘要： 在初次使用React 的装饰器时，第一次在项目中使用 @会报错，原因是react默认是不支持装饰器的，所以才会报错，所以是需要做一些配置来支持装饰器。 安装插件 yarn add -D react-app-rewired customize-cra yarn add -D @babel/core @ 阅读全文
posted @ 2022-12-27 21:57 HuangBingQuan 阅读(43) 评论(0) 推荐(0) 编辑
2022年12月24日
按字典排序（中文排序）
摘要： // 按字典排序（中文排序） const cityArr = ['湖北', '广州', '上海', '重庆', '厦门']; function changeCity(arr, callback) { callback(arr.sort((a, b)=> { return a.localeCompar 阅读全文
posted @ 2022-12-24 03:44 HuangBingQuan 阅读(20) 评论(0) 推荐(0) 编辑
2022年12月21日
npm 包 - serve 使用
摘要： 前言 前端打包后，有时需要将打包好的项目跑一下看看效果，这时就可以使用 serve 工具，在本地启动一个静态文件服务器。本文主要简单记录下 npm 包 serve 的基本使用命令。 一、全局安装 serve yarn global add serve or npm install --global 阅读全文
posted @ 2022-12-21 20:44 HuangBingQuan 阅读(406) 评论(0) 推荐(0) 编辑
2022年12月10日
redux-thunk与redux-promise
摘要： redux-thunk与redux-promise redux-thunk与redux-promise都是一个中间件，目的：用来处理redux中的复杂逻辑，比如异步请求； redux-thunk 用法： store里面提供了applyMiddleware方法来在初始化store的时候加载中间件 // 阅读全文
posted @ 2022-12-10 22:30 HuangBingQuan 阅读(236) 评论(0) 推荐(0) 编辑
2022年12月8日
Redux底层源码
摘要： Redux底层源码 底层就是发布与订阅模式 const creareStore = (reducer)=> { let list = []; let state = reducer() const subscribe = (callback)=> { list.push(callback) } co 阅读全文
posted @ 2022-12-08 01:40 HuangBingQuan 阅读(18) 评论(0) 推荐(0) 编辑
2022年12月7日
Redux-详解-解开谜底
摘要： Redux-详解-解开谜底 类似于vuex是一个全局状态树（跨组件通信），让组件通信的时候会变得极其方便。 作用：集中式管理 react 应用中多个组件共享的状态 Redux的设计理念 组件可以派发( dispatch)行为( action)去修改state，然后为这些actions编写reduce 阅读全文
posted @ 2022-12-07 04:48 HuangBingQuan 阅读(41) 评论(0) 推荐(0) 编辑
2022年12月6日
React团队开发-样式冲突
摘要： Css module 在React多人开发中 css中的类肯定会发生冲突 如果每个页面的样式文件加上.module（文件名.module.scss）那么就会避免冲突（原理是将模块的类和id后面会随机生成一些字符串 防止避免冲突） 我们如何获取到那个随机的类呢 例如A页面 目录结构 a -> a.mo 阅读全文
posted @ 2022-12-06 03:21 HuangBingQuan 阅读(66) 评论(0) 推荐(0) 编辑
ReactRouter-路由拦截
摘要： 路由拦截 应用场景：鉴权，当用户进入到需要授权的组件时，这时候进行拦截，判断用户是否授权，如果授权则放行，正常跳转，如果非授权则重定向授权页面。 举个栗子 import React from 'react' import { BrowserRouter, HashRouter, Redirect, 阅读全文
posted @ 2022-12-06 02:10 HuangBingQuan 阅读(298) 评论(0) 推荐(0) 编辑
ReactRouter-参数传递与获取参数
摘要： 参数传递与获取参数 1. 动态路由传参 * 前提配置路由，留好占位 // 1.配置占位 <HashRouter> <Switch> <Route path="/xxx/:id"></Route> //留好占位 </Switch> </HashRouter> // 2.参数传递 import useH 阅读全文
posted @ 2022-12-06 02:09 HuangBingQuan 阅读(642) 评论(0) 推荐(0) 编辑
ReactRouter-路由模式
摘要： 路由模式 BrowserRouter与HashRouter BrowserRouter 没有#的路径 HashRouter 有#路径 举个栗子 import React from 'react' import { BrowserRouter, HashRouter, Redirect, Route, 阅读全文
posted @ 2022-12-06 02:07 HuangBingQuan 阅读(73) 评论(0) 推荐(0) 编辑
React反向代理-跨域
摘要： 反向代理 目的：解决跨域问题 在src目录下新建一个setupProxy.js const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( 阅读全文
posted @ 2022-12-06 02:02 HuangBingQuan 阅读(126) 评论(0) 推荐(0) 编辑
2022年12月3日
useReducer+useContext
摘要： useReducer+useContext = 全局状态管理 类似于vuex， 这样的意义是将所有组件的状态都挂载到外部，即组件内是无状态的。 举个栗子useReducer import React, { useReducer } from 'react' // 1. 引入useReducer // 阅读全文
posted @ 2022-12-03 01:45 HuangBingQuan 阅读(80) 评论(0) 推荐(0) 编辑
2022年12月1日
useContext（减少组件层级）
摘要： useContext 应用场景：非父子组件通信，使用 const GlobalContext = React.createContext() // 创建供应商 供应商提供数据 // App组件提供数据 <GlobalContext value={{ test: "这是一个测试数据" }}></Glo 阅读全文
posted @ 2022-12-01 02:06 HuangBingQuan 阅读(42) 评论(0) 推荐(0) 编辑
React useRef
摘要： useRef 应用场景：绑在DOM上，绑在组件上，保存临时变量永远不丢失 举个栗子 import React, { useState,useRef } from 'react' export default function App() { const [count, setCount] = use 阅读全文
posted @ 2022-12-01 01:27 HuangBingQuan 阅读(39) 评论(0) 推荐(0) 编辑
2022年11月30日
useCallback记忆函数与useMemo记忆组件
摘要： useCallback记忆函数 目的：缓存函数，优化代码 防止因为组件重新渲染，导致方法被重新创建，起到缓存作用，只有第二个参数变化了，才重新声明一次。 举个栗子 var handleClick = useCallback(()=> { console.log(name) }, [name]) // 阅读全文
posted @ 2022-11-30 22:40 HuangBingQuan 阅读(74) 评论(0) 推荐(0) 编辑
Reack hooks useEffect 总结
摘要： useEffect 总结 特性 参数必须是一个回调函数与一个数组 组件首次加载会执行一次useEffect的回调，之后依赖的值更新则会执行useEffect中的回调。 如果第二个参数是一个空数组则意味着=>空数组不依赖任何东西，所以只会执行一次类似类组件中的componentDidMounted 可 阅读全文
posted @ 2022-11-30 20:14 HuangBingQuan 阅读(73) 评论(0) 推荐(0) 编辑
2022年11月29日
Vue路由大总结
摘要： vue-router vue-router 是 vue的一个插件库，专门用来实现 SPA应用。 SPA 单页面 Web 应用（single page web application，SPA）。 整个应用只有 一个完整的页面。 点击页面中的导航链接 不会刷新页面，只会做页面的 局部刷新。 数据需要通过 阅读全文
posted @ 2022-11-29 00:42 HuangBingQuan 阅读(38) 评论(0) 推荐(0) 编辑
2022年11月28日
React中性能优化的方案
摘要： shouldComponentUpdate 控制组件自身或子组件是否需要更新，尤其在子组件非常多的情况下，需要进行优化。 PureComponent PureComponent会帮你 比较新Props跟旧的Props，新的State和就的State（值相等，或者对象含有相同的属性、且属性值相等等）， 阅读全文
posted @ 2022-11-28 16:40 HuangBingQuan 阅读(23) 评论(0) 推荐(0) 编辑
上一页 1 2 3 4 5 6 7 ··· 9 下一页