closertb.github.io
closertb.github.io copied to clipboard
closertb
浏览issue 或 我的网站，即可查看我的所有博客
## 关于这篇文章 - Node在我的工作实际应用中，具体的业务界限； - 选型的思考 - Koa-spring到底是个什么概念； - 中间件的应用 > 如果你感兴趣，可以fork项目，自己体验一下 [Koa-spring](https://github.com/closertb/koa-spring)：https://github.com/closertb/koa-spring [related-client](https://github.com/closertb/koa-spring-client): https://github.com/closertb/koa-spring-client ## 万事开头难 在转型前端前，我是一个Java练习生（Servlet，SSH，SpringMvc都只会照着写），嗯，真的是练习生。几年后，又走上了接口开发的老路，虽然这不是自己第一次用Node（先前，去淌过SSR的水:[初探SSR，React + Koa + Dva-Core](https://github.com/closertb/closertb.github.io/issues/35)），但写接口服务，这仍然是黄花闺女上花轿：头一回。虽然看过，听过很多大佬将Node运用（BFF，SSR）到业务，延伸大前端的业务覆盖范围，但自己还是对界限，Node承担的角色有很多疑惑，为此，还去脉脉上发了个动态，期望大佬指点迷津。但自己的路，真的只有自己知道那个路口是出口。  最后鉴于这是一个测试用的内部系统，就确定前端页面接口全部直接对接数据库；登录，权限，日志作为中间层对接公司的公共服务。确定完边界后，开始纠结框架选型。虽然自己私下都是用Koa，但感觉离实际运用到业务，还是缺少一定的便捷性。后面又接触到EggJs，Nest，routing-controllers。[EggJS](https://docs.nestjs.cn/)是阿里内部的专用Node框架，成熟自然不言而喻，但对我来说，框架太重，但里面很多思想是值得借鉴的。[NestJs](https://docs.nestjs.cn/)和自己期望的很近，风格和SpringMvc非常相似，官方文档看似也比较全，但同时制造了很多概念，和Egg一样，太重，也许没选它也和只支持Express有关吧。[routing-controllers](https://github.com/typestack/routing-controllers#example-of-usage)给人的感觉就刚刚好，SpringMvc的开发风格、Koa的中间件机制，自由发挥，一见钟情的感觉。 ## 工程搭建 ### 主框架：routing-controllers + Koa...
## 关于这篇文章 - 自定义装饰器 - 继承的应用 - 涨过的见识 > 如果你感兴趣，可以fork项目，自己体验一下 [Koa-spring](https://github.com/closertb/koa-spring)：https://github.com/closertb/koa-spring [related-client](https://github.com/closertb/koa-spring-client): https://github.com/closertb/koa-spring-client 技术栈：koa + Sequelize + routing-controllers + typescript 上一篇：[Koa-spring：后端太忙，让我自己写服务(上)](https://github.com/closertb/closertb.github.io/issues/40) ## 自定义装饰器 去年我特别看好装饰器在前端的发展前景，直到React开始推崇Hooks，并持续大热，这严重压缩了Javascript中类的应用（没记错的话：上一次是函数式编程）。而现阶段的装饰器是依赖于类的，在未来可能这种局面可能会被改变，一种全新的装饰器语法会诞生。还未了解过装饰器的，可以看一下[阮一峰：ES6入门之装饰器](http://es6.ruanyifeng.com/#docs/decorator) 在上一篇文章写到利用中间件来处理那些重复的逻辑，但遗憾的是，不是所有的重复逻辑都适合用中间件来处理。比如上一章讲过Sequelize的查询结果是一个包装过的结构，在赋值成响应体时，需要调用toJson方法或则使用JSON.stringify格式化。开始在查询时设置了{ query: { raw: true }},...
### 洋葱模型 学过或了解过 Node 服务框架 Koa 的，都或许听过洋葱模型和中间件。恩，就是吃的那个洋葱，见下图：  Koa 是通过洋葱模型实现对 http 封装，中间件就是一层一层的洋葱，这里推荐两个 Koa 源码解读的文章，当然其源码本身也很简单，可读性非常高。 - [Koa.js 设计模式-学习笔记][1] - [从头实现一个 koa 框架][2] 我这里不过多讲关于 Koa 的设计模式与源码，理解 Koa 的中间件引擎源码就行了。写这篇文章的目的，是整理出我参照 Koa 设计一个 Http 构造类的思路，此构造类用于简化及规范日常浏览器端请求的书写：...
面试官：对这个数组去重: ```js const dupArr = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]； ``` doddle： ```js [...new Set()]; // [2, 3, 4, 5, 6, 7, 32] ``` 面试官：嗯，不错，知道用ES6语法，关于Set还知道什么？ doddle：嗯......(不知所云一堆堆) 面试官：WeakSet呢？ 距离ES6的发布应该有5年了，但除了const、import，..., 箭头函数这些新特性在工作中常接触外，Map、Set、Symbol出场机会还是寥寥无几，至少不如const、import露脸机会多。进来抽空去刷了一下算法，发现好的算法实现真的需要依赖好的数据结构。这篇文章着重讲怎么讲这些新的数据结构应用进日常开发以及刷Leetcode ## 重学Set 关于Set，我个人觉得最好的入门文档，还是出自MDN：[JavaScript 标准内置对象-Set](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set)；里面涵盖了一些标准用法，使用场景，API介绍等，这里就不再赘述。 >...
近来手痒，又陷入了自我捣腾的无限循环。 其实事情是这样的，最近阿里云[搞活动](https://www.aliyun.com/1111/2019/group-buying-share?ptCode=46214C756BD4FA0A7A53EAA6ECEF2ED8647C88CF896EF535&userCode=bz1yqsf9&share_source=copy_link)（嗯，友情打广告），229买了个3年版低配服务器；前端时间写[用React + Github Graphql API自定义你的博客](https://github.com/closertb/closertb.github.io/issues/34), 见识了Github Action的强大，所以就尝试打造自己的前端构建部署工作流程；也许你看到过很多大厂的前端自动构建部署，但鲜有尝试，今天就可以自己动手啦，撸起来吧。  ### 从workflow看流程 Github Action workflow大概长这样： ```yml name: Deploy static source to my server on: push: branches: -master jobs: build: runs-on: ubuntu-latest...
## 开胃菜：OSI五层网络模型 - 五层及其涵盖的协议  - 头部示意图  ## DNS查询 域名和人名一样，只是为了方便我们记住某个网站的进入方式，实际上我们访问的是这个域名关联到的服务器。而从域名到映射相应服务器的过程，叫做dns解析。以www.taobao.com为例子，dns查询会发生如下的过程： - 首先会去查询浏览器的缓存，看曾经是否有过解析记录，如果有的话就直接请求，如果没有继续下面； - 由于浏览器的缓存有限，当新的缓存记录加入时，老的缓存就会被放入电脑的本地缓存。查询本地缓存是否有DNS 解析记录，有的话就直接请求，linux可使用如下命令进行查询： ```cmd ➜ ~ nslookup closertb.site Server: 192.168.1.1 Address: 192.168.1.1#53 // Non-authoritative 代表的就是本地存在缓存，直接返回，没有走外网dns查询 Non-authoritative answer:...
## 关于这篇文章 - Node多进程 - 进程通信 - 闭包与立即执行 > 如果你感兴趣，可以fork项目，自己体验一下 [Koa-spring](https://github.com/closertb/koa-spring)：https://github.com/closertb/koa-spring [related-client](https://github.com/closertb/koa-spring-client): https://github.com/closertb/koa-spring-client 技术栈：koa + Sequelize + routing-controllers + typescript 上篇：[Koa-spring：后端太忙，让我自己写服务(上)](https://github.com/closertb/closertb.github.io/issues/40) 下篇：[Koa-spring：后端太忙，让我自己写服务(下)](https://github.com/closertb/closertb.github.io/issues/41) ## Node多进程 ### 进程与线程 - 进程：是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础，进程是线程的容器（来自百科），进程是**资源分配**的最小单位。每个进程都拥有自己的独立空间地址、数据栈，一个进程无法访问另外一个进程里定义的变量、数据结构，只有建立了 IPC 通信，进程之间才可数据共享。...
**`对于一个传统的人，跨年永远是在大年三十的晚上。`** 大学毕业已七年，做WEB开发五年，从央企出来已三年，时间真的过得飞快，而自己的成长似乎没有自己预想的那么快。 ### 工作 在2018年，自己几乎写了一年中后台的业务。天天围绕着Antd，React工作，写不完的业务。2019年看起来似乎幸运很多，接触了更多的技术，实践了更多新学到的知识。 虽然公司因为融合大面积裁员，但自己所在的金融纹丝不动，幸运的是我没被裁，不幸的是没拿到N+1（矛盾）。人手变多了，业务不是那么重了，大展（lian）身手的机会就到了。 自己做的第一件事，就是把去年总结出的基于Antd组件库封装做了开源，是真正的开源，有文档库、Demo的那种，目前star：51，fork：7, 完全出乎自己的意料: - [文档地址](http://doc.closertb.site) - [组件库源码](https://github.com/closertb/antd-doddle) - [文档编写心路历程](https://github.com/closertb/closertb.github.io/issues/31) 第二件事，应该就是基于Koa + React，尝试了SSR服务端渲染。思路很简单，但知识点还是很多，三种Router(HashRouter, StaticRouter, HistoryRouter)的应用场景； ReactDom中render与hydrate的使用区别；React生命周期，以及Docker + PM2部署Node服务；并写下一篇文章：[《初探SSR，React + Koa + Dva-Core》](https://github.com/closertb/closertb.github.io/issues/35) 第三件事，还是Node相关。背景就是后端太忙，前端太闲，需求太紧，所以做了一个大胆的尝试，页面的接口前端自己接，直接对接数据库与第三方服务，不能说多成功，但至少完成了。但自己确实学到了很多，Node进程、Koa深入理解、Http等，总结都写下了三篇：[《Koa-spring: Node进程通信的实践》](https://github.com/closertb/closertb.github.io/issues/42) 还有很多琐碎的小事，比如对接公司新埋点库、封装中间层来兼容老的埋点[基于Proxy，优雅封装JSBridge](https://github.com/closertb/closertb.github.io/issues/44)。2019不再是个业务仔，进阶了组件化，用工程化解决了自己组里开发人员的双手。 ##...
## 我与疫情 2020 转眼已来到3月，但疫情的突袭，让这个春节迟迟没有开始，也没法结束。这段时间看似是充电自我提升的大好时光，但家国情怀深厚的我为疫情真的是操碎了心，时不时都要看看哪里数据猛增了，哪里暴发了。结束一个月的在家办公，带着口罩在公司上班，状态稍有好转，注意力终归回到了技术。 最近在组里推BFF Node接入与微前端改造，看到了组里各式各样实现地业务代码（组件），有激进开放的整个页面都用hooks实现，有沉迷于过去的停留于redux + saga + model的类组件写法，当然更多的是类组件中的子组件参和几个hooks。我带着好奇之心去goggle了一下这两个谁胜一筹，于是有了此文。 ## hooks vs class 网上看了很多大佬观点，但脱离业务的争论都是耍流氓。作为眼见为实躺坑无数的练习生，我决定用事实说话。说那么多干嘛，上代码： 慢...，先说说接下来要干的事情： - 进入一个列表页面，首次进入，发起请求，获取列表数据； - 列表有搜索框，支持条件搜索和重置； - 列表支持翻页； - 页面弹出一个对话框，用于，新增，修改数据； - 修改数据时，需要发起一个请求，去获取详情； 发现没，这就是一个标准的`CRUD`，页面大致长这样：  ### 肤浅的看-表面...
写于：2017-07-16 ## 起 **原谅我是一个标题党，其实这个坑和fetch关系不大**，归根结底是发送http响应的问题，闲话少说，直接说事。前面自己为了好玩，在自己的练手项目里，将vue-resource替换成原生JS的fetch API，使用效果还是极佳的，完全没有其他原生API那种晦涩感。 ## 夯实基础 前面一篇[文章fetch][1]已入过门，所以这只说重点，之前使用vue-resource和fetch时，在Conten-type设置上吃过不少亏，所以自己做了大量功课，重要的事情说三遍，post请求content-type,即数据请求的格式主要设置方式： - application/x-www-form-urlencoded（大多数请求可用：eg：'name=Denzel&age=18'） - multipart/form-data（文件上传，这次重点说） - application/json（json格式对象，eg：{'name':'Denzel','age':'18'}） - text/xml(现在用的很少了，发送xml格式文件或流,webservice请求用的较多) ## 问题描述 我想通过fetch异步上传一张图片到服务器保存，然后返回服务的响应地址（需求很简单，有没有）。于是我这样写的代码： ```javascript let data =new FormData(); data.append('file',$("#realFile").files[0]); data.append('name','denzel'), data.append('flag','test') const option =...