第三方库笔记

统计信息：字数 9685 阅读20分钟

原始笔记链接：https://cloud.seatable.cn/dtable/external-links/59b453a8639945478de2/

0029 vue中的双向绑定和数据流

早期 vue就是双向绑定组件，实现数据通信

最新的版本当中，已经变成了单向数据流，就是从父组件到子组件进行单向的数据传递。

0047 双向绑定和vuex是否冲突

vuex 是 vue 的状态管理工具

这个涉及的不多，这个实际上是不冲突的（新版本使用单向数据流，取消了双向绑定的情况）

可以在时间回调当中使用 mutation 修改state的值，或者是用set的双向绑定来计算属性

0103 多语言网站应该怎么处理

翻译模块 react-intl 处理 i18n

时间模块（dayjs moment）这里需要根据当地时间处理时区转换

使用一些数字和格式的模块 格式化数字和货币

0140 绘图库 echarts 学习

常用的几个类型，基本的配置（两个轴，数据，标签，图例等）柱状图（条形图）、折线图、饼图、散点图；以蜡烛图为例，设置一个比较复杂的应用实例。

0168 你用过哪些UI组件库，具体有哪个常用的组件？

这个问题是第三方组件层级

PC端主要是 reactstrap 举出其他主要的常用的组件

移动端主要是 ant Design mobile，现在已经到 5.x.x 参考 https://mobile.ant.design/zh/components/button

分类：

用户交互组件：表单，输入框，按钮 Form Input Button Switch Checkbox

展示信息组件：Nav Card Swiper(走马灯)

提示组件：Toaster Tooltip Dialog Popover

其他特殊：图标，日历，进度条

0174 有什么可视化的工具和库

蚂蚁集团出的 charts g2

AntV 3.0 已全新升级，主要包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范 https://antv.vision/zh

自己的实践：若干统计图表

条形图，折线图，饼图，蜡烛图，以及各种组合

0169 你自己的项目里边有哪些主要的组件和界面，包括什么样的架构？

这个主要是项目的页面和广度

1、文件管理项目 前端 React 文件结构

2、表格管理项目 前端 React 表格结构

3、小说编辑器 React全栈

4、校园网小程序 小程序

0178 react-dnd 实现拖拽的基本思路

基于项目中的 dnd 版本，2.6.0 版本

react-dnd 是一个支持 react 拖动库，使用了高阶组件和 redux 等设计思路，基本使用

1、设置最外层一个可拖动对象 html5DragLayer 拖动上下文

import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

export default DragDropContext(HTML5Backend);

html5DragDropContext(DropTarget) 包裹被拖动组件

2、主要函数：

dragSource：拖动的源，包括 beginDrag endDrag isDragging 三个对象，用来表示拖动不同阶段返回的值（当前拖动的内容，当前拖动的索引等）

dropTarget：释放对象，包括 drop 函数，通过 monitor.getItem 获取拖动的对象，执行对应操作

dragCollect：拖动的函数收集，类似 map States to Props 函数，把外部的函数映射到内部

dropCollect：释放的函数收集，同上，把释放的函数映射到组件内部

DropTarget('ViewStructure', dropTarget, dropCollect) (DragSource('ViewStructure', dragSource, dragCollect)(Item));

0373 Next.js 常用函数

常用函数

getStaticProps：此方法用于在构建时获取数据并将页面预渲染为静态 HTML。它确保数据在构建时可用，并且不会因后续请求而更改。

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data
    }
  };
}

getServerSideProps：该方法用于在每次请求时获取数据并在服务器上预渲染页面。当您需要获取可能经常更改或特定于用户的数据时，可以使用它。

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data
    }
  };
}

getStaticPaths：此方法用于动态路由中，以指定应在构建时预渲染的路径列表。它通常用于获取带有参数的动态路由的数据。

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id }
  }));

  return {
    paths,
    fallback: false
  };
}

0253 axios 版本问题

升级 axios 版本问题

造成 jest 单元测试不通过的解决

本质原因：早期 axios 是 common-js 打包的，新版本没有支持 common-js 打包。Jest 执行单元测试在 node 环境下，不支持 es6语法，所以 import axios 就会报错。解决思路是，把 import 语法替换掉

moduleNameMapper: {
    '^axios$': require.resolve('axios'),
},

就是 module name 映射关系，把 import axios 变成 require.resolve('axios') 这样 Jest 就可以测试通过了

其他参考 https://juejin.cn/post/6898738304754286605

0254 HTMLtoCanvas

HTMLtoCanvas 第三方库学习

canvas.toDataUrl('image/png', 1.0)  

配置：

allowTaint

taintTest

allowCORS

使用场景：

统计中 canvas 导出生成 PNG，主页看板娘的 canvas 拍照显示成 png 的功能。

0259 reactstrap 中 popover 点击外部问题

Popover 点击问题：原来通过 event.target.className === 'xxx' 判断，这样如果改变了类名，那么这里判断失效。

最好的办法是 dom.contains() 判断 dom 之间的包含关系，至少使用 includes('xxx') 的形式，避免类名变化造成的问题。如果牵头的层级比较多，这个就可能造成一个事件在树节点中依次传，性能比较差。

这样性能可能不太好。最好的办法是类似对话框，增加一个后面的遮挡，这个层监听点击事件。

0263 raf 库

raf 库

requestAnimationFrame 的 polyfill（简化操作，处理浏览器兼容性）

https://github.com/chrisdickinson/raf#readme

const raf = require('raf')

function callback() {
  // animation function
}

var handle = raf(callback);
handle();
raf.cancel(handle);

0287 react-i18n fallbackLng 是什么

配置项设置了 fallBackLng 表示备用语言，就是主要翻译的语言不显示时，使用备用语言显示。

也造成了界面中加载了两种语言，可能多加载 100 kb 的资源。

0293 jsdom 模拟 node 环境下 window

需求：

node 环境下测试，需要使用全局变量 window ，但是node没有window只有global对象，所以需要这个第三方库模拟虚拟 dom 完成一些测试。

部分项目的测试文件中使用到了window.app，在jest测试中默认情况下是在Node.js环境中运行的，而window在Node.js中未定义，会报错，这里应该使用 jsdom 来手动的创建一下window,

import { JSDOM } from 'jsdom';

const { window } = new JSDOM('<!doctype html><html><body></body></html>');

global.window = window; 

官方链接：https://www.npmjs.com/package/jsdom

官方案例

const jsdom = require("jsdom");

const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(dom.window.document.querySelector("p").textContent); // "Hello world"

0274 vuecli 如何配置多入口

先确定 vue 是哪个版本，然后看是否和当前文档匹配，需要改动 vue.config.js

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

全部配置：https://cli.vuejs.org/zh/config/#pages

0706 dayjs 的注意事项

dayjs 是一个处理日期的库，是 moment 的简化版

注意：如果很多项目存在依赖关系，那么 dayjs 应该选择统一的版本，例如 1.10.7，否则多个版本同时存在，可能日期格式化不正确

0707 calendar 的注意事项

calendar 是阿里巴巴早期做的一个日历组件

如果现在使用，平替的是 html 原生的 input date 可以实现

这个库注意：

1、翻译问题：一部分是库自己的翻译，另一部分翻译是使用的日期库的翻译（ moment 或者 dayjs 中的翻译）需要什么语言就用什么翻译，这里一定要引入

2、 value 没有值时 defaultValue 的翻译 = dayjs.now() 处理

---

Last update: November 9, 2024