blob
blob copied to clipboard
dravenww
个人前端技术博客，各种源码分析，工具分享
> 2020年下半年，有几张图片刷屏：有人骑在自行车上看书，有人边骑车边用电脑，有人床上铺满了一摞摞书……“边骑车边用电脑”的同学被称为“卷王”登上热搜。 > 慢慢的这些同学毕业了，卷王带着卷走上了社会，带动了其他人一起卷，卷的人越来越多了，苦不堪言，就导致了一些重复造轮子和造一些毫无意义的轮子的现象出现。 造轮子，本来是件好事，但是随着内卷的出现，造轮子就慢慢演变成了一个极端，出现了凭空造轮子和重复造轮子的事情，既不能服务于业务，还使得内卷现象越来越严重，真正的苦不堪言。 分析当前业务遇到的问题，进而产生新的思路和总结，利用技术的手段提升工作效率，提高开发速度，才是真正的有意义的轮子，也不枉**卷**一场。 # 场景 CMS(content management system)一词出现已久，通常指的是内容管理系统，是一种位于WEB前端和后端办公系统或流程之间的软件系统。在开发cms后台的过程中，最最常用的应该就是Table了，例如 [antd的table](https://ant.design/components/table-cn/):  这应该是最最常用的开发后台管理系统中使用到的组件了，没有个Table，都不好意思说是个cms系统。不过在稍微庞大的业务中会存在一个非常常见的问题，就是一个数据源会有很多很多字段需要进行展示，如果都展示出来呢，就会存在一个非常不美观且乱糟糟的感觉，眼花缭乱。同时不同的人，希望看到的字段也是不一样的，比如A同学希望看到标题0、1、2、3，B同学希望看到标题1、2、3、4，C同学希望看到标题7、8、9、10等。 这样就是一个非常个性化的需求了，如果希望后端同学来参与的话，就会增加后端同学的工作量，同时前端工作也不会相应的减少。得益于浏览器的localstorage存储能力，前端就可以实现，根本不需要后端同学的参与。 # 实现 首先，既然是antd的Table组件，我们肯定是要基于现有的功能去实现这个需求，所以我们需要在Table组件的基础上套一层，既不能影响Table的展示，同时还能够定制展示列。那我们就可以列一下需求了： > 1. 不影响Table的展示 > 2. 可以选择自定义展示列 > 3. 可以对展示列进行排序 > 4. 不会对业务产生其他影响(这是最主要的)...
## 表面工作 在日常的工作和学习中，经常会探测自己的底线，计算机基础好与不好，完全能够决定一个人的代码水平和bug出现率。相信大家对这些知识都学过，只是长时间不用就忘记了，今天带大家来回顾一下。 本着**通俗易懂**的原则，今天把这个题目讲明白。 我们来聊聊这个非常常规的问题，为什么 `0.1 + 0.2 !== 0.3`.在正式介绍这个问题之前，需要了解下面几 个前置知识。 - 计算机二进制的表现形式以及二进制的计算方式？ - 什么是原码、补码、反码、移码，都是用来做什么的？ 差不多这几个就够理解这个常规的 `0.1 + 0.2 !== 0.3`问题了。 ## 第一个前置知识，二进制 我们知道在日常中，有很多种数据的展现，包括我们日常生活中常规使用的10进制、css中表示颜色的16进制、计算机中进行运算的二进制。 ### 二进制的表现形式 在计算机中的计算都是以二进制的形式进行计算的，也就是全都是0或1来表示数字的，我们拿10进制进行举例，如： > - 10进制的...
## 背景 由于要做一个使用起来比较舒服的轮子，最近研究了下React的状态管理库，当然，仅限在使用层面，也就是用着舒服的角度来选择到底使用哪个状态管理库。本着在Github上面看看React社区内状态管理库的流行程度和使用程度的层面，来进行选型，然后就有了这篇文章，关于我们最后选择了哪个，文章末尾告知。 选择库的原则如下： > - 全面拥抱typescript，so选择的库需要对typescript支持友好 > - react自从16.8引入hooks，接下来就开始了函数式编程的时代，所以不要有class这玩意 > - 一定要使用简单，不要太复杂，使用起来很轻量，重点是舒服 > - 支持模块化，可以集中管理，原子性低 > - 支持esmodule，因为后面会考虑迁移到vite，虽然现在还是webpack 截止目前为止，在Github上面看了一下当前比较流行的几个状态管理库的star数和used by的数量，以及npm上面的周下载量(weekly downloads)，这可以从某些方面说明明该框架的受欢迎程度，也有很小的可能性不准确，不过很大程度上，对框架选型是有所帮助的。 | 库名 | github star | github used...
hello，大家好，我是德莱问，今天为大家带来vite解析。 最后提供一个使用vite+react+concent的一个后台项目。 # 写在前面的话 vite，号称是下一代前端开发和构建工具。vite的出现得益于浏览器对module的支持，利用浏览器的新特性去实现了极速的开发体验；能够极快的实现热重载(hmr). 开发模式下，利用浏览器的module支持，达到了极致的开发体验； 正式环境的编译打包，使用了首次提出tree-shaking的rollup进行构建； vite提供了很多的配置选项，包括vite本身的配置，esbuild的配置，rollup的配置等等，今天带领大家从源码的角度看看vite。 vite其实是可以分为三部分的，一部分是开发过程中的client部分；一部分是开发过程中的server部分；另外一部分就是与生产有关系的打包编译部分，由于vite打包编译其实是用的rollup，我们不做解析，只看前两部分。 # vite-client vite的client其实是作为一个单独的模块进行处理的，它的源码是放在`packages/vite/src/client`；这里面有四个文件： - client.ts： 主要的文件入口，下面着重介绍； - env.ts：环境相关的配置，这里会把我们在vite.config.js(vite配置文件)的define配置在这里进行处理； - overlay.ts: 这个是一个错误蒙层的展示，会把我们的错误信息进行展示； - tsconfig.json： 这就是ts的配置文件了。 ## 工具部分 client里面是提供了一系列工具函数，主要是为了hmr；  ## websocket部分 -...
## wp2vite hello大家好，我是德莱问， 首先介绍一下今天的主角，这是一个命令行工具、自动化工具。 工具的作用是一键让使用webpack来进行开发和构建的项目支持使用vite来进行开发和构建。 - github: [https://github.com/tnfe/wp2vite](https://github.com/tnfe/wp2vite) - npm: [https://www.npmjs.com/package/wp2vite](https://www.npmjs.com/package/wp2vite) 如果有人不知道[webpack](https://webpack.js.org/) 和[vite](https://cn.vitejs.dev/) 分别是什么，可以点击相对应的名字去到它们的官网瞅瞅。 不过对于一个前端er来说，默认你们是知道webpack的；如果你不知道vite的话，建议了解一下，号称是下一代前端开发与构建工具. 前段时间写过一篇[vite解析和尝试的一篇文章](https://github.com/dravenww/blob/issues/13) ,在文章最后，简单说明了一下："vite,真香"。 ## 安装与使用 关于wp2vite的安装，与其他命令行工具安装是一样的： ``` npm install -g wp2vite or yarn global add wp2vite...
hello，大家好，我是德莱问。 写作是件锻炼人的事情，也是对自己的一种习惯的培养，对一段时间以来的一个总结，同时也是对这段时间以来所学知识的一个巩固。在越来越卷的前端领域，大家都在疯狂的学习，如果自己偷懒，将会落后于别人。 老天爷是公平的，付出多少辛苦，就有多少回报。有时候可以自己开始欺骗自己，可是真正用到的时候，现实就会啪啪打脸。 ## (前言)说点事情 当前太平盛世，可是互联网领域可算是一直乱世。今天我们所说的是短视频领域。 短视频已成为一种越来越流行的媒体传播形式。像微视和抖音这种 app，每天都会生产成千上万个精彩短视频。而这些视频也为产品带来了巨大的流量。 随之而来，如何让用户可以快速生产一个短视频；或者产品平台如何利用已有的图片、视频、音乐素材批量合成大量视频就成为一个技术难点。 今天为大家带来的是一个基于node.js的轻量、灵活的短视频制作库。您只需要添加几张图片或视频片段再加一段背景音乐，就可以快速生成一个很酷的的视频短片。  - github地址：[https://github.com/tnfe/FFCreator](https://github.com/tnfe/FFCreator) - npm地址：[https://www.npmjs.com/package/ffcreator](https://www.npmjs.com/package/ffcreator) 这篇文章将会带领你从头到尾制作一个短视频。 ## 生成项目并安装依赖 首先得建一个项目，然后执行npm init，一顿回车就好了。 ``` mkdir ffcreator-example && cd ffcreator-example npm init ``` 接下来进行今天咱们这个包的安装操作...
## 问个好 hello,大家好，我是德莱问，又和大家见面了。  当在初六抱怨假期为何如此短暂的时候，已然来到了初七。 预祝大家，初七快乐，开工大吉！！！ 广告时间： - 欢迎关注我的github：[https://github.com/dravenww](https://github.com/dravenww) - 欢迎star我的blob: [博客地址](https://github.com/dravenww/blob/issues) 正文在此开始。 ## Vue2的proxy实现 众所周知，Vue2中实现代理的方式是通过数据劫持来实现的，也就是使用的`Object.defineProperty`;简单举例如下： ``` var obj = {}; var initValue = 20; Object.defineProperty(obj, "age", { get: function...
## 问个好 hello,大家好，我是德莱问，又和大家见面了，年后开工在即，新的一年新的气象，祝大家新年快乐，牛年大吉。 欢迎关注我的[github](https://github.com/dravenww)，文章的更新和发布第一时间会在github进行 这是[博客地址](https://github.com/dravenww/blob)，欢迎+star ## 来个介绍  - 先奉上组件库的名称：transx - github地址：[https://github.com/tnfe/transx](https://github.com/tnfe/transx) - npm参考: [https://www.npmjs.com/package/transx](https://www.npmjs.com/package/transx) - 示例地址：[codesanbox](https://codesandbox.io/s/practical-sid-0ubim) ## 安装 ```shell npm install transx or yarn add transx ``` ## 使用...
webpack的chunks是通过webpack内部的一个插件来实现的，在3版本及以前使用的是CommonsChunkPlugin;在4版本后开始使用SplitChunksPlugin，我们对于3版本及以前的不做解释，着眼未来，我们来看SplitChunksPlugin；我们根据配置来看： ``` module.exports = { optimization: { splitChunks: { chunks: 'async', minSize: 30000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority:...
hello，大家好，我是德莱问。 本篇文章将会围绕Vue3的另外一个主要的文件夹reactivity来进行讲解，也就是Vue3中对外暴露的compositionApi的部分，，越来越有React Hooks的味道了。reactivity文件夹下面包含多个文件，主要功能在于computed、effect、reactive、ref；其他的文件是为其进行服务的，另外还有一个主入口文件index。reactivity下面对外暴露的所有api可见下图，我们本篇文件会结合使用对这些功能进行源码分析。  # 正文 正文在这里，正式开始。 ## computed computed的含义与Vue2中的含义是一样的，计算属性；使用方式也是和Vue2中差不多的，有两种使用方式： ### computed使用 ```JavaScript const {reactive, readonly, computed, ref} = Vue; const app = Vue.createApp({}); app.component('TestComponent', { setup(props) { // reactive...