2023年开发小总结1:普通篇

要知要行
84 阅读5分钟
js部分
解构

多层解构

//需要⚠️ 这里面字段如果没有数据会报错
const person ={name:'John',age:30,address:{street:'123 Main St',city:'New York',country:'USA'}};

//推荐😄 种不会报错
const {b} = a
const {c} = b||{}

解构重命名

//使用冒号是重命名， 使用=是赋值默认值
const {managerName:manager,managerAge:age={}} = data
将字符串切割成数组

字符串以逗号或者换行切割，为了防止输入错误，我是通过把所有的自负都进行替换成逗号，然后用逗号统一切割

replace中如果是数组的话，可以匹配数组中任意一个字符然后进行替换。

let str='hello\nhai,world;'
let res = str.replace(/[\n，,;；]/g,',').split(',') 
//res的值为 ['hello','hai','world','']
//str的值不变
字符串数组转为数值类型数组
['1','2','3'].map(Number)
数值转为千分位形式

1000000展示为1000，000

Number(1000000).toLocaleString()

所有的异步操作要有异常处理

try-catch

try { 
  2 // 可能会出现错误的代码块 3
} catch (error) { 
  4 // 错误处理逻辑 5
}

promise-catch

const promise = new Promise((resolve, reject) => {
  // 模拟一个抛出错误的异步操作
  setTimeout(() => {
    reject(new Error("发生了一个错误"));
  }, 1000);
});

promise
  .then((result) => {
    console.log(result); // 不会被执行
  })
  .catch((error) => {
    console.log("捕获到错误:", error.message); // 打印错误信息
  });
导出
export { default as Myform } from './components/Myform';
Object.assign合并两个对象
var ap = { a: 0 };
var ab = { b: 1 };
console.log(Object.assign({}, ap, ab)); 

//对象ap 中包含了ab对象中的属性，同时相同属性会被覆盖
console.log(Object.assign(ap, ab));
localStorage常见的操作

注意⚠️：

  • 往里面set的时候要进行序列化（序列化：转为字符串的形式便于传输）JSON.stringify(value)
  • 拿出值的时候要进行反序列化处理（反序列化：转为对象的形式方便访问）JSON.parse(value)
const storegePre = 'xx';
export interface IExpireStorage<T> {
  expired: number;
  value: T;
}
/**
 * 删除sessionStorage
 * @param key 需要删除的key
 * */
export function removeSessionStorage(key: string) {
  window.sessionStorage.removeItem(`${storegePre}${key}`);
}

/**
 * 获取sessionStorage
 * @param key 需要取出的key
 * */
export function getSessionStorage<T>(key: string): T | undefined {
  const value = window.sessionStorage.getItem(`${storegePre}${key}`);
  if (value == null || value === 'null' || value === 'undefined' || value === '"undefined"' || value === '"null"')
    return;
  try {
    return JSON.parse(value) as T;
  } catch (err) {
    return value as unknown as T;
  }
}

/**
 * 获取包含过期时间的sessionStorage
 * @param key
 * */
export function getExpireSessionStorage<T>(key: string): T | undefined {
  const nowTime: number = new Date().getTime();
  const data: IExpireStorage<T> | undefined = getSessionStorage<IExpireStorage<T>>(key);
  if (data?.expired == null) return;
  if (nowTime > data.expired) {
    removeSessionStorage(key);
  } else {
    return data.value;
  }
}

/**
 * 设置sessionStorage
 * @param key 需要存储的key
 * @param value 需要存储的value
 * */
export function setSessionStorage<T>(key: string, value: T): void {
  if (value == null) return;
  window.sessionStorage.setItem(`${storegePre}${key}`, JSON.stringify(value));
}

/**
 * 设置包含过期时间的sessionStorage
 * @param key
 * @param expiredTime: number 缓存有效时间(单位:s), 默认 7天
 * */
export function setExpireSessionStorage<T>(key: string, value: T, expiredTime: number = 7 * 24 * 3600) {
  const data: IExpireStorage<T> = {
    expired: new Date().getTime() + expiredTime * 1000,
    value
  };
  return setSessionStorage<IExpireStorage<T>>(key, data);
}

/**
 * 获取localStorage
 * @param key 需要取出的key
 * */
export function getLocalStorage<T>(key: string): T | undefined {
  const value = window.localStorage.getItem(`${storegePre}${key}`);
  if (value == null || value === 'null' || value === 'undefined' || value === '"undefined"' || value === '"null"')
    return;
  try {
    return JSON.parse(value) as T;
  } catch (err) {
    return value as unknown as T;
  }
}

/**
 * 删除localStorage
 * @param key 需要删除的key
 * */
export function removeLocalStorage(key: string): void {
  window.localStorage.removeItem(`${storegePre}${key}`);
}

/**
 * 删除所有的localStorage
 */
export function removeAllLocalStorage(): void {
  window.localStorage.clear();
}
/**
 * 获取包含过期时间的localStorage
 * @param key
 * */
export function getExpireLocalStorage<T>(key: string): T | undefined {
  const nowTime: number = new Date().getTime();
  const data = getLocalStorage<IExpireStorage<T>>(key);
  if (data?.expired == null) return;

  if (nowTime > data.expired) {
    removeLocalStorage(key);
  } else {
    return data.value;
  }
}

/**
 * 设置localStorage
 * @param key 需要存储的key
 * @param value 需要存储的value
 * */
export function setLocalStorage<T>(key: string, value: T): void {
  if (value != null) {
        window.localStorage.setItem(`${storegePre}${key}`, JSON.stringify(value));
  } else {
    window.localStorage.removeItem(`${storegePre}${key}`);
  }
}
/**
 * 设置包含过期时间的localStorage
 * @param key
 * @param expiredTime: number 缓存有效时间(单位:s), 默认 7天
 * */
export function setExpireLocalStorage<T>(key: string, value: T, expiredTime: number = 7 * 24 * 3600): void {
  const data: IExpireStorage<T> = {
    expired: new Date().getTime() + expiredTime * 1000,
    value
  };
  return setLocalStorage<IExpireStorage<T>>(key, data);
}

/**
 * 检查并清除所有过期的localStorage
 * */
export function checkLocalStorage(): void {
  const nowTime: number = new Date().getTime();
  for (let i = 0, len = window.localStorage.length; i < len; i++) {
    const key = window.localStorage.key(i);
    if (key == null) continue;
    const data = getLocalStorage<any>(key);
    if (data?.expired == null) continue;
    if (nowTime <= data.expired) continue;
    return removeLocalStorage(key);
  }
}

使用上面封装的代码

setSessionStorage('userName', 'meimei')
getSessionStorage('userName')
antd部分
Popconfirm二次确认
//没有二次确认的删除
<a className="common-a" onClick={() => editPerson(text)}>
   修改
</a>

//推荐😄 有二次确认的删除
<Popconfirm
  title="是否删除？"
  onConfirm={() => {
  deleteRecord(text);
 }}
>
  <a className="common-a">删除</a>
</Popconfirm>
alert提醒
ConfigProvider全局配置的使用

renderEmpty属性表示里面内容为空的时候 展示的自定义内容

modal的open或visible属性找不到问题

由于因为antd的版本问题， modal的open属性找不到

<Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
 <p>Some contents...</p>
</Modal>

image.png

使用visible，也可以通过提示点进去查看antd的ts文件或者是antd的源文件 ，细心就会发现不存在open属性，而是使用另外一个属性visible，这种方式排查问题，也养成了排查问题的动手和思维能力

<Modal
 title="表头配置"
 visible={isModalOpen}
 onOk={handleOk}
 onCancel={handleCancel}
 >
</Modal>
第三方库的使用
时间处理 moment
富文本的UI Slate.js

image.png slate是一款构建富文本的前端组件库，

低代码引擎

阿里第代码引擎

TODO: 低代码引擎的简单使用

其他
npm安装指定版本

使用@ 后面跟随版本号

npm install react-redux@7.2.3

在一个项目中，其包依赖项列表保存在 package.json 文件中。每个已安装的包都被分配了一个版本号，一般由 三部分组成：major.minor.patch 。

  • major 表示非兼容的重大 API 改变
  • minor 表示向后兼容的功能性改变
  • patch 表示向后兼容的 bug 修正
git拉取指定版本
github clone -b v1.0.0 xxxx链接
安装包对应的types包
tnpm install @types/react-redux

TODO: 涉及到散碎的小知识，会不定期的补全在该文章中。

下一篇来写antd和ProComponent的使用总结

avatar
文章
阅读
粉丝