closertb.github.io
closertb.github.io copied to clipboard
closertb
浏览issue 或 我的网站，即可查看我的所有博客
## 说点什么 最近在做一个工程化强相关的项目-微前端，涉及到了基座项目和子项目加载，并存的问题；以前对webpack一直停留在配置，也就是常说的入门级。这次项目推动，自己不得不迈过门槛，往里面多看一点。 > 本文主要讲webpack构建后的文件，是怎么在浏览器运行起来的，这可以让我们更清楚明白webpack的构建原理。 文章中的代码基本只含核心部分，如果想看全部代码和webpack配置，可以关注工程，自己拷贝下来运行: [demo地址:: webpack项目](https://github.com/closertb/GraphQLDemo) 在读本文前，需要知道webpack的基础概念，知道chunk 和 module的区别； 本文将循序渐进，来解析webpack打包后的代码是怎么在浏览器跑起来的。将从以下三个步骤解开黑盒： - 单文件打包，从IIFE说起； - 多文件之间，怎么判断依赖的加载状态； - 按需加载的背后，黑盒中究竟有什么黑魔法； ## 从最简单的说起：单文件怎么跑起来的 最简单的打包场景是什么呢，就是打包出来html文件只引用一个js文件，项目就可以跑起来，举个🌰： ```js // 入口文件：index.js import sayHello from './utils/hello'; import {...
[译文：Rendering on the Web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) 本文主要内容来源于对上文的翻译，图也来源于此，加上了一点平时工作的理解，翻译不是很准确，有条件的可以直接阅读上文链接。本文主要是自己在阅读时做的笔记，供自己以后查看。 ## 预备知识 几种常见的模式： - SSR: Server-Side Rendering - rendering a client-side or universal app to HTML on the server. - CSR: Client-Side Rendering - rendering...
## 从很久以前说起 很久以前，一个前端练习生，开源了一个不知名的组件库[antd-doddle](https://github.com/closertb/antd-doddle)，还特意写了接入文档，[文档地址](http://doc.closertb.site/guide/introduce), 真的是用做开源的态度，在认认真真做项目。这个组件库在公司内部差不多用了一年多，感觉还是把日常哪些简单琐碎的事简化了，有更多的时间去成长。这不，最近有点成长，又有点闲心，就用更React的思想重构了这个组件库中最重要的一个组件[FormRender](http://doc.closertb.site/packages/FormRender)，为了保持兼容性，重构后的组件叫[FormGroup](http://doc.closertb.site/packages/FormGroup)。 > [关联库地址:](https://github.com/closertb/antd-doddle) https://github.com/closertb/antd-doddle > [关联文档地址:](http://doc.closertb.site/guide/introduce) http://doc.closertb.site/guide/introduce ## 先看看对比 下面是要实现的效果图  下图是老组件与重构后组件实现上面一个表单的代码对比图：红色部分为差异（伪代码）  重构后的组件在多写了一个表单项的基础上，两个组件的代码量看起来是差不多的。老组件必须在Class组件上用，新的可以直接在函数组件跟着Hooks一起用。从示例也可以看出两个在FormRender表单项逻辑编写这一块是一致的，差异表现在getFieldDecorator的绑定时机。 从React的思路来看，重构后的组件更像是React组件。 ## 实现思路 重构组件的实现，其实就和两个React Api相关： - React.Children - React.cloneElement 先做一个初显得了解； ### 关于React.cloneElement 老规矩，首先看[官方文档](https://zh-hans.reactjs.org/docs/react-api.html#cloneelement)...
## 原油 最近原油下跌不少，疫情不断，股市惊慌失措。于我而言，管我屁事，没钱。奋（pin）斗（qiong）的我，只有好好写代码。偏题了，是想说`缘由`来着，最近越来越觉得`github`慢，各种pull，push卡顿，家里打开github网站也巨慢，博客文章打开，各种图裂；现在不止用vscode写代码，还用来写文章，写笔记。所以努力给自己打造一个舒适的写作工具，非常重要。以前都用segmentfault, github来做自己的图片云，可惜免费的始终是有代价的。一直用github issue写文章的我，终于忍不住了，我要换图床。机智的我，去年有活动时，不止买了个3年229的服务器，还话45元买了一个Oss仓库。  ## vscode 本地图床插件：Picgo 以前都是去github上传了文件，再把地址拷到vscode的文件里，最近想自己写个插件，实现vscode直接上传图片到Oss。一百度，发现自己确实挺落伍，发现个插件[Picgo](https://marketplace.visualstudio.com/items?itemName=Spades.vs-picgo), 我用的阿里云Oss，贴上我个人的vscode配置：  标红的选项很重要。配置完后，截个屏，cmd + option + u 就可以马上感受一下在vscode插图的快感了。 ## 历史文章的图片处理 无法忍受github图片随时图裂，打开缓慢。既然已经有了Oss，那就全部替换了吧，但那么多文章（40+）和笔记（60+），一篇一篇copy，那cmd键估计都按白了吧。懒惰的我，肯定不会，肯定不会用这么土的办法。所以机智的我，基于NodeJs写了一个小工具。 技术栈（Node）：fs + http + Oss-Sdk 原理： 1. 遍历文章源文件，读取图片地址, 并做标记;...
# 前端监控体系怎么搭建？ ## 背景 前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常特别是外网客户异常，一直是前端开发的痛点。最近在家办公，对公司的监控系统，又做了一遍复习，特作此记录。 异常是不可控的，会影响最终的呈现结果，所以任何一个成熟的前端团队，都有充分的理由去做这样的事情： 1.成熟的工程化，前端监控系统必不可少； 2.远程定位问题，对于对外web页面，让客户配合找bug是一件及其不职业且低效的事情； 3.错误预警上报，及早发现并修复问题； 4.问题复现，尤其是移动端，机型，系统都是问题； 对于 `JS` 而言，我们面对的仅仅只是异常，异常的出现不会直接导致 `JS` 引擎崩溃，最多只会使当前执行的任务终止。 ## 需要处理哪些异常？ 对于前端来说，我们可做的异常捕获还真不少。总结一下，大概如下： * `JS` 语法错误、代码运行异常 * `Http`请求异常 * 静态资源加载异常 * `Promise` 异常 * `Iframe`...
写于：2018-07-08 实践篇：[GraphQL了解一下：实践篇][1] 进阶篇：[GraphQL进阶篇: 挥手Redux不是梦][2] ### 简介 ### GraphQL由Facebook发起，其手机客户端自2012年起，就全面采用了GraphQL查询语言， 2015年， Facebook全面开源了第一份GraphQL规范。到目前为止，在Twitter，Github，Pinterest，Shopify等大型网站也得到了广泛的实践。语言也从最初的js，扩展到java ,python，Go。且Apollo-client也逐渐做全了graphql生态。 GraphQL是一种用于 API 的查询语言（规范），是一种协议而非存储。GraphQL对你的API中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余； 如果想在读下面的知识之前，对GraphQL先有一个粗狂的认识，可以登录[GitHub GraphQL API][3] 站点，体会一下其使用，可点击右侧的Doc文档查看接口定义。  ### GraphQL出现的意义 ###   上面是一张我们常用的Restful接口交互（上）和引入GraphQL接口中间层的接口（下）交互对比图，在此之前，我们先了解一下当前我们所使用的Restful接口的痛点： 1. 冗余字段大量返回; 2. 渲染一个复杂的页面需要发起多个请求; 3....
写于：2018-06-10 更多我对Antd的使用及思考，请参考：[antd-doddle](https://github.com/closertb/antd-doddle) ### 扯点犊子 一晃眼，两个月过去了，自己从一家不大不小的屌丝公司跳到一家被具有纯正互联网血液的公司。从以前的围绕jQuery、Echarts为主技术栈开展工作，到现在以React、Antd为主技术栈开发业务；但不是所有的业务antd都能支持，所以有时得自己动手，在antd上做一层浅封装。 文章中提到的示例都可以在codeBox找到：[codeBox][1] ### 自定义表单组件 ### 在[Antd][2]的Form表单介绍一节中，提到过自定义表单控件。其实例是关于货币价值转换的，如下图所示：  当我们在我们的页面中需要频繁的用到某一个组合类型的组件，而Antd又不支持时，最好的做法就是对Antd组件做一层浅封装行成一个独立的组件，当然也可以使用html 自有的表单元素进行封装，只是这样做出来费事，且样式和整个页面没有那么容易统一。封装的注意事项在上面的截图中已经一一列出，接下来将以一个实例来操作说明。 ### 一个带远程搜索的下拉选择组件 ### 2018.12月更新：随着Select组件comobox模式在新的版本中被舍弃，和autoComplete组件的出现。这个组件也进行了重写。但整体逻辑没有改变，主要时改变了激活弹出框和关闭弹出框的逻辑。具体可参见我的github项目：[React进阶][4]  这个组件的大致实现需求如上面动态图所示。产品需求就是需要一个编辑框，这个框在用户点击输入时，需要弹出一个搜索框，根据用户的输入远程搜索获取数据形成一个下拉列表，供用户选择。这在jquery时代，这是一个很常见的需求，也有很多的组件可选择，但在Antd的组件库中，没有完全匹配的，但有及其相似功能的，比如:  这个组件与产品的需求契合度已经达到了80%, 但是产品说了搜索输入框需要与编辑输入框分开，并且有明显的区别，ok，那就费点事，把Antd组件稍微做一下改变嘛。  所以简单分解一下，需要用到Input，Icon, Select这三种组件，具体实现可以查看[SandBox上的源码及示例][8]。说一下自己遇到的难点： #### 支持双向绑定 #### ```js {getFieldDecorator('search',{...
写于：2018-03-06 ## 数据可视化 ## 最近掘金对图片做了域名保护，造成图片无法加载，还是Segmentfault好，实力硬。  数据可视化旨在借助于图形化手段，清晰有效地传达与沟通信息（来源于bd）.在我们生活中最常见的，就有各种统计数据做成图表、股票k线图、能力雷达图这些（上面那张个人能力分析图，图片数据纯属虚构）；而对于前端开发者来说，就是用一些大神开发好的可视化图表组件将后端传过来的数据用一种直观，清晰的方式呈现在浏览器中，常用的可视化图表图库包括（排名不分先后），后面文章中都是围绕Echarts库的运用： - D3 - Echarts - three.js - HighCharts - Charts - G2 ## 色彩的应用 ## 色彩的应用作为数据可视化重要的部分，同样的数据，同样的图表类型，如果不同的人或者不同的公司做出来，有可能呈现的效果会截然不同，这其中的重要区别可能就是色彩的应用。Echarts不同的图表，都提供了一套默认的主题色，所以尽管我们不设置颜色，其呈现的效果也还是不错的。Echarts图表中可进行颜色设置的地方很多，包括但不仅限于下图（[官方demo][2]）所示的内容：   关于上面图提到的每个部分在option怎么设置，Echarts的配置手册都有详细描述，这里主要说一些工作中不常用到但又很关键的部分。从实现层面上来讲，颜色的设置分两种，option属性设置和css样式设置，至于为什么，可以从上图的dom结构得到答案，每个Echarts实例大体都包含两个元素：canvas 和 div（方框标注部分），div负责图表tooltip的展示(黄色框圈起部分)，而canvas负责除黄色框以外的所有部分。如果是简单的颜色设置，如上面的展示的那张标注图，option属性设置color就足够了，但如果要做出下图所示的强调色，option属性设置color就显得捉襟见肘了，在标题和tooltip的数据显示上，应用了混合色用以加强数据的表现：  对于tooltip中的强调色，由于其根本是dom元素的操作，所以要做出上图所示的效果很简单，控制div元素及其子元素的样式就可以了，like：...
最近看到一篇20 个CSS高级技巧汇总的汇总，感触很深，不过我想，与技巧相比，有些常见css布局难题，有时候更加让我们的日常开发变得踌躇沮丧吧。 在写这一篇文章之前，自己还写过一篇：[我所不注意的那些CSS冷知识，但却阻止了我做项目的速度][1],如果你看了，我相信你也会受益的。 ### 为什么此处li标签内的p元素看起来独自撑开了一行 ### 这是我在segmentfault上看到的一个问题，以前自己遇到过，所以就很热情洋溢的去回答了一下，难道遇到个自己会的，示例代码是这样的： CSS: ```css li{ display: inline-block; text-align: center; } .left,.center,.right{ width:300px; height:300px; } .left{ background-color: #999; } .center{ background-color: #ccc; } .right{ background-color: #eee;...
写于: 2018-01-03 ## 那些莫名奇妙的bug ## 歇了两周没写点什么了，感觉最近有点知识慌，没啥新知识，分享一下前段时间遇到的bug难题,这个Bug是关于jquery 的on方法绑交互事件，类似于$('#point').on('click','.read-more',function () {})这样的代码造成程序重复执行，很多人在文章里写到了，也说了用off方法来解绑，但他们很少能点出问题的本质，他们忽略了问题的本质其实是事件委托造成的。话不多说，上点天天看到的代码： ```javascript // 第一种： $(document).on('click', function (e) { consol.log('jquery事件绑定') }); // 第二种： document.addEventListener('click',function (e) { consol.log('原生事件绑定') })； // 第三种： var id =...