发布自己的npm包
本文主要提一下，往公网上发布自己的npm包，大概的流程。目前的公司，稍微正经点的，都会有贴合自身业务的一套组件库，封装成所谓的“SDK层”，这样能够极大的减少前端项目的代码量。当然，这需要业务自身足够的稳定，否则，懂得都懂。
1. github创建一个仓库，npm初始化一下，完善包的一些必要字段。2. 假如自己想要复用的代码3. 登陆发布npm login
npm publish
具体操作参考下面文章，写的非常详细
https://juejin.cn/post/7039140144250617887
整个流程还是很简单的，当然在实操过程中碰到一个小问题。npm login 没有出现 username,反而是跳转到了cnpm注册...,解决方案：npm config set registry https://registry.npmjs.org/
更新包的版本// patch：补丁号，修复bug，小变动，如 v1.0.0->v1.0.1
npm version patch
// minor：次版本号，增加新功能，如 v1.0.0->v1.1.0
npm version minor ...
CSS系列：渐进式展示文本效果的实现
本文主要介绍一下渐进式的展示文本效果实现先给一张最终效果图：
这个效果的实现，主要是借助animate和framer-motion库的几个钩子函数useTransform、useMotionValue。
1. html部分return <motion.h2 className={className}>{displayText}</motion.h2>;
2. useTransform、useMotionValue// text为props传入的值
const textIndex = useMotionValue(0);
const baseText = useTransform(textIndex, () => text);
const rounded = useTransform(count, (latest) => Math.round(latest));
const displayText = useTransform(
rounded,
(latest) => `${baseText.get().slice(0, ...
Webpack系列：第八回
本文简单聊聊webpack同vite的差异众所周知，webpack是大部分项目的标配，而vite，更是后起之秀。原因在于vite的极速开发体验，一个字儿：快。vite是怎么做到的呢？Webpack 是 “先打包再干活”，Vite 是 “边干活边打包”——Vite 快的本质，是跳过了 “全量打包” 的冗余步骤，只在需要时才处理文件。
前者全量打包，后者按需编译，没有打包。vite利用浏览器能直接识别 ES Module（import/export）的特性，启动时只搭好服务器，不碰任何文件。浏览器要哪个文件，Vite 才去编译哪个，相当于 “按需开工”，启动速度自然秒级。注意，在开发环境下，vite是没有打包的动作的，这里的编译指的是把 “浏览器不认识的文件” 转成 “浏览器能认识的文件”，比如 TS→JS、Vue 组件→JS+CSS、Sass→CSS）。在生产环境中才会用rollup去打包
编译工具的不同。前者用的babel，后者用的esbuild(go),比 JS 快 10-100 倍
热更新。一旦代码改动，前者会编译打包变动部分，后者也是编译变化的那部分，但是没有打包的动 ...
Webpack系列：第七回
本文杂记，记录一些webpack使用过程中碰到的奇奇怪怪的问题和知识点
react18初始化项目时，没有webpack默认是隐藏的，仔细观察可以发现，项目如下方式启动
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"analyze": "source-map-explorer 'build/static/js/*.js'"
},
此时需要暴露：
npm run eject
Sourcemap（源映射）是一种文件，用于将编译后的代码映射回原始源代码。说白了就是在开发模式时，在浏览器中调试代码时，看到的是源码而不是杂乱无章的变异之后的代码
React系列：第八回(createElement、render)
本文开始，我们将用几篇文章记录下，我们的my_react的实现逻辑。类似于vue的学习过程，我们将尝试手写react的重要组成部分，以便更为彻底的理解其底层实现。涉及的内容包括：createElement、render、cocurrent mode、fiber、render commit、reconcilliation及function components。
文本介绍createElement和render
先看看react的使用const content = React.createElement(
'div',
{
title: 'title',
id: 'id',
},
'川崎重工'
)
console.log('content>>>', content)
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(content)
从上面代码不难看出，通过调用createElement，会生成一种d ...
区块链文档0
本系列文章，将围绕实践中的项目，用于记录开发过程中，遇到的那些个事儿本项目也是一个极具挑战性的任务：基于opensuim开发一套前端代码编辑器，没错，就是要把vscode搬到页面上。我们的最终目的， 是为区块链开发者提供一整套在线敲代码的集成环境，渐进式提供各种链。
在正式内容开始前，先见到介绍些区块链相关的背景知识。
1.什么是区块链？区块链最好的解释就是一个公共数据库公链：任何人都可以参与的区块链，如比特币和以太坊。联盟链：需要得到许可的参与者才能加入的区块链，如R3 Corda和Hyperledger Fabric。私有链：仅允许特定组织或个人参与的区块链。
去中心化是基于P2P网络的，没有一台机器作为中心化的服务器的功能，网络中的每一台电脑都是平等的，任何一台掉线、宕机，都不会影响整个网络继续运行。
定量法币通常与背后的黄金或者所谓的GDP挂钩，算是相对固定（经济低迷时的过量发行暂且别考虑了）。加密货币，可以算作绝对的固定数量，或者少量的增发（可以弥补一些丢失的币等），防止通货膨胀。
加密
上面就是加密货币的三个典型特征，第一点借助p2p网络实现没问题，但是后面的二三两点存 ...
React系列：第七回(组件的设计模式)
本文我们聊聊react组件的设计模式(逻辑复用)一. render props在前面讲解登陆态持久化的文章中，我们实际上已经实践了render props：
const AuthRoute = ({ children}) => {
const token = getToken()
if (token) {
return <>{children}</>
} else {
return <Navigate to='/login' replace />
}
}
通过打印props我们能够看到，包裹着内容，实际上会在props中，以children的属性传递给AuthRoute组件。在AuthRoute中，我们将token的判断逻辑扔在了该组件中，其中包裹着目标组件。若有token，跳转到目标页面，否则，跳转到login。高效复用逻辑代码。
二. 高阶组件函数包裹组件，之前提到的memo就是一个实例，下面写一个HO ...
React系列：第六回(React的渲染流程)
本文简单聊聊React的渲染流程在前面介绍vue的系列文章中，我们通过手写vue类的方式，将vue的渲染流程基本介绍了，其框架底层的逻辑如下：
初次加载时， 数据的响应式处理和模版编译，完成初始化页面的显示。所谓数据的响应式就是让我们能够知道，什么地方用到了数据，然后在数据变化时，通知那些用到该数据的地方重新编译。而模版编译则是将模版代码转换成html代码，让页面能够显示
状态数据变化时， 以更新数据后的新虚拟dom和旧的虚拟dom为输入，经过diff和patch，找出差异， 更新差异，最后重新渲染
一. 那么在react中， 这个过程又是如何的呢？实际上无论什么前端框架，其渲染的逻辑都是一致的，只是实现的方式不同，react亦是如此。
初次加载时，JSX代码解析 –> render生成虚拟dom –> 挂载显示页面
状态数据变化时，修改状态setstate –> render生成新的虚拟dom –> update(旧Vnode 新Vnode) –> diff + patch –> 挂载显示页面
虽然整体逻辑如此，但是这里还需要做点扩展。r ...
React系列：第五回(事件)
本文记录一下原生事件和react事件机制的差异一. 基本介绍原生dom事件： 事件捕获 —> 目标dom —> 事件冒泡react事件系统（合成事件）： 事件在具体的dom节点上触发后， 会被冒泡到document上，document上所绑定的统一事件处理程序，会将事件分发到具体的组件实例中去。这一套机制被称为合成事件合成事件： 模拟原生dom事件所拥有的能力, e.nativeEvent 获取原生事件对象
二. 执行顺序
原生事件优先执行，合成事件后执行。子元素原生事件执行、父元素原生事件执行、子元素合成事件执行、父元素合成事件执行、document原生事件执行。
阻止合成事件间的冒泡: e.stopPropagation()；阻止合成事件与最外层document上事件的冒泡： e.nativeEvent.stopImmediatePropagation()
三. 为什么要用合成事件前面说了，合成事件会模拟原生dom的行为，那么为什么不直接用原来的呢，非要自己搞一套？主要是为了平台兼容。
四：差异
绑定方式：原生事件绑定在真实 DOM，React 事件绑定在虚拟 DOM ...
Vue和React数据流思考
本文我们渐入佳境，在熟练了vue和react这俩主力框架之后，尝试着探讨一下两者在数据流方面的异同。
基础概念解释
vue的状态，是双向绑定， 也就是双向数据流。而react是典型的单向数据流。所谓的双向数据流，就是父组件能够变更给到子组件的状态，同时子组件也能够直接修改从父组件接收的状态。而单向数据流，则是只能父组件修改，子组件无权变更。就像一个瀑布，只会从上往下，不存在自下向上。
优劣对比鄙人用vue开发了几个大的项目，react也用了不少，个人觉得这就是两者最大的区别，也是我为什么更喜欢react的缘由。双向数据绑定我觉得纯属多此一举，开发过程中尽量少用。一般的项目两者没啥差别但是，如果是一些比较复杂的项目（这里的复杂主要指的是某些状态涉及诸多的组件），开发到最后就会发现，状态追踪调试变得极其的困难。因为修改状态的入口太多，导致你很难查出到底是哪个组件更改了目标状态。相比之下，react的单向数据流则非常的清晰，打个断点即可。
同vue的差异
react是一个库，vue称之为框架。vue实际上为我们提供了一整套的解决方案，而react库专注于html和js之间打通的关系。什 ...