仿生人会梦到敲代码么-CSDN博客

原创 vue3 + element 从0到1搭建前端基础框架

往往从0到1开发项目时发觉无从下手，或者很可能一步一个坑，因为大多基础框架公司已经搭建完毕的，新加入的成员也都是在此基础上进行功能模块的拓展。网上也鲜有详尽的全流程参考，多是某个局部功能的搭建，因此整理了一份包含以下方面的前端基础框架全流程搭建要义。

2022-12-04 23:27:14 2345

原创可视化散点图适配长宽比

可视化散点图默认会将散点自动填充至整个画布区域，这样就会导致散点图形变。这种形变是两方面带来的，一方面是自动选取最大和最小的xy轴坐标作为范围，可以想象成将一个长方形的图片塞入一个正方形的容器中，并且还需要全部显示出来，那么图片的长度就会被压缩；另一方面是画布区域的长宽比不固定而导致的形变，画布区域的长宽会根据显示器来自适应。

2022-09-28 13:23:39 369

原创详解 B2B 用户、组织、员工、角色

整理了一下 toB 多组织系统中常见的实体关系，往往在实际项目中这些基础模块是公司老前辈已经开发完成的，因此新人在此基础上开发一些相关的业务模块很容易被这些模糊不清的关系搞晕。

2022-09-26 15:59:54 1017

首先是读取h5ad文件使用的包，分别尝试了h5py、scanpy、anndata三个较为常用的包，scanpy和anndata读取一个3G左右大小的h5ad文件需要大概30s，h5py则1s不到的时间即可完成读取，主要的差异在于h5py没有构造稀疏矩阵（用来展示热力图），如果自行使用csc_matrix()方法进行处理的话，所需要的时间则和另外两个包几乎没有区别，因此推测主要的瓶颈在于对稀疏矩阵的处理上。...........................

2022-08-30 13:52:12 1658

原创 Echarts 散点图开启大数据量优化后获取框选数据

一、BugEcharts 官方提供的数据框选功能中，针对散点图可以添加 brushselected 事件来获取被框选的点的索引值，但是当使用 large 参数来开启大数据量优化后，再进行框选时存储选中点索引集合的字段 dataIndex 返回的是空数组。截止 5.3 版本该 bug 仍未解决，因此需要自行对散点图框选进行处理。二、处理逻辑所使用到的框选分为两种，矩形框选和不规则框选。矩形框选较好实现，只需要获取框选的四个顶点的坐标然后找出在此范围内的点即可。不规则框选则需要使用引射线法来对每个点

2022-05-31 11:08:13 2033 1

原创 Echart 实现多图表点击切替

一、功能需求散点图数目不固定单个散点图中有多组数据全部散点图同时展示在界面中，两种显示模式，主次视图和平铺视图主次视图时次要散点图会与主要散点图数据可进行点击互换主次视图点击右侧小散点图时会和大散点图交换，主要通过数据切换实现。数据结构[ // 1号散点图，两组散点 [{ 'X_tsne': [[111.111, 222.222],...], 'X_umap': [[111.111, 222.222],...], }], // 2号散点图，一组散点 [{ 'X_t

2022-05-24 10:48:01 1456

原创理解 Angular/Vue 依赖注入

最近面试问到了 Vue 组件间传值的问题，关于这个问题基本的那些 api 就不用多说了，但是夜深人静时突然思考什么时候需要组件间传值？解决了什么问题？有什么复杂的业务场景？不由得又想到了 Angular 的依赖注入，感觉如果我自己是面试官一定会问一下 Angular 和 Vue 有什么区别，如果回答一个重一个轻就属实有点过于拉垮了。总的来说，这些问题的本质在于对于目前模块化的前端开发来说，数据交互方面的最佳实践是什么，基于这个前提再去理解依赖注入就好很多了。一、依赖注入的目的解耦！不使用依赖注入时，

2022-04-28 02:56:55 353

原创 JS 异步方法及解决的问题

最近的一个区块链项目面试中被问到了 js 异步都有哪些，分别解决了什么问题。就知道一个 promise 解决回调地狱的我可谓是当场懵逼了，好家伙这也没背过啊，在此记录一下。一、异步都有哪些方法回调函数、事件监听、定时器PromiseWeb Workderasync/await二、解决了什么问题回调函数、事件监听、定时器执行一些需要等待的任务且不影响同步任务的进行。Promise解决了复杂业务场景中回调函数累加之后产生的回调地狱等问题。Web Workder由于 js 是单线程的，

2022-04-28 02:54:34 4258

原创 Vue 新状态管理工具 Pinia 初探

Pinia 是什么？由 Vue 团队核心成员开发的下一代 Vue 状态管理工具，也获得了尤雨溪的认可，只不过目前还和 Vuex 是不同的仓库。而在用法上最大的变化则是抛弃了 Mutation，以往在使用 Vuex 时始终觉得通过 Actions 来通知 Mutation 改变 State 的操作如果能简化成一部就会方便很多，新版本果然没有让人失望！Pinia 使用不照搬照抄官网的示例，决定首先在自己的博客中使用 Pinia 状态管理改造一下文章列表的获取。安装npm i piniamain.

2022-04-25 05:13:38 144

原创 svelte 与虚拟DOM

最近读了一下尤雨溪在知乎的回答《如何看待 svelte 这个前端框架？》，然后去了解了一下 svelte 这个已经超越 Angular 排到第三的新框架。与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。———Svelte 中文网虚拟DOM结合尤雨溪的文章，最大的不同在于 svelte 不使用虚拟DOM 的方案。而虚拟DOM 的优势也是很多面试题中所述一样，将原本直接操作 DOM 造成的负担转变为在内存中操作 DOM

2022-04-24 19:20:39 1477

原创日期格式 yyyy 与 YYYY

这是一个不易发现的bug，当使用日期组件时，如果使用YYYY则会使得某些情况下本年度12月的最后几天显示为下一年。如果格里历年的第一天是星期五、星期六和星期日，或是星期六和星期日，或正好就是星期日是格里历年的第一天（在ISO年是去年的最后一天）；又或者是星期一、星期二和星期三，或者是星期一和星期二，或正好就是星期一在格里历年的最后一天（是下一个ISO年的第一个星期），ISO周数年的年份会偏离格里历的年份。从1月4日至12月28日，ISO周数年和所有星期4的周数都会与格里历相同。yyyyYY

2022-04-24 19:19:33 856

原创博客搭建二三事

点此先来看一眼一、为什么自己搭建1、我想在自己的网站中去做一些有意思的事情，包括但不限于目前的博客和摄影。2、大型博客网站不够简洁，之前也有使用过简书、CSDN等一些博客网站，但简书的审核标准太奇怪，而且会锁掉已经审核过好几个月的文章，CSDN则是在提交文章时要选一堆内容（然鹅还是会来CSDN备份一份副本），我想要一个简简单单的个人网站作为积累，因此产生了动手自己做一个的想法。3、为什么不使用 Wordpress 这类成熟的博客模板？之前有使用过，感觉定制化的程度不太够，无法拓展一些自己的内容..

2022-04-22 05:05:17 1392

原创 SPA中的hash和history

一、hash 和 historySPA 即单页面应用，路由改变时不需要重新刷新整个浏览器标签页，为了满足这一需求就需要使用 hash 或 history 模式，目前 Vue、React、Angular 都支持这两种模式。hashurl 中会带有 # 号，# 号后的路由改变不会重新加载页面，但会记录在 window.hisotry 中，因此可以使用 history.back() 等方法，监听则通过 window.onhashchange() 方法。historyhisroty：利用 history.

2022-04-22 03:29:47 314

原创 RESTful API

RESTful API 是一种接口设计规范，使用了 RESTful API 规范后即便不看接口描述也能大概了解该接口的主要功能，比以往除了 GET 就是 POST 的接口设计清晰易读很多。遵循的规范GET：读取POST：新建PUT：更新PATCH：部分更新DELETE：删除1、接口由名词组成2、避免多级 url，应使用 query 参数来查询3、服务器应返回 json4、返回正确的状态码5、提供链接提供链接指的需要根据接口设计使得每个接口在请求的过程中提供出下一步操作需要的接口。

2022-04-22 03:01:49 51

原创状态管理业务场景

原本对状态管理的理解更多的是用于存储一些通用的比如用户信息、权限信息等来满足一些一对多或多对多的场景。后来着手一个对日项目后对状态管理有了更深的了解，不仅仅是普通的用户、角色、权限这些的状态，普通的增删改查也可以使用状态管理进行维护。业务场景是一个票据相关的后台管理系统，由于票据内容在随着使用时长的增加后会逐渐积累得越来越多，这也要求尽量减少后台接口的请求次数来优化使用体验。在以往的开发中，一个带有翻页的列表检索，有以下几种操作：条件过滤新增更新删除而在保证每页条目数不变的前提下（比如常

2022-04-22 03:00:59 72

原创 Vue 角色权限管理设计与实现

目前项目中使用到的角色权限管理共分为三级，分别是页面级、行为级（控件级）、接口级，这里记录一下三级权限在 Vue 中的实现。一、接口设计用户登录后该用户的角色与权限信息会一同返回给前端，前端将这些信息存储到状态管理里备用即可。权限信息为树形结构数据，包括：该用户可访问的页面数据该用户可执行的行为数据该用户可访问的接口数据三者的关系为页面数据为父级，页面数据内包含行为数据和接口数据，而行为数据和接口数据为兄弟级别。原本的设计将行为数据和接口数据设计为父子级的关系，后来发现这样做在实际业务中

2022-04-15 05:34:06 3324 1

原创 Vue + Refresh Token

一、关于 Refresh Token之前公司项目中使用了 Refresh Token ，作为前端理解 Refresh Token 花了一些功夫。为什么在已有 Access Token 的基础上还要再加一层 Refresh Token ？因为 Access Token 本身有过期时间，很多网站长时间不登录都会提示 Access Token 过期重新登录，然后某些记性不好的小伙伴就开始了忘记密码找回的流程，用户体验不是很好，而如果设置过长的 Access Token 过期时间那么安全性又会降低，Refres

2022-04-15 04:18:38 1559

原创 B2B 管理员创建新用户流程

实体包含组织 Tenant、用户 User、员工 Employee，当存在多个组织时，用户在不同组织下可以有不同的员工身份，为一对多的关系。管理员隶属于用户实体，拥有不同的用户 type。

2022-04-15 03:13:32 172

原创阅读笔记——《重构》（一）

一、为什么要重构但项目是要交付给客户的，是可以有效运行的代码，不是用以取悦学究的代码。诚然，面对紧张的项目周期，抽时间去进行“看似”与上线毫不相干的重构工作是一笔看不到实际回报的支出。但是真正运用重构之后就会发现如果想要使一个项目能够持续运行并且后期易于迭代，重构是必不可少的软件开发流程。什么是重构？书中给予了答案，重构就是在代码写好之后改进它的设计。没有什么软件的设计是在从0到1的过程中完全不变的，最初做软件时我也有这样的疑问，为什么不在一开始就设计好所有的功能模块然后进行开发？这样就避免了后期

2022-04-15 02:08:00 95

原创 http 状态码大全

带有 * 为常见状态码100～199 信息性状态码状态码说明100接收并继续101接收切换协议并继续200～299 成功状态码状态码说明200*请求成功201*成功创建202已接受203无法验证资源元信息204无内容205重置所有表单元素206部分内容300～399 重定向状态码状态码说明300多版本可用301永久重定向302*临时重定向303

2022-04-15 01:57:20 106

原创 Vue 3 生命周期

Vue 3 生命周期一览选项式 APIHook inside setupbeforeCreateNot needed*createdNot needed*beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmountederrorC

2022-04-15 01:44:03 238

原创理解 Vue3 使用的 Proxy

在 vue3 中放弃了 Object.defineProperty 来进行数据劫持，而改用了 Proxy 替代原本的方案。Object.defineProperty 的缺陷在于需要深度遍历并对每一个属性进行劫持，而对于没有属性的数组而言，数组的索引也可以视为被劫持的属性，但是和对象相同，对于新增的元素而言，不会触发监听事件，vue 对此的解决方案是劫持数组原型链上的函数，即便如此也仍旧无法监听对数组长度的修改。而使用 Proxy 进行劫持则弥补了这些缺陷，阮一峰的《ECMAScript6 入门》中对于

2022-04-15 01:43:10 9194

原创理解闭包概念

维基百科的闭包(计算机科学)这一词条对闭包的解释：闭包在实现上是一个结构体，它存储了一个函数（通常是其入口地址）和一个关联的环境（相当于一个符号查找表）。环境里是若干对符号和值的对应关系，它既要包括约束变量（该函数内部绑定的符号），也要包括自由变量（在函数外部定义但在函数内被引用），有些函数也可能没有自由变量。闭包跟函数最大的不同在于，当捕捉闭包的时候，它的自由变量会在捕捉时被确定，这样即便脱离了捕捉时的上下文，它也能照常运行。稍微有些晦涩难懂，重点在于当捕捉闭包的时候，它的自由变量会在捕捉时候被确

2022-04-15 01:41:50 162

weixin_42854769的博客