- 博客(37)
- 收藏
- 关注
RSS订阅原创 如何优雅地修改antd组件内部样式
前言在前端领域，antd无疑是react生态下使用最为广泛的UI类库，antd对常见的表单类输入组件进行了高度封装，带来开箱即用的便利性，但是与此同时，对其样式的控制也愈发困难。大家应该都有过被产品或者交互逼着修改antd样式的经历。次数多了，很难再通过"这是开源的控件，样式不好修改"搪塞过去。那么问题来了，如何优雅第修改antd的样式?具体方法经过探索，大致有以下几种思路：直接添加类名或者style这个是最常规的方法，能够直接作用于当前的元素，但是有的时候我们会发现antd的组件最终在dom层
2021-03-26 09:56:50
4723
1
翻译 Webpack 5 release版 官方文档全文翻译
Webpack 5 发行版 (2020-10-10)webpack 4在2018年二月份发行。在那以后我们封装了一些列特性，但是并没有引入破坏性的变化。我们知道大家不喜欢有破环新变化（breaking changes）的变更。特别是针对webpack这类工具，人们一年只会接触这种应用的机会很有限，其余时候把它丢在一边，只要它能正常工作。但是不引入破换新变化的同时风向新特性是有代价的：我们不能进行核心api或者架构层面的升级。随着时间的推移，总会到这么一个时间点，面临的问题堆积到了一定程度使得我们必须去通
2020-12-02 09:56:33
1352
原创 woc，把敏感文件上传到git了,咋整
还能咋办，赶紧删git仓库！缘起不久之前遇见了一件糟心事，开发一个小工具的时候，拿了公司本地项目里的文件来做测试，搞完之后忘记删除敏感文件，就把这个小工具的个人项目推送到了gitHub,结果没过半个小时，公司的it就来查水表了，气氛一度十分尴尬；还好只是一个简单文件，否则就要重刷LeetCode了。怎样避免再次翻车咋办呢?总不能时不时全文搜索敏感字符串吧?作为经常写个人项目的开发，为了避免这种问题再次出现，需要找到从根本上规避问题的方法。能不能在每次提交前自动检查仓库的内容，有敏感内容的时候就终止提
2020-10-24 17:45:26
369
原创 babel进阶用法之处理json文件
前言社区里面关于babel的介绍非常多了，这里不想重复这些常见内容。很多人认为babel只是一个语法转译工具，将浏览器无法识别的高级语法进行转换（polyfill）,提升开发体验。其实babel是一个强大的工具链，它基于acorn和acorn-jsx，将js转化为抽象语法树（AST）,抽象语法树可以理解为一个大的对象，精细化定义了代码的所有细节。对这个大对象进行处理后，再将其转化为代码，这其实就是各种各样的babel插件代码转换的核心原理。本文也是从这里入手，以一个小例子，展示babel在处理json文件
2020-10-20 10:19:13
1099
原创 从零开始开发基于electron的switchHost应用
前言市面上应该有不少切换window下域名映射的应用了，个人感觉这个功能实现起来应该不是很复杂，正好是自己切入electron学习的好机会。electron作为js生态在桌面端的重磅应用，极大地拓展了js的边界(vsCode就是用electron开发的)。最为一个前端开发，补齐桌面端的开发短板也是很有意义的一件事。开发目标实现一个简单的桌面端switch host应用，windows中有一个文件hosts(路径通常是C:\Windows\System32\drivers\etc\hosts),该文件维
2020-10-19 10:39:36
1012
原创 洞悉细节！react 16.8.6源码分析-5 hooks API
前言作为一个前端页面仔和需求粉碎机，在日常的工作中重复雷同的业务需求，能够获得的提高是很有限的。要想跳出此山中，开阔新视野，笔者墙裂建议大家阅读市面上顶尖开源库的源码。这是学习和掌握js语言特性的绝佳机会(前端发展到现在，大型应用高度依赖框架，正常情况下普通开发者是没有机会接触底层的语言特性)，同时也是深刻理解框架底层思维的契机。这里笔者选择react第一个开刀，市面上不少关于react源码分析的文章要么过于老旧，要么只截取部分代码或者是伪代码，笔者这里将选取react的16.8.6版本作为示例，从第0行
2020-09-28 10:25:21
459
原创 手动实现高仿github的内容diff效果
前言最近发现了一个比较好用的内容diff库(就叫diff)，非常方便js开发者实现文本内容的diff，既可以直接简单输出格式化的字符串比较内容，也可以输出较为复杂的changes数据结构，方便二次开发。这里笔者就基于这个库实现高仿github的文本diff效果。效果演示实现了代码展开，单列和双列对比等功能。示例如下：代码演示站点如何实现核心原理最核心的文本diff算法，由diff库替我们实现，这里我们使用的是diffLines方法(关于diff库的使用，笔者有一篇博文diff使用指南有详细介
2020-08-05 10:12:55
827
原创 diff.js使用指南
前言最近在开发过程中遇到了需要diff文件内容或者大json的业务场景，发现了一个比较好用且经典的js库diff。这个库功能十分强大，不仅能够简洁地输出字符串结果，也能够输出规范化的数据结构方便二次开发。这里笔者针对这个库的文档进行翻译和简单的讲解，同时也会展示自己的测试demo。库简介diff是一个基于javascript实现的文本内容diff的库。它基于已发表论文中的算法An O(ND) Difference Algorithm and its Variations" (Myers, 1986).
2020-07-30 10:37:23
3848
2
原创 洞悉细节！react 16.8.6源码分析-4 children遍历
前言作为一个前端页面仔和需求粉碎机，在日常的工作中重复雷同的业务需求，能够获得的提高是很有限的。要想跳出此山中，开阔新视野，笔者墙裂建议大家阅读市面上顶尖开源库的源码。这是学习和掌握js语言特性的绝佳机会(前端发展到现在，大型应用高度依赖框架，正常情况下普通开发者是没有机会接触底层的语言特性)，同时也是深刻理解框架底层思维的契机。这里笔者选择react第一个开刀，市面上不少关于react源码分析的文章要么过于老旧，要么只截取部分代码或者是伪代码，笔者这里将选取react的16.8.6版本作为示例，从第0行
2020-07-16 09:55:05
364
原创 洞悉细节！react 16.8.6源码分析-3 元素创建
前言作为一个前端页面仔和需求粉碎机，在日常的工作中重复雷同的业务需求，能够获得的提高是很有限的。要想跳出此山中，开阔新视野，笔者墙裂建议大家阅读市面上顶尖开源库的源码。这是学习和掌握js语言特性的绝佳机会(前端发展到现在，大型应用高度依赖框架，正常情况下普通开发者是没有机会接触底层的语言特性)，同时也是深刻理解框架底层思维的契机。这里笔者选择react第一个开刀，市面上不少关于react源码分析的文章要么过于老旧，要么只截取部分代码或者是伪代码，笔者这里将选取react的16.8.6版本作为示例，从第0行
2020-06-28 10:27:18
357
原创 洞悉细节！react 16.8.6源码分析-2 组件构造与获取调用栈
前言作为一个前端页面仔和需求粉碎机，在日常的工作中重复雷同的业务需求，能够获得的提高是很有限的。要想跳出此山中，开阔新视野，笔者墙裂建议大家阅读市面上顶尖开源库的源码。这是学习和掌握js语言特性的绝佳机会(前端发展到现在，大型应用高度依赖框架，正常情况下普通开发者是没有机会接触底层的语言特性)，同时也是深刻理解框架底层思维的契机。这里笔者选择react第一个开刀，市面上不少关于react源码分析的文章要么过于老旧，要么只截取部分代码或者是伪代码，笔者这里将选取react的16.8.6版本作为示例，从第0行
2020-06-22 10:01:49
766
原创 洞悉细节！react 16.8.6源码分析-1 报错和warning
前言作为一个前端页面仔和需求粉碎机，在日常的工作中重复雷同的业务需求，能够获得的提高是很有限的。要想跳出此山中，开阔新视野，笔者墙裂建议大家阅读市面上顶尖开源库的源码。这是学习和掌握js语言特性的绝佳机会(前端发展到现在，大型应用高度依赖框架，正常情况下普通开发者是没有机会接触底层的语言特性)，同时也是深刻理解框架底层思维的契机。这里笔者选择react第一个开刀，市面上不少关于react源码分析的文章要么过于老旧，要么只截取部分代码或者是伪代码，笔者这里将选取react的16.8.6版本作为示例，从第0行
2020-06-22 10:00:59
572
原创 白嫖小程序云存储空间，手撸你的专属云盘
前言之前在开发微信小程序的时候，发现官方给每个小程序分配了5g的免费云存储空间和每个月5g的cdn流量（免费版）：在小程序的开发后台可以查看云存储上的文件，文件本质上是存在cdn上的，每个文件都提供了专属的downLoad url,靠着这个url我们就可以下载部署在云端的文件，也就是说上传的文件自带cdn加速。5G的空间不算少，自己的小程序用不到额外的云存储资源，这个资源拿来给自己搭建一个私有云盘岂不美哉？以后自己的一些小文件就可以放在上面，方便存储和下载。诸位如果没有开发过小程序也没有关系，在微
2020-06-03 10:11:09
1952
3
原创 关于点击下载文件的那些事
前言通过点击下载部署在服务器上的文件，是B端的一个常见需求,但是为了获得良好的体验，其中还是有很多值得钻研的小知识点。笔者最近在开发个人云盘，在开发文件下载功能的过程中也接触到了这一领域（完成后也会发一篇博文，这里先占个坑）。网上有各种各样的实现，不过也有各种各样的问题，比如跨域下载不支持，需要另开浏览器tab或者图片等浏览器可以识别的内容直接打开等等影响体验的细节，这里就摊开讲讲。常见方法a标签内置下载实现非常简单：<a href='下载文件的url'>点我下载</a>
2020-05-23 14:24:27
1344
原创 antd+typescript webpack打包后样式丢失
问题描述最近笔者最近正在将老的项目迁移至typeseript,项目跑起来之后发现antd相关的样式全部丢失，发现webpack打包后css相关的代码没有被提取出来，导致antd的样式全部无效化，原先的webpack配置文件：module: { rules: [ { test: /\.(js|jsx)$/, ...
2020-05-02 17:47:59
3754
原创 moment typescript报错TS2307
问题描述最近在用typescript+antd(版本4+)+react进行项目开发，webpack打包的时候报如下错误：ERROR in [at-loader] ./node_modules/antd/lib/time-picker/index.d.ts:1:24 TS2307: Cannot find module 'moment'.ERROR in [at-loader] ./...
2020-05-02 11:56:35
1503
原创 微信小程序云开发httpApi调用
前言微信小程序的开发愈发火热，微信官方推出的云开发功能给中小型开发者提供了很大助力。开启了云开发功能的小程序，可以使用数据库，存储空间等一系列免费资源，给开发者提供了很大的便利，开发者可以聚焦核心功能，而不用分心部署自己并不熟悉的后端api服务。微信官方云开发文档对于小程序或者云函数中调用数据库的api解释的非常详细，但是对于非小程序或云函数环境（比如我们的node服务器）如何调用，就一笔带过，...
2020-04-26 09:34:17
3281
2
原创 chrome插件实现简书自动计算阅读评论点赞数
前言写博客也有一段时间了，不知道诸位是不是跟我一样在多个平台都有同步博文，笔者目前在掘金、csdn和简书都有在同步文章，这个过程中发现一个问题，简书官方没有统计作者所有博文的总阅读、评论、点赞等数据，只是给出了每篇文章的对应数据，这对于习惯了在各个平台上查看数据的笔者来说十分不友好（看着博客阅读数上涨是更新的巨大动力），为此笔者决定通过技术手段解决这个问题。思考解决思路要解决这个难点，最直观...
2020-04-20 11:24:45
538
1
原创 ant design pro升级v4指南(附umi3与antd4升级)
前言自己在去年用ant design pro 创建了个后台服务的项目，当时创建的时候umi控制台提示是否使用antd 4,当时抱着尝鲜的想法选择了yes,结果项目跑起来之后，功能没有问题，但是打开后台后发现各种提醒你升级或者迁移的warning,类似这样：看着着实蛋疼，ant design pro 本质上是蚂蚁全家桶，结合了antd和umi的一整套后台项目解决方案，如果要解决这些warnin...
2020-04-11 14:20:46
9006
6
原创 isomorphic-style-loader在前后端渲染样式同构中的应用与源码分析
前言在笔者的上一篇文章(基于react的前后端渲染实例讲解)中，对react下前后端渲染的流程进行了一个介绍。对前后端渲染的相关概念和原理不太了解的可以移步那篇文章。同时留下了一个引子：如何优雅地实现前后端渲染的样式同构。由此我们引出了公共库isomorphic-style-loader,在这篇文章中，笔者将结合实例介绍该库在项目中的应用以及对其原理进行分析。项目实战这里我们以上一篇文章中的...
2020-04-04 20:03:41
1755
1
原创 基于react的前后端渲染实例讲解
前言前端技术发展至今，开发者关注的焦点已经从功能和页面呈现效果的实现转变为对用户体验的极致追求。在最近几年间，后端（服务器端，通常指的是node）渲染的概念在业界广泛铺开。后端渲染打破了传统web页面等待服务器返回js文件，client再加载执行的工作流，由服务器直接返回渲染好部分内容的html文件，能够极大地提升用户体验（html文件返回即可展示，不再依赖其他文件的下载执行）。页面的后端渲染暨...
2020-03-31 10:29:35
768
原创 antd textArea无法初始化默认值 defaultValue
本人在开发过程中遇到这样一个问题，打算通过useEffect来初始化表单的默认值，这里使用的是react下的hooks Api,但是textArea的初始值始终无法设置成功：import React, { useState, useEffect, useRef } from 'react';// 文本框默认内容const [textAreaContent, setText] = useS...
2020-03-21 20:31:23
4863
5
原创 微信小程序 查找不到属性requestSubscribeMessage
在开发小程序消息推送的过程中，ts语法检查未通过，显示类型wx上不存在属性requestSubscribeMessage当即怀疑是小程序api版本过低（requestSubscribeMessage最低从2.8.2版本开始支持），不支持此api,于是npm i升级小程序api版本，但是问题依然存在。此时怀疑是小程序开发工具版本不对，在小程序开发工具中更改配置但是此时问题依然存在，遂查找no...
2020-03-14 11:30:17
1494
2
原创 微信小程序云开发数据库查询 单一字段匹配中的或逻辑
问题场景：要查询某个collection中name字段非别为’wang’, ‘gao’, 'jian’的数据。在官方文档上查找后发现这种逻辑无法通过简单的筛选逻辑来实现，笔者找了一个比较讨巧的方法，使用正则表达式来匹配字段：// 原生 JavaScript 对象db.collection('todos').where({ name: /wang|gao|jian/i})// 数据库...
2020-03-11 21:40:14
4653
原创 docker+nginx+node+jenkins从零开始部署你的前端服务
前言如果你不甘于做一个纯粹的页面仔，想了解一个web应用从编写到到发布到用户可见的全过程，或是想自己玩一点新东西，突破原有的技术圈层，那么本文将是一个很好的入门指南。笔者将从实战入手，尽可能细致地结合当前主流的工具链，以命令行为粒度来讲解一个web应用CI/CD的全过程。有些部分的内容可能过于基础，大神们可以酌情跳过。本例的应用架构大致是:一个web静态中台服务，和与之配套的后端服务（通过no...
2020-03-02 11:43:38
3153
5
原创 基于Flutter的仿微信聊天应用
前言 作为当下风头正劲的跨端框架，flutter成为原生开发者和前端开发者争相试水的领域，笔者将通过一个仿微信聊天的应用，展现flutter的开发流程和相关工具链，旨在熟悉flutter的开发生态，同时也对自己的学习过程进行一个总结。笔者是web前端开发，相关涉及原生的地方难免有错漏之处，欢迎批评指正。项目代码库链接放在文末。功能简介聊天列表本应用支持用户直接点对点聊天，使用webSo...
2020-02-13 10:19:46
1936
原创 dart flutter 文件与库的引用导出
前言 dart语言的库及其相关语法是了解dart应用代码组织的基础。网上查找的相关资料往往只是涉及某几个点，很难有系统性的认识，这里笔者将结合一些文档和个人实践经验来对dart的库及其相关语法进行一个梳理。库的引入 dart中，任意一个文件都会被认为是一个库，尽管其中可能并没有library标签，dart库目前的引入方式大致有三种：引入dart语言的内置库：import 'dar...
2020-01-10 10:01:35
3440
原创 flutter 桌面app启动图标右上角红点实现（消息通知）
背景 在进行app开发的过程中，我们往往需要实现类似于微信图标右上角的消息提醒红点功能。类似下图： 在传统的App开发流程中，这种问题都有现成的解决方案，但是在flutter中如何实现类似效果呢？社区已经有了一个库实现类似的功能flutter_app_badger, 这个库的实现原理是对社区中原来已经有的库进行了一个简单的封装，方便flutter框架调用具体使用在pubspec.ya...
2020-01-07 10:21:27
6870
原创 Flutter Provider使用指南
前言 使用一种语言编写各种应用的时候，横亘在开发者面前的第一个问题就是如何进行状态管理。在前端领域，我们习惯使用框架或者各种辅助库来进行状态管理。例如，开发者经常使用react自带的context,或者mobx/redux等工具来管理组件间状态。在大热的跨端框架flutter中，笔者将对社区中使用广泛的provider框架进行介绍。准备工作安装与引入provider pub链接官方文档...
2019-12-28 20:50:31
1986
4
原创 flutter Dart DateTime详解
DateTime 类 DateTime类用来标识一个瞬时的时间节点，可以通过构造函数，从标准格式（符合ISO 8601标准）的字符串中构造一个时间对象。DateTIme使用24小时计时法。以下是最基础的例子：var now = new DateTime.now();var berlinWallFell = new DateTime.utc(1989, 11, 9);var moonLan...
2019-12-15 09:41:49
3933
原创 flutter Bad state No element报错
问题场景在用flutter进行真机调试时,一旦修改代码并触发真机热更新时会报如下错误：真机报错：控制台报错：问题解决这里发现同样的错误报了很多个，这里分析是在渲染列表是发生了无element的错误，查看控制台发现此处报错： SingleMesCollection getUserMesCollection(String name) { return messageArray...
2019-12-13 17:56:45
9626
1
原创 mobx中的inject,observer迁移至react Hooks写法
1、老的用法mobx是一个使用十分普遍的状态管理工具，在实际的开发过程中我们常常搭配react进行使用。在一些比较大的项目中，部分变量需要反复向下层组件进行传递，如果使用传统的组件props进行实现，层层包裹，未免过于繁琐，react官方针对这种场景，推出了context来进行上下文跨组件传递。而mobx也立足于react的context实现了inject语法，通过简洁的api，可以在任何想要使...
2019-12-13 17:36:51
6081
原创 Webpack dll优化实战
DLL是什么，用它来干啥？ DLL（Dynamic Link Libray）原来特指windows系统中实现共享函数库的一种方式，扩展名通常为.dll。玩过老windows游戏的同学应该对这种文件不陌生，很多游戏的安装盘下就有很多.dll的文件。DLL通常是已经编译、链接的二进制文件，方便程序直接调用。前端应用场景 在大型项目的开发过程中，往往会用到很多公共库，公共库的内容不同于业务代码...
2019-12-13 17:36:18
289
原创 plugin-proposal-optional-chaining源码分析
前言书接上文，在前一篇文章中babel插件分析-编写你的第一个插件，对于babel的原理和如何写一个插件进行了大致的分析，这里我们将结合一个官方插件@babel/plugin-proposal-optional-chaining，对babel实现进行深入分析。当前的浏览器还不支持可选链式调用，也就是类似这样的写法：let a = b?.c;// orlet cc = a?.b();即在...
2019-12-13 17:34:51
1489
原创 babel插件分析-编写你的第一个插件
前言 最为一个前端开发者，应该没有人不知道babel是什么，但针对不大熟悉的同学，在这里我还是简单介绍一下：JavaScript 的版本标准更新频繁，从2015年开始，就以每年一个版本的速度更新（该版本为es6），每个版本标准都会推出一些新的语法糖（装饰器语法，动态加载等），极大地提升了编程体验；在下个版本推出前，社区也会提出一些提案，涉及未来es版本的最新特性（可选链式调用等）。这些新的特性...
2019-12-13 17:31:44
307
原创 node命令行交互与child_process实战
1、 前言 随着项目的逐步膨胀和复杂，我们在实际的工程应用中会通过编写各种各样的脚本来提高效率，传统的方法是在项目的package.json文件中注册各种各样的命令，来完成打包，构建，打包分析等操作。类似于这样：{ "name": "chat", "version": "0.0.0", "private": true, "scripts": { "start": "b...
2019-12-13 17:25:48
1227
原创 2天入门小程序开发
前言 当下的前端业态正在朝多端化发展，小程序和诸多跨平台的架构(ReactNative、Weex、Flutter)开发逐渐成为大公司的必备选项。作为前端从业者，除了传统的web开发工具集，我们也需要掌握一定的跨端开发能力，以适应技术潮流的发展。在此我将通过一个简单的例子，展示微信小程序的基本开发流程。小程序开发概述小程序优缺点 作为一个有一定学习门槛的新平台，小程序必然要给我们带来一定...
2019-12-13 17:21:52
187
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人