0%

Repo 是 repository 的缩写,即 Git 仓库

Monorepo(单一代码仓库)是一种软件开发项目的版本控制管理策略,它将所有相关的代码、组件、模块和项目全部存储在一个统一的代码仓库中,而不是将它们拆分为多个独立的代码仓库

Monorepo 和 Multi-Repo

Monorepo 和 Multi-Repo 是两种项目管理方式,其区别如下:

  • Monorepo 是使用一个 Git 仓库管理多个项目
  • Multi-Repo 是使用多个 Git 仓库管理多个项目,即一个项目对应一个仓库
阅读全文 »

为什么要修改 node_modules 中的依赖?

  • 依赖包有 bug,但作者没有及时修复
  • 依赖包的版本过旧,但不能升级到新版本
  • 对依赖包的功能有定制化需求时

常见做法

  • 自己维护这个 npm 包
    • 维护成本较高,周期长
  • 直接修改 node_modules 中的依赖
    • 适合应急,周期短
    • 修改只在本地生效
    • 适合对 npm 包的修改不需要发布的情况
  • 对 node_modules 中的依赖打补丁
    • 适合应急,周期短
    • 提交补丁文件后修改可在本地和远程生效
    • 适合对 npm 包的修改不需要发布的情况
阅读全文 »

懒加载(延迟加载)

https://developer.mozilla.org/zh-CN/docs/Web/Performance/Lazy_loading#javascript

图片懒加载

  1. 监听 scroll 事件时判断元素当前相对视图的位置
  2. 通过 IntersectionObserver(重叠观察者,用于判断两个元素是否重叠,不用进行事件的监听,兼容性)。现有的方案:
    lazysizes :https://github.com/aFarkas/lazysizes
    vue-lazyload :https://github.com/hilongjw/vue-lazyload
    Lozad.js:https://github.com/ApoorvSaxena/lozad.js

代码拆分

JavaScript、CSS 和 HTML 可以被分割成较小的代码块。这样就可以在前期发送所需的最小代码,改善页面加载时间。其余的可以按需加载。

  • 入口点分离:通过应用的入口点分离代码
  • 动态分离:通过动态 import() 语句分离代码

JS

脚本类型模块:任何类型为 type=”module” 的脚本标签都被视为一个 JavaScript 模块,并且默认情况下会被延迟。

Vue3/React 对比学习

针对以下几个点,参照官方文档,进行对比学习。

  • 添加样式
  • 组件传值
  • 操作 DOM
  • 条件渲染
  • 列表渲染
  • 计算属性
  • 侦听器

说明: vue3.0 的示例中,使用了 unplugin-auto-import/vite。
自动导入了 Vue 相关函数,如:ref, reactive, defineProps, defineEmits 等

阅读全文 »

前言

Code standard

代码规范 是前端工程化落地的基石,用于约束 编码规范编码风格,它的好处是:

  • 强制规范代码风格统一,保持一样的编码习惯
  • 增加代码的可维护性和可接入性,即使有新成员的加入也能快速适应项目的架构与需求
  • 保障项目的整体质量,可减少无用代码、重复代码、错误代码和 BUG 代码的产生几率

Git Commit Message

commit message 是开发的日常操作, 写好 log 不仅有助于他人 review, 还可以有效的输出 CHANGELOG, 对项目的管理实际至关重要, 但是实际工作中却常常被大家忽略.

那如何在前端项目中统一 代码规范,以及 Commit Message 的规范?
我这边结合实际项目以及目前较受欢迎的相关工具,给大家分享一套解决方案。

使用到的工具:

  • eslint:JavaScript 代码检测工具,检测并提示错误或警告信息
  • prettier:代码自动格式化工具,更好的代码风格效果
  • husky:Git hooks 工具, 可以在执行 git 命令时,执行自定义的脚本程序
  • lint-staged:对暂存区 (git add) 文件执行脚本检测校验
  • commitlint:帮助你的团队遵守提交约定。通过支持 npm 安装的配置,它可以很容易地共享提交约定。
阅读全文 »

LICEcap

LICEcap 是一款屏幕录制工具,支持导出 GIF 动画图片格式,轻量级、使用简单,录制过程中可以随意改变录屏范围。

官网 https://www.cockos.com/licecap/

LICEcap 可以捕获桌面区域并将其直接保存为 .GIF(用于在网络浏览器等中查看)或 .LCF(见下文)。

LICEcap 是一个直观但灵活的应用程序(适用于 Windows 和现在的 OSX),其设计轻量且具有高性能。

LICEcap 是 GPL 自由软件,每个下载包都包含源代码。

特点和选项

  • 直接录制为 .GIF 或 .LCF。
  • 录制时移动屏幕截图框。
  • 暂停和重新开始录制,并可选择插入文本消息。
  • 全局热键(Shift+空格)可在录制时切换暂停
  • 可调节最大录制帧速率,以允许限制 CPU 使用。
  • 基本标题框架,带或不带文本。
  • 记录鼠标按钮的按下情况。
  • 显示录音中经过的时间。
阅读全文 »

升级 Hexo

升级 Hexo,添加了搜索功能

升级 Next 主题

由 6 年前创建的更新至最新版本,添加了新的畅言评论功能

将整个 Hexo-blog 文件夹中文件管理在 github 中

1
2
# 并将 notes 私有化。
https://github.com/jiuyuer/notes

将更新的 next 主题也一同提交维护,后续如果升级维护,暂时考虑代码合并替换方式进行。

将 hexo 命令简单化

1
2
3
4
5
"c": "hexo clean",
"g": "hexo generate",
"d": "hexo deploy",
"s": "hexo server",
"p": "hexo clean && hexo generate && hexo deploy"

升级了 hexo ,重新开始。

node版本升级到 16.19.0;16开头的最后一个稳定版本。
npm版本自动更新到 8.19.3;

升级是为了使用vue3.0作准备和基础。学习的东西有很多,新知识也需要多更新学习。

加油吧!