广兰路地铁的博客

前言在前端领域，antd无疑是react生态下使用最为广泛的UI类库，antd对常见的表单类输入组件进行了高度封装，带来开箱即用的便利性，但是与此同时，对其样式的控制也愈发困难。大家应该都有过被产品或者交互逼着修改antd样式的经历。次数多了，很难再通过"这是开源的控件，样式不好修改"搪塞过去。那么问题来了，如何优雅第修改antd的样式?具体方法经过探索，大致有以下几种思路：直接添加类名或者style这个是最常规的方法，能够直接作用于当前的元素，但是有的时候我们会发现antd的组件最终在dom层

Webpack 5 发行版 (2020-10-10)webpack 4在2018年二月份发行。在那以后我们封装了一些列特性，但是并没有引入破坏性的变化。我们知道大家不喜欢有破环新变化（breaking changes）的变更。特别是针对webpack这类工具，人们一年只会接触这种应用的机会很有限，其余时候把它丢在一边，只要它能正常工作。但是不引入破换新变化的同时风向新特性是有代价的：我们不能进行核心api或者架构层面的升级。随着时间的推移，总会到这么一个时间点，面临的问题堆积到了一定程度使得我们必须去通

还能咋办，赶紧删git仓库！缘起不久之前遇见了一件糟心事，开发一个小工具的时候，拿了公司本地项目里的文件来做测试，搞完之后忘记删除敏感文件，就把这个小工具的个人项目推送到了gitHub,结果没过半个小时，公司的it就来查水表了，气氛一度十分尴尬；还好只是一个简单文件，否则就要重刷LeetCode了。怎样避免再次翻车咋办呢?总不能时不时全文搜索敏感字符串吧?作为经常写个人项目的开发，为了避免这种问题再次出现，需要找到从根本上规避问题的方法。能不能在每次提交前自动检查仓库的内容，有敏感内容的时候就终止提

前言社区里面关于babel的介绍非常多了，这里不想重复这些常见内容。很多人认为babel只是一个语法转译工具，将浏览器无法识别的高级语法进行转换（polyfill）,提升开发体验。其实babel是一个强大的工具链，它基于acorn和acorn-jsx，将js转化为抽象语法树（AST）,抽象语法树可以理解为一个大的对象，精细化定义了代码的所有细节。对这个大对象进行处理后，再将其转化为代码，这其实就是各种各样的babel插件代码转换的核心原理。本文也是从这里入手，以一个小例子，展示babel在处理json文件

前言市面上应该有不少切换window下域名映射的应用了，个人感觉这个功能实现起来应该不是很复杂，正好是自己切入electron学习的好机会。electron作为js生态在桌面端的重磅应用，极大地拓展了js的边界(vsCode就是用electron开发的)。最为一个前端开发，补齐桌面端的开发短板也是很有意义的一件事。开发目标实现一个简单的桌面端switch host应用，windows中有一个文件hosts(路径通常是C:\Windows\System32\drivers\etc\hosts),该文件维

前言作为一个前端页面仔和需求粉碎机，在日常的工作中重复雷同的业务需求，能够获得的提高是很有限的。要想跳出此山中，开阔新视野，笔者墙裂建议大家阅读市面上顶尖开源库的源码。这是学习和掌握js语言特性的绝佳机会(前端发展到现在，大型应用高度依赖框架，正常情况下普通开发者是没有机会接触底层的语言特性)，同时也是深刻理解框架底层思维的契机。这里笔者选择react第一个开刀，市面上不少关于react源码分析的文章要么过于老旧，要么只截取部分代码或者是伪代码，笔者这里将选取react的16.8.6版本作为示例，从第0行

前言最近发现了一个比较好用的内容diff库(就叫diff)，非常方便js开发者实现文本内容的diff，既可以直接简单输出格式化的字符串比较内容，也可以输出较为复杂的changes数据结构，方便二次开发。这里笔者就基于这个库实现高仿github的文本diff效果。效果演示实现了代码展开，单列和双列对比等功能。示例如下：代码演示站点如何实现核心原理最核心的文本diff算法，由diff库替我们实现，这里我们使用的是diffLines方法(关于diff库的使用，笔者有一篇博文diff使用指南有详细介

前言最近在开发过程中遇到了需要diff文件内容或者大json的业务场景，发现了一个比较好用且经典的js库diff。这个库功能十分强大，不仅能够简洁地输出字符串结果，也能够输出规范化的数据结构方便二次开发。这里笔者针对这个库的文档进行翻译和简单的讲解，同时也会展示自己的测试demo。库简介diff是一个基于javascript实现的文本内容diff的库。它基于已发表论文中的算法An O(ND) Difference Algorithm and its Variations" (Myers, 1986).

前言作为一个前端页面仔和需求粉碎机，在日常的工作中重复雷同的业务需求，能够获得的提高是很有限的。要想跳出此山中，开阔新视野，笔者墙裂建议大家阅读市面上顶尖开源库的源码。这是学习和掌握js语言特性的绝佳机会(前端发展到现在，大型应用高度依赖框架，正常情况下普通开发者是没有机会接触底层的语言特性)，同时也是深刻理解框架底层思维的契机。这里笔者选择react第一个开刀，市面上不少关于react源码分析的文章要么过于老旧，要么只截取部分代码或者是伪代码，笔者这里将选取react的16.8.6版本作为示例，从第0行

前言作为一个前端页面仔和需求粉碎机，在日常的工作中重复雷同的业务需求，能够获得的提高是很有限的。要想跳出此山中，开阔新视野，笔者墙裂建议大家阅读市面上顶尖开源库的源码。这是学习和掌握js语言特性的绝佳机会(前端发展到现在，大型应用高度依赖框架，正常情况下普通开发者是没有机会接触底层的语言特性)，同时也是深刻理解框架底层思维的契机。这里笔者选择react第一个开刀，市面上不少关于react源码分析的文章要么过于老旧，要么只截取部分代码或者是伪代码，笔者这里将选取react的16.8.6版本作为示例，从第0行

前言作为一个前端页面仔和需求粉碎机，在日常的工作中重复雷同的业务需求，能够获得的提高是很有限的。要想跳出此山中，开阔新视野，笔者墙裂建议大家阅读市面上顶尖开源库的源码。这是学习和掌握js语言特性的绝佳机会(前端发展到现在，大型应用高度依赖框架，正常情况下普通开发者是没有机会接触底层的语言特性)，同时也是深刻理解框架底层思维的契机。这里笔者选择react第一个开刀，市面上不少关于react源码分析的文章要么过于老旧，要么只截取部分代码或者是伪代码，笔者这里将选取react的16.8.6版本作为示例，从第0行

前言作为一个前端页面仔和需求粉碎机，在日常的工作中重复雷同的业务需求，能够获得的提高是很有限的。要想跳出此山中，开阔新视野，笔者墙裂建议大家阅读市面上顶尖开源库的源码。这是学习和掌握js语言特性的绝佳机会(前端发展到现在，大型应用高度依赖框架，正常情况下普通开发者是没有机会接触底层的语言特性)，同时也是深刻理解框架底层思维的契机。这里笔者选择react第一个开刀，市面上不少关于react源码分析的文章要么过于老旧，要么只截取部分代码或者是伪代码，笔者这里将选取react的16.8.6版本作为示例，从第0行

前言之前在开发微信小程序的时候，发现官方给每个小程序分配了5g的免费云存储空间和每个月5g的cdn流量（免费版）：在小程序的开发后台可以查看云存储上的文件，文件本质上是存在cdn上的，每个文件都提供了专属的downLoad url,靠着这个url我们就可以下载部署在云端的文件，也就是说上传的文件自带cdn加速。5G的空间不算少，自己的小程序用不到额外的云存储资源，这个资源拿来给自己搭建一个私有云盘岂不美哉？以后自己的一些小文件就可以放在上面，方便存储和下载。诸位如果没有开发过小程序也没有关系，在微

前言通过点击下载部署在服务器上的文件，是B端的一个常见需求,但是为了获得良好的体验，其中还是有很多值得钻研的小知识点。笔者最近在开发个人云盘，在开发文件下载功能的过程中也接触到了这一领域（完成后也会发一篇博文，这里先占个坑）。网上有各种各样的实现，不过也有各种各样的问题，比如跨域下载不支持，需要另开浏览器tab或者图片等浏览器可以识别的内容直接打开等等影响体验的细节，这里就摊开讲讲。常见方法a标签内置下载实现非常简单：<a href='下载文件的url'>点我下载</a>

前言写博客也有一段时间了，不知道诸位是不是跟我一样在多个平台都有同步博文，笔者目前在掘金、csdn和简书都有在同步文章，这个过程中发现一个问题，简书官方没有统计作者所有博文的总阅读、评论、点赞等数据，只是给出了每篇文章的对应数据，这对于习惯了在各个平台上查看数据的笔者来说十分不友好（看着博客阅读数上涨是更新的巨大动力），为此笔者决定通过技术手段解决这个问题。思考解决思路要解决这个难点，最直观...

前言在笔者的上一篇文章(基于react的前后端渲染实例讲解)中，对react下前后端渲染的流程进行了一个介绍。对前后端渲染的相关概念和原理不太了解的可以移步那篇文章。同时留下了一个引子：如何优雅地实现前后端渲染的样式同构。由此我们引出了公共库isomorphic-style-loader,在这篇文章中，笔者将结合实例介绍该库在项目中的应用以及对其原理进行分析。项目实战这里我们以上一篇文章中的...

前言前端技术发展至今，开发者关注的焦点已经从功能和页面呈现效果的实现转变为对用户体验的极致追求。在最近几年间，后端（服务器端，通常指的是node）渲染的概念在业界广泛铺开。后端渲染打破了传统web页面等待服务器返回js文件，client再加载执行的工作流，由服务器直接返回渲染好部分内容的html文件，能够极大地提升用户体验（html文件返回即可展示，不再依赖其他文件的下载执行）。页面的后端渲染暨...

前言如果你不甘于做一个纯粹的页面仔，想了解一个web应用从编写到到发布到用户可见的全过程，或是想自己玩一点新东西，突破原有的技术圈层，那么本文将是一个很好的入门指南。笔者将从实战入手，尽可能细致地结合当前主流的工具链，以命令行为粒度来讲解一个web应用CI/CD的全过程。有些部分的内容可能过于基础，大神们可以酌情跳过。本例的应用架构大致是:一个web静态中台服务，和与之配套的后端服务（通过no...

前言  作为当下风头正劲的跨端框架，flutter成为原生开发者和前端开发者争相试水的领域，笔者将通过一个仿微信聊天的应用，展现flutter的开发流程和相关工具链，旨在熟悉flutter的开发生态，同时也对自己的学习过程进行一个总结。笔者是web前端开发，相关涉及原生的地方难免有错漏之处，欢迎批评指正。项目代码库链接放在文末。功能简介聊天列表本应用支持用户直接点对点聊天，使用webSo...

前言  dart语言的库及其相关语法是了解dart应用代码组织的基础。网上查找的相关资料往往只是涉及某几个点，很难有系统性的认识，这里笔者将结合一些文档和个人实践经验来对dart的库及其相关语法进行一个梳理。库的引入  dart中，任意一个文件都会被认为是一个库，尽管其中可能并没有library标签，dart库目前的引入方式大致有三种：引入dart语言的内置库：import 'dar...

前言  使用一种语言编写各种应用的时候，横亘在开发者面前的第一个问题就是如何进行状态管理。在前端领域，我们习惯使用框架或者各种辅助库来进行状态管理。例如，开发者经常使用react自带的context,或者mobx/redux等工具来管理组件间状态。在大热的跨端框架flutter中，笔者将对社区中使用广泛的provider框架进行介绍。准备工作安装与引入provider pub链接官方文档...

DateTime 类  DateTime类用来标识一个瞬时的时间节点，可以通过构造函数，从标准格式（符合ISO 8601标准）的字符串中构造一个时间对象。DateTIme使用24小时计时法。以下是最基础的例子：var now = new DateTime.now();var berlinWallFell = new DateTime.utc(1989, 11, 9);var moonLan...

1、老的用法mobx是一个使用十分普遍的状态管理工具，在实际的开发过程中我们常常搭配react进行使用。在一些比较大的项目中，部分变量需要反复向下层组件进行传递，如果使用传统的组件props进行实现，层层包裹，未免过于繁琐，react官方针对这种场景，推出了context来进行上下文跨组件传递。而mobx也立足于react的context实现了inject语法，通过简洁的api，可以在任何想要使...

DLL是什么，用它来干啥？  DLL（Dynamic Link Libray）原来特指windows系统中实现共享函数库的一种方式，扩展名通常为.dll。玩过老windows游戏的同学应该对这种文件不陌生，很多游戏的安装盘下就有很多.dll的文件。DLL通常是已经编译、链接的二进制文件，方便程序直接调用。前端应用场景  在大型项目的开发过程中，往往会用到很多公共库，公共库的内容不同于业务代码...

前言书接上文，在前一篇文章中babel插件分析-编写你的第一个插件，对于babel的原理和如何写一个插件进行了大致的分析，这里我们将结合一个官方插件@babel/plugin-proposal-optional-chaining，对babel实现进行深入分析。当前的浏览器还不支持可选链式调用，也就是类似这样的写法：let a = b?.c;// orlet cc = a?.b();即在...

前言  最为一个前端开发者，应该没有人不知道babel是什么，但针对不大熟悉的同学，在这里我还是简单介绍一下：JavaScript 的版本标准更新频繁，从2015年开始，就以每年一个版本的速度更新（该版本为es6），每个版本标准都会推出一些新的语法糖（装饰器语法，动态加载等），极大地提升了编程体验；在下个版本推出前，社区也会提出一些提案，涉及未来es版本的最新特性（可选链式调用等）。这些新的特性...

1、 前言  随着项目的逐步膨胀和复杂，我们在实际的工程应用中会通过编写各种各样的脚本来提高效率，传统的方法是在项目的package.json文件中注册各种各样的命令，来完成打包，构建，打包分析等操作。类似于这样：{ "name": "chat", "version": "0.0.0", "private": true, "scripts": { "start": "b...

前言  当下的前端业态正在朝多端化发展，小程序和诸多跨平台的架构(ReactNative、Weex、Flutter)开发逐渐成为大公司的必备选项。作为前端从业者，除了传统的web开发工具集，我们也需要掌握一定的跨端开发能力，以适应技术潮流的发展。在此我将通过一个简单的例子，展示微信小程序的基本开发流程。小程序开发概述小程序优缺点  作为一个有一定学习门槛的新平台，小程序必然要给我们带来一定...