发表于 | 更新于

下一代前端构建工具 Vite

Vite 是一种构建工具，旨在为现代Web项目提供更快，更精简的开发体验。它包括两个主要部分：

  • 一个开发服务器，它在ES模块上提供了丰富的功能增强，例如，极快的热模块更换（HMR）。

  • 一个构建命令，它将您的代码与Rollup捆绑在一起，Rollup已预先配置为输出高度优化的静态资产进行生产。

特性

Features Details
即时的服务器启动 通过原生ESM提供的按需文件，无需 bundleing！
闪电般的HMR 无论模块大小如何，热模块更换（HMR）都能保持快速。！
丰富的功能 丰富的功能现成的对TypeScript，JSX，CSS等的支持！
构建优化 与配置的rollup打包！支持多页应用和类库模式！
通用插件 Rollup超集插件接口在开发和构建之间共享！
全类型API 具有完整TypeScript输入功能的灵活编程API。
阅读全文 »

发表于 | 更新于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Popup from '@/components'

export default () => {
  const [show, setShow] = useState(false);
  const openPopup = () => {
    setShow(true);
  };
  return (
    <div className="App">
      <div>
        <Popup onClose={() => setShow(false)} show={show}>
          <div>
            <p>这里是 Popup 的内容</p>
            <p>这里是 Popup 的内容</p>
            <p>这里是 Popup 的内容</p>
            <p>这里是 Popup 的内容</p>
          </div>
        </Popup>
      </div>
    </div>
  );
}

发表于

预期的 Checkbox 使用方法



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Checkbox from '@/components'
const { CheckboxItem } = Checkbox

export default () => {
  const onChange = (values) => {
    console.log(values)
  }
  return (
    <Checkbox onChange={onChange}>
      <CheckboxItem label="angular" />
      <CheckboxItem label="react" />
      <CheckboxItem label="vue" />
    </Checkbox>
  )
}


两种实现方式

通过 React.cloneElement

1
2
3
4
5
React.cloneElement(
  element,
  [props],
  [...children]
)
阅读全文 »

发表于 | 更新于

参考 Promises/A+, 实现一个Promise

定义状态

1
2
3
4
// define three states
const PENDING = 0
const RESOLVED = 1
const REJECTED = 2

version#0 (resolve/reject时变更状态)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class MyPromise {
  constructor(executor) {
    const resolve = () => {
      this.state = RESOLVED
    }
    const reject = () => {
      this.state = REJECTED
    }
    
    this.state = PENDING
    try {
      executor(resolve, reject)
    } catch (error) {
      reject(error)
    }
  }
}
阅读全文 »

发表于

遇到的问题

最近在做一个论坛功能，发帖和评论输入都需要保存到数据库。
而测试测了emoji保存是有问题的，查了数据库是没存进去，google查了一下，emoji是4个字节的，需要将
MySql数据库字符集改由utf8改为utf8mb4，于是把找到的帖子给DBA，DBA看了说不能改，可能会影响现有的数据。

那就只好自己动手，丰衣足食了。
（如果下面的emoji没有正常展示请使用最新版的火狐浏览器）

emoji 存储及展示 前端解决思路

既然直接存储emoji有问题，就改为存储emoji的转换结果。
于是沿着这个思路，首先想到的是 charCodeAt/fromCharCode

阅读全文 »

发表于 | 更新于

winodws 下载 docker

如果电脑满足以下条件可以直接下载 docker desktop：

系统要求

  • Windows 10 64-bit: Pro, Enterprise, or Education (Build 15063 or later).
  • Hyper-V and Containers Windows features must be enabled.
  • 64 bit processor with Second Level Address Translation (SLAT)
  • 4GB system RAM
  • BIOS-level hardware virtualization support must be enabled in the BIOS settings

下载安装地址

docker-for-windows

docker Toolbox 安装

如果不满足上述条件则需要通过下载 Toolbox 来安装
Toobox 下载地址
下载最新版本的 .exe进行安装

阅读全文 »

发表于 | 更新于

Go下载

Go下载地址：https://golang.google.cn/dl/

vscode 配置 go 插件

在vscode EXRENSION 商店 搜索 go，第一个就是微软官方提供的go插件，装上它就可以愉快的撸 Go 啦!
或者新建一个 .go 文件，vscode 也会推荐安装相关的插件！
go-extension

阅读全文 »

发表于 | 更新于

解决移动端 1px 边框问题

主要思路是将 HTML元素border设置为0，再通过伪类::before 或 ::after 去放大、旋转实现。
我的习惯是将 scss 变量存放在 vars.scss; scss mixin 存放在 mixin.scss.

vars.scss

1
2
3
4
$border-colors: (
  'main': #dddddd,
  'active': #0088ff,
);
阅读全文 »