HJ BLOG

刚接手了一个项目，老板让我统计一下代码行数，不看不知道，一看吓一跳，一起看看你写了多少代码吧。 Node Version: 14.18.1 终端执行node ./line.js 即可。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657// line.jsconst fs = require("fs");const path = require("path");const folderPaths = [path.resolve("./", "src")];const excludes = [ "nide_modules", "demo", "static", "docs", "__mocks__", "dist",];l ...

状态合并看一下如下代码，不知道大家会有什么感想？ 12345678910import React, { useState } from "react";const Demo = () => { const [state1, setState1] = React.useState(""); const [state2, setState2] = React.useState(""); const [state3, setState3] = React.useState(""); // 4,5,6,7.... return <div>xxx</div>;}; 函数组件通过 useState 更新状态，这就会出现一个组件内出现大量 useState，看上去很不爽，但又没什么毛病。 是否可以像类组件一样，通过 setState 维护多个状态呢？ 当然，我们改造一下。 1234567891011121314151617import Re ...

简介关于代码评审（Code Review），代码评审也已经是许多组织的标准化实践。在许多团队在尝试代码评审实践时，却有如下的疑问：代码评审活动究竟有没有达到期望的实际效果？ 给了我一大堆代码，到底该从哪里看起？哪些方面是我该评审的？哪些不是？ 别人有没有认真评审我的代码？如何让别人更容易的评审代码？ 理解代码评审的核心目标，建立关于代码评审的正确预期。 了解代码评审为什么可能无效，并采取有针对性的实践来提升代码评审的效果。 为什么要做代码评审不少同学认为代码评审就是用来查错的，甚至希望用代码的缺陷数量来检验代码评审的效果。这低估了代码评审的价值。代码评审最本质的作用不是问题发现。除了代码评审，我们有更多更好的手段来发现问题。代码评审的作用更多是关于社会学的，是一种长期行为和组织文化。 CR 是代码规范性的保证编码者视角：良性的社交压力你正在紧张的编码，交付时间迫在眉睫。你的组织对代码的单元测试有一个要求：凡是新增的代码，必须有完整的自动化单元测试。但是，这压力之下，你想给自己降低一点要求，不写这部分待的单元测试了，以后再编写吧，或者为了应付工具的覆盖率要求，先写一点不那么有用但是却 ...

前言 目的规范化团队的代码提交管理，方便与明确知道提交记录的目的。 便于程序员对提交历史进行追溯，了解发生了什么情况。 一旦约束了 commit message，意味着我们将慎重的进行每一次提交，不能再一股脑的把各种各样的改动都放在一个 git commit 里面，这样一来整个代码改动的历史也将更加清晰。 格式化的 commit message 才可以用于自动化输出 Change log。 提交预览提交格式参数说明(type)参数说明(scope)参数说明(subject)示例 <类型>[可选 范围]: <描述> 1<type>(<scope>): <subject> 参数说明： 123456789scope(可选) scope用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。 例如在Angular，可以是location, browser, compile, compile, rootScope, ngHref, ngClick, ngView等。如果你的修改影响了不 ...

前言 下文分支命名不规范，太山寨，忽略就好，因为不是重点。 很抗拒写这类文章，感觉这是作为开发最基本的技能要求，但现实狠狠的打了我的脸，很多同学并不知道怎么解决冲突，甚至不知道为什么会有冲突？ 冲突从何来？ 不会画图，看文字描述吧 正常的项目开发我们不会直接基于主干（master）开发，而是基于 master checkout 出我们自己的迭代分支 dev，然后大家基于 dev 分支再次切出自己的开发分支，例如 A 同学基于 dev 分支切出了 a 分支 , B 同学基于 dev 分支切出了 b 分支，然后大家一起愉快的进行代码开发。 但不巧的是，A 和 B 修改了相同的文件（index.ts） branch: a 123/** 开发分支 */export const NAME = "柯南";复制代码; branch: b 1234/** 开发分支 */export const NAME = "小敏";export const AGE = 18;复制代码; 由于 A 效率比较高，先将代码提 PR 合并到 dev 分支上了，当 B 去提 P ...

1. Git 的最小配置配置基本用户信息12git config --global user.name "louhaojie"git config --global user.email "851681631@qq.com" ❝ 思考: 为何要做 User 信息配置？ 提交代码到 本地仓库时，git 会先检索本地仓库的.git/config 文件，如果没有 user 的信息，则使用全局的配置文件（符合就近原则）. Git 提交都会使用这些信息，它们会写入到你的每一次提交中. ❞ config 的三个配置作用域缺省等同于 local 123git config --local # local只对某个仓库有效git config --global # global对当前用户所有仓库有效git config --system # system对系统所有登录的用户有效 查看配置后的 User 信息显示 config 的配置, 加 –list 123git config --list --localgit config --list -- ...

简介pnpm (opens new window)含义为 performant npm 意指『高性能的 npm』，与 npm 一样的都是软件包管理工具。pnpm 比其他包管理器快 2 倍 国内源设置国内源可以软件下载速度，使用 nrm 命令可以快速设置国内源。 nrmnrm 命令可以方便的设置镜像，首先安装命令。如果安装不成功，可以先按上面步骤将 npm 手动设置为淘宝源。 1npm install -g nrm 常用命令镜像列表 1nrm ls 结果如下 123456npm ---------- https://registry.npmjs.org/yarn --------- https://registry.yarnpkg.com/tencent ------ https://mirrors.cloud.tencent.com/npm/cnpm --------- https://r.cnpmjs.org/taobao ------- https://registry.npmmirror.com/npmMirror ---- https://skimdb.npmjs.com/ ...

ts 类型定义1.1 布尔类型(boolean) 1const flag: boolean = true; 1.2 Number 类型 1const num: number = 1; 1.3 String 类型 1const str: number = "hello"; 1.4 undefined 类型 undefined 和 null 两者有各自的类型分别为 undefined 和 null 12let u: undefined = undefined;u = null; 1.5 null 类型 undefined 和 null 两者有各自的类型分别为 undefined 和 null 12const n: null = null;n = undefined; 1.6 Symbol 类型我们在使用 Symbol 的时候，必须添加 es6 的编译辅助库 需要在 tsconfig.json 的 libs 字段加上 ES2015 Symbol 的值是唯一不变的 1234const sym1 = Symbol("hello");const s ...

typescript 简介 TypeScript 是由微软公司在 2012 年正式发布，现在也有 8 年的不断更新和维护了，TypeScript 的成长速度是非常快的，现在已经变成了前端必会的一门技能。TypeScript 其实就是 JavaScript 的超集，也就是说 TypeScript 是建立在 JavaScript 之上的，最后都会转变成 JavaScript。真的好用，比如说它的扩展语法、面向对象、静态类型。如果一个前端项目我可以做主，我会在强烈的要求所有人都使用 TypeScript 的语法进行编程。 ts 安装与编译 第一步 新建一个空文件夹用来学习 ts 第二步 全局安装 ts 和 ts-node 12npm i typescript -g // 全局安装tsnpm i -g ts-node // 全局安装ts-node 第三步 生成 tsconfig.js 配置文件 1tsc --init 我们就先按照自动生成的 tsconfig 配置项去使用 里面的配置咱们可以先不去管它 后续熟练了再去配置 第四步 在项目下新建一个index.ts直接写入 ...

栅格介绍名词解释CSS 网格布局(Grid Layout) 是 CSS 中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行。 栅格系统与 FLEX 弹性布局有相似之处理，都是由父容器包含多个项目元素的使用。 兼容性下面是栅格系统兼容性数据，你也可以在 https://caniuse.com/ 网站查看，所以在根据项目使用的场景决定是否使用栅格布局。 基本知识下面了解栅格有关的元素说明，可以帮助你更好的使用栅格。 声明容器块级容器 1234567891011121314151617181920212223242526272829303132333435363738<style> * { padding: 0; margin: 0; } body { padding: 200px; } article { width: 400px; height: 200px; border: solid 5px silver; display: grid; gr ...