Skip to main content

11-14

1 小程序动态背景​

[1][小程序滚动页面修改导航栏背景色](https://blog.csdn.net/qq_44854653/article/details/123556071)

[2][微信小程序：随页面滚动渐变的顶部导航组件](https://blog.csdn.net/haoyanyu_/article/details/108028832) (加入防抖)

2 ts类型声明问题​

声明空间​

分两类：1.类型声明空间 2.变量声明空间

// 类型声明空间
class Foo {}
interface Bar {}
type Bas = {};

// 变量声明空间
class Foo {} // 可以看到类可以同时为(类型|变量)声明空间
const someVar = Foo;
const someOtherVar = 123;

对单独文件类型声明​

// CPCL_JSSdk0.0.0.2.js
function CPCL_JSSdk() {}
CPCL_JSSdk.prototype.print = function () {};

export default CPCL_JSSdk;

声明文件：

// CPCL_JSSdk0.0.0.2.d.ts
class CPCL_JSSdk {
  print: () => void;
}

export default CPCL_JSSdk;

或者，对整个模块显示声明any

// CPCL_JSSdk0.0.0.2.d.ts
export default any;

[1][TypeScript 中的声明文件](https://daief.tech/post/declaration-files-of-typescript/)

[2] https://ts.xcatliu.com/basics/declaration-files.html#%E6%A8%A1%E5%9D%97%E6%8F%92%E4%BB%B6

[3][声明空间](https://jkchao.github.io/typescript-book-chinese/project/declarationspaces.html#%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4)

3 js格式化金钱​

方法一：该方法在特定环境会失效，不建议使用

const options = {
  style: 'currency',
  currency: 'CNY',
};
const num = 999999
num.toLocaleString('zh-CN', options);
=>> '¥999,999.00'

方法二

function formatCurrency(num: any, withcents = 2) {
  const originnum = num;
  // eslint-disable-next-line no-useless-escape
  num = num.toString().replace(/\$|\,/g, '');
  if (Number.isNaN(num)) {
    num = '0';
  }
  // eslint-disable-next-line eqeqeq
  const sign = num == (num = Math.abs(num));
  num = Math.floor(num * 100 + 0.50000000001);
  let cents = (num % 100) as any;
  num = Math.floor(num / 100).toString();
  if (cents < 10) {
    cents = `0${cents}`;
  }
  // eslint-disable-next-line no-plusplus
  for (let i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {
    num = `${num.substring(0, num.length - (4 * i + 3))},${num.substring(num.length - (4 * i + 3))}`;
  }
  const rs = `${(sign ? '' : '-') + num}.${cents}`;
  // eslint-disable-next-line radix, eqeqeq
  if (!withcents && parseInt(originnum) == parseFloat(originnum)) {
    return rs.split('.')[0];
  }
  return rs;
}

function formatPrice(price: string | number | undefined, withcents = 2) {
  price = price || 0;

  return formatCurrency(price, withcents);
}

4 recycle-view下拉刷新​

原理为给 scroll-view 增加下拉刷新操作

[1][微信小程序长列表组件 recycle-view 修改,使其可以下拉刷新 ](https://www.cnblogs.com/han-guang-xue/p/13048505.html)

[2][修改后的 recycle-view包](https://www.npmjs.com/package/@ginlink/miniprogram-recycle-view)

5 一些工具​

5.1 class-transformer​

class-transformer 是一个类转化工具，重点内容是将字面量转化为类，还可以对类上的属性进行更名导出、隐藏等操作

class User {
    id: number;
    firstName: string;
    lastName: string;
  
  @Expose()
  get name() {
    return this.firstName + ' ' + this.lastName;
  }
  
  @Exclude()
  password: string;
}

5.2 Typegoose​

Typegoose 主要用于更加简单的书写Mongoose模型

class Job {
  @prop()
  public title?: string;

  @prop()
  public position?: string;
}

// === 等效Mongoose写法
const JobSchema = new mongoose.Schema({
  title: String;
  position: String;
});

6 虚拟列表​

TODO

用Canvas实现？

飞书文档中的表格是利用Canvas实现的？

[0][vue-virtual-scroller的使用，长列表优化，虚拟列表](https://blog.csdn.net/weixin_43239880/article/details/120755432)

[1][vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller)

[2][vue-virtual-scroller示例](https://vue-virtual-scroller-demo.netlify.app/)

[3][react-virtualized](https://github.com/bvaughn/react-virtualized)

[4][react-virtualized示例](https://bvaughn.github.io/react-virtualized/#/components/List)

[5][Luckysheet](https://github.com/dream-num/Luckysheet) (非虚拟列表，强大的在线开源表格项目)

2022-12-28 21:51:02补充​

[1][使用 AntV S2 打造大数据表格组件](https://zhuanlan.zhihu.com/p/478129151)

​ 内包含 类 Excel 前端表格组件的一些分析

一些关于AntV S2的文章：

拓展内容

  • [1][协同编辑中使用的 OT 算法是什么？](https://zhuanlan.zhihu.com/p/559699843)

    OT算法常用于实现协同文档的底层算法，支持多个用户同时编辑文档，不会因为并发修改导致冲突，而使结果不一致或数据丢失。

7 微信小程序中使用lodash的问题​

[1][微信小程序中使用lodash的问题](https://juejin.cn/post/6844903971862102030)

8 Hooks时代，如何写出高质量的react和vue组件？​

  • 高复用、低耦合封装组件

  • 视图、交互逻辑和业务逻辑区分开来，是衡量一个组件质量的重要标准

拆分组件的时候可以参考下面几个原则：

  1. 拆分的组件要保持功能单一。即组件内部代码的代码都只跟这个功能相关；
  2. 组件要保持较低的耦合度，不要与组件外部产生过多的交互。如组件内部不要依赖过多的外部变量，父子组件的交互不要搞得太复杂等等。
  3. 用组件名准确描述这个组件的功能。就像函数那样，可以让人不用关心组件细节，就大概知道这个组件是干嘛的。如果起名比较困难，考虑下是不是这个组件的功能并不单一。

示例​

业务逻辑

// 用户模块hook
const useUser = () => {
  // react版本的用户状态
  const user = useState({});
  // vue版本的用户状态
  const userInfo = ref({});

  // 获取用户状态
  const getUserInfo = () => {}
  // 修改用户状态
  const changeUserInfo = () => {};
  // 检查两次输入的密码是否相同
  const checkRepeatPass = (oldPass，newPass) => {}
  // 修改密码
  const changePassword = () => {};

  return {
    userInfo,
    getUserInfo,
    changeUserInfo,
    checkRepeatPass,
    changePassword,
  }
}

交互逻辑

// 用户模块交互逻辑hooks
const useUserControl = () => {
  // 组合用户hook
  const { userInfo, getUserInfo, changeUserInfo, checkRepeatPass, changePassword } = useUser();
  // 数据查询loading状态
  const loading = ref(false);
  // 错误提示弹窗的状态
  const errorModalState = reactive({
    visible: false, // 弹窗显示/隐藏
    errorText: '',  // 弹窗文案
  });

  // 初始化数据
  const initData = () => {
    getUserInfo();
  }
  // 修改密码表单提交
  const onChangePassword = ({ oldPass, newPass ) => {
                             // 判断两次密码是否一致
                             if (checkRepeatPass(oldPass, newPass)) {
    changePassword();
  } else {
    errorModalState.visible = true;
    errorModalState.text = '两次输入的密码不一致，请修改'
  }
};
return {
  // 用户数据
  userInfo,
  // 初始化数据
  initData: getUserInfo,
  // 修改密码
  onChangePassword,
  // 修改用户信息
  onChangeUserInfo: changeUserInfo,
}
}

视图

<template>
  <!-- 视图部分省略，在对应btn处引用onChangePassword和onChangeUserInfo即可 -->
  </template>
<script setup>
  import useUserControl from './useUserControl';
import { onMounted } from 'vue';

const { userInfo, initData, onChangePassword, onChangeUserInfo } = useUserControl();
onMounted(initData);
<script>

[1][Hooks时代，如何写出高质量的react和vue组件？](https://cloud.tencent.com/developer/article/2062117)

9 如何获取Nestjs装饰器内容？​

思路：只要是装饰器都可以通过 反射 去获取，关键获取到key和上下文

// 获取swagger的@ApiTags装饰器，注意getClass（类上的装饰器）
this.reflector.get<string[]>(SWAGGER_DECORATORS.API_TAGS, context.getClass())

// 获取swagger的@ApiOperation装饰器，注意getHandler（方法上的装饰器）
this.reflector.get<Partial<OperationObject>>(SWAGGER_DECORATORS.API_OPERATION, context.getHandler())

10 一些学习项目​

React阵营​

  • Kutt 使用了Node.js、Express、Passport、React、TypeScript、Next、Easy Peasy、styled-components、Recharts、PostgreSQL、Redis 等技术构建，是一个不错的学习React的开源项目。来源[1]

    目的：1.学习如何封装组件 2.学习Next如何在项目中运用

  • Real World App 是使用 Cypress 对程序进行端到端测试的一个很好的 DEMO 项目。在 repo 中包含了示例数据，自动化测试和应用程序都可以开箱即用地运行。

    它基于 create-react-app 构建，使用 TypeScript 编写，带有 Express 后端，使用 Material UI 作为 UI/组件库，使用 Formik 实现表单，使用 react-router 实现路由。来源[2]

    目的：1.学习如何用Cypress测试组件 2.如何在项目中正确使用 Material UI

  • Win11 in React 是一个使用 React、CSS (SCSS) 和 JS 等标准 Web 技术开发的复制 Windows 11 桌面体验的React项目。让开发者可以在浏览器上就可以体验 Windows 11 操作系统的魅力。来源[1]

    目的：学习终端如何在前端使用。

[1][推荐10个React开源项目](https://juejin.cn/post/7169108697950453773)

[2][有哪些值得学习的大型 React 开源项目？](https://www.51cto.com/article/715457.html)

Vue阵营​

  • jeecgboot-vue3

    JeecgBoot-Vue3采用 Vue3.0、Vite、 Ant-Design-Vue3、TypeScript 等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。 是JeecgBoot低代码平台的vue3技术栈的全新UI版本，功能强于vue2版。

    强大的代码生成器让前后端代码一键生成! JeecgBoot引领低代码开发模式(OnlineCoding-> 代码生成-> 手工MERGE)， 帮助解决Java项目70%的重复工作，让开发更多关注业务。既能快速提高效率，节省成本，同时又不失灵活性

11 vue3.x显示json数据组件​

[1][vue3-json-viewer](https://github.com/qiuquanwu/vue3-json-viewer)

12 判断设备-通过user-agent​

简单方案：手动匹配

export enum TerminalEnum {
  pc = 0,
  micromessenger = 1,
  h5 = 2,
}

export const TerminalEnumMap: { [k in TerminalEnum]: string } = {
  0: 'Erp',
  1: '小程序',
  2: 'H5',
}

export function getTerminal(deviceAgent: string) {
  if (/(micromessenger)/.test(deviceAgent)) {
    return TerminalEnum.micromessenger
  }

  if (/(iphone|ipod|ipad|android)/.test(deviceAgent)) {
    return TerminalEnum.h5
  }

  return TerminalEnum.pc
}

13 Rxjs​

[1][RxJS 从入门到精通](http://rx.js.cool/)

14 changeLog使用方法​

1.安装

yarn add -D standard-version

2.命令，添加到 scripts 中

{
  "release:peek": "standard-version --dry-run",
  "release:major": "standard-version --release-as major",
  "release:minor": "standard-version --release-as minor",
  "release:patch": "standard-version --release-as patch",
  "release:pre": "standard-version --prerelease alpha",
  "release:first": "standard-version --first-release"
}
  • peek：临时在命令行中看一下生成记录（不会有任何影响）
  • major、minor、patch：分别对应主版本、此版本和补丁版本，可以根据提交情况手动指定
  • pre：预览版本（抢先版本），可以指定前缀，示例中为 alpha
  • first：第一次生成，不会增加版本号

运行相关命令后，会自动打tag、生成changelog以及进行一次提交

15 字体Css兼容写法

[1][浅析CSS的字体兼容写法（用CSS为英文和中文字体分别设置不同的字体）及字体定义设计规范 ](https://www.cnblogs.com/goloving/p/9721328.html)

15 mongodb树形结构​

[1][mongodb树形结构](https://blog.csdn.net/a273967581/article/details/84909724)

[2][mongodb单集合关联查询parent字段内容](https://juejin.cn/post/6870678533736398862)

16 acro二次封装​

[1][基于vue3+Arco Design的table组件的hook二次封装](https://juejin.cn/post/7088958678912466957)

17 小程序性能优化实践​

[1][小程序性能优化实践](https://developers.weixin.qq.com/community/business/course/000606628dc2e86dc0ddcbb115940d)

[2][京喜小程序的高性能打造之路](https://cloud.tencent.com/developer/article/1830523)

18 提升效率​

  • 生成器

    • form-create

      form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

    • form-generator