- 博客(33)
- 收藏
- 关注
RSS订阅原创 聊聊去年最火的前端库zx
&emsp根据github上的数据，去年最受欢迎的前端库为谷歌棋下的zx。今天我们就来聊一聊这个去年最火的前端库。zx是什么 zx 是谷歌实现的一个能在 node 中写 bash 的库。就像这样：await $`echo "hello world"`; 使用$``框起想要执行的命令，就可以直接执行 bash。 这个库的最大的便捷在于，node 和标准的 bash 都是我们非常熟悉的东西。只需要知道最基本的库的使用，就可以很快上手，写出功能很强大的工具。基本使用 只需要安装
2022-02-03 21:26:22
1531
翻译 致胜 CORS
转载自翻自Jake Archibald的博文How to win at CORS。翻译有纰漏和不足之处请多多指教。 跨域资源共享 (CORS -> Cross-Origin Resource Sharing) 一直是一个老大难的问题，它是浏览器资源请求的一部分，它的一系列特性从最早一批浏览器开始至今已经有近30年的历史。从那时开始，cors 不断的发展，添加新的功能，提升默认能力，在不打破太多的 web 规则下修补过去的错误。 无论如何，我认为我应该写下我对 CORS 所知的一切，为了让
2021-12-26 17:53:03
500
原创 如何组合两个不同版本的react
错误的开始 接到需求，我需要在 react-15 的项目中，嵌入一个最新 react 版本写的编辑器。 刚开始思考的很简单，编辑器是以包的形式发布在公司私有 npm 上的 -> npm 包是编译完发版上去的 -> 只要保证编辑器使用自己打包编译的 react 就不会造成影响。 为了保证打包进准确的依赖版本，我特意把 react 和相关的一些组件包申明在 dependencies 中，{ "name": "editor", "version": "0.0.1", "de
2021-07-05 18:55:28
3261
2
原创 没学过 rust 也能看懂的 rust 内存管理设计
ownership 是 rust 语言一个独有的功能，它让 rust 在没有垃圾回收的情况下安全的管理内存。数据类型与作用域 想要理解 rust 的 ownership，首先需要理清楚 rust 的变量类型和作用域。 和大多数编程语言一样，rust 通过 堆(Stack) 和 栈(Heap) 的数据结构来对数据进行管理。当数据的长度确定的时候，这个数据会被放入到堆中，反之则会放入到栈。let s_stack = "hello";let s_heap = String::from("hell
2021-05-15 22:32:29
530
原创 务实之道
我的源码被猫吃了好像是楼上的暹罗猫。 当我刚进上家名为某道智能的奇葩公司的时候，坐在我右侧的 java 开发总是和我说：这里不是善地，等我看完这本书就可以去面试跳槽了。我惊异于他的目标性，非常尊敬的冲他点了点头。然后看了一眼书，是一本关于 mysql 的书籍，看到第一章，大概110页的位置。 后来公司开始疯狂的加班和要求我们电销，当 CTO 在讲话时要求员工主动加班想办法为公司创造价值的时候，我知道是时候准备面试了。我和右侧的 java 开发说，老哥我明白你的意思了，我要开始准备面试了。他得意
2021-03-20 16:55:18
296
2
翻译 react之道
转载自翻自Alex Kondov的博文tao-of-react。翻译有纰漏和不足之处请多多指教。 我从2016年开始从事 react 相关的工作，到现在为止仍然没有找到一个适用于所有应用架构和设计的实践。当到代码细节的时候，大多数的团队总是喜欢在架构中加入一些自己的东西。 当然了，本身就不存在一个完美的架构能够适配一切的应用和场景，但是总存在一些通用的方法能够构建高效简洁的代码。 软件架构和设计的目的是为让开发更加的高效和灵活，开发者需要有效的进行代码的开发。 这篇文章收集了一些我和我
2021-02-05 22:12:11
281
原创 实现 Promise 要讲武德——手把手实现一个遵循规范的 Promise
一步步实现一个 promiseA+ 规范的promise。Promises/A+ 规范 Promise 是一个解决js异步调用的方式，它于 ES6 以对象的形式实现和出现。 在 Promise 解决js异步调用的解决思路出现以后，Promise 标准出现以前，github上大大小小的 Promise 库出现了上千个，实现思路和调用方式各不相同，质量也参差不齐。各个类库经常出现引用了三四个 Promise 库功能互相间还不能互通兼容的情况。为了解决这个情况，社区出了一个开源的通用的 Promis
2021-01-24 02:22:08
280
2
原创 一文会用 github 新利器——github ci
github ci 是什么 github ci 是 github 提供的一个依据 git 相关事件触发的自动化脚本服务。简单的说，当触发github的事件(push/pull request等)后，github官方会提供一个服务器环境，自动的运行先前配置的脚本，差不多近似于 gitlab 的 ci。为项目创建 github ci github 来检测项目是否存在 github ci 就是查看该项目根目录下的.github/workflows是否存在yml的配置文件。因此可以通过在根目录下创建 .g
2020-11-23 22:36:23
5351
原创 webpack，迈出你的第一步-2
原文为线上开源的英文书籍。你可以点击这里阅读原书籍。本篇对应书本第三篇，讲了如何处理css。 webpack 无法对 css 做到开箱即用，需要配置对应的 loaders 和 plugins 来处理 css 文件。加载css 加载css文件需要使用到 css-loader 和 style-loader。 css-loader 能让 webpack 可以正常去寻找引入使用 @import 和 url()方式引入的文件，style-loader则是把 css 文件以行内式（style标签+样式）的方
2020-11-16 11:06:17
127
原创 webpack，迈出你的第一步-1
原文为线上开源的英文书籍。你可以点击这里阅读原书籍。本篇对应书本前两篇，讲了什么是webpack，webpack的基本开发。什么是webpack webpack是一个模块打包器。通过定义入(input)出(output)，webpack能自行遍历模块之间的引入，根据自定义的配置，生成对应的文件。 webpack支持各种模块和标准，诸如 ES2015, CommonJS, MJS, AMD 甚至 WebAssembly，通过导入器(loader)也能很好支持诸如css的文件。你可以使用插件(plu
2020-11-16 11:03:53
200
翻译 一文读懂react实现原理
转载自翻自Rodrigo Pombo的博文Build your own React。翻译有纰漏和不足之处请多多指教。 你可以在这里阅读原文，在这里提交勘误。本文已获得原作者翻译转载授权。如果需要转载翻译请联系原作者或者本人。 我们将一步一步重建一个属于我们自己的react。我们的react架构将和真实的react架构相同，但是去掉了大部分的优化和一些目前不必要的功能。接下来我们将逐步在自己的react中实现这些能力:createElement函数render函数Concurrent
2020-10-04 19:06:36
3096
原创 前端应该懂的网站优化思路
缓慢的开始 一次偶然中，我发现我的个人站打开需要长达半分多种的时间，吓得我赶紧打开Network看一下到底是什么问题导致的。NameSizeTimetime.gif83.7kb3.87smain.js1.68mb31s 事实上问题再简单不过了，资源过大了。自己自费的服务器仅仅有1M的带宽，意味着传输的每秒的极限值只能达到100kb。在硬件配置无法提升的情况下，只能通过软件的调整来进行对应的优化了。优化大体思路 web的优化一直是不存在标准答案的，是因
2020-08-30 22:57:41
240
原创 async await的多异步处理方式
写爬虫时候遇到的批量异步处理的一些思考和总结。async/await是什么 async/await是ES2017加入的标准，它允许用同步的写法来进行异步的操作，它的本质是ES6引入的Promise和Generator函数的语法糖。async function sleepy() { await sleep(1000, 'I awake'); await sleep(500, 'and sleep'); console.log('awake now'); return 0;}/
2020-07-23 19:31:54
596
原创 react源码阅读4 ExpirationTime
react更新中优先级依赖的标识ExpirationTime。阅读React包的源码版本为16.8.6。 这一章节，让我们抛弃掉react代码中的联系，单纯的来看ExpirationTime以及一些计算方式。ExpirationTime是什么。 ExpirationTime是一个数字，你可以在react-reconciler包下的ReactFiberExpirationTime.js文件中找到它的定义。export type ExpirationTime = number;Expiratio
2020-06-01 09:28:18
389
原创 一文告诉你 Why React Hook
使用了将近一周的 react Hook，期间尝试将项目中原有的class component改造成Hook，比较Hook和class的区别，得出一些个人的思考与见解。什么是Hook react官网上面对 Hook 是这样描述的。Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook提供了r...
2020-04-22 16:11:22
176
原创 react源码阅读3 update与updateQueue
react-dom后续updateContainer部分。阅读React包的源码版本为16.8.6。 在上一章节中我们看到了react-dom中render函数的逻辑是给传入的React组件创建了一个fiberRoot对象，用于标识它是整个应用的起点，上面拥有很多应用更新相关的表示符。然后创建对应的fiber给fiberRoot节点，fiber对象是每一个ReactElement都拥有的节点，...
2020-04-01 19:09:41
567
原创 关于JS中number位(Bit)操作的一些思考
JavaScript中所有的数字都按照IEEE-754标准储存为64位。但是位操作符却是转换为32位数字进行操作的。关于这一点的可用性进行了一些思考。32带符号整数 先来复习一下32带符号整数的数据表示方式。在计算机中，所有的数据都是被储存为0和1的序列，数字也不例外。比如数字4，通过二进制转换，储存为100。但是整数在实际业务场景中是存在正负的，如何用01序列来表示一个负数呢。我们可以...
2020-03-30 14:17:54
2175
原创 不定期更新的源码阅读日常——lodash-3
今天我们来读lodash的节流防抖部分代码。 节流和防抖，是限制函数高频执行的一种手段。它们概念的区别在于，防抖合并多次函数执行为一次；节流是在一定的时间内函数只执行一次。具体的区别可以参考lodash官网推荐的这篇文章。 虽然明细了概念的区别，但是在lodash源码中，这两个方式其实是一个实现。lodash中_.debounce对应防抖，_.throttle则对应节流。我们先来看一...
2020-03-22 18:20:01
223
原创 react源码阅读-react-domRender
react-dom入口函数以及基本数据类型。阅读React包的源码版本为16.8.6。 在第一章节我们了解到，react包本质上是一个数据结构建立的抽象屏障，提供起来供react的其它包，诸如react-dom，react-native调用。在这一章中，进入react-dom的源码阅读。 根据package.json的main字段入口，我们可以找到react-dom的入口文件为src/...
2020-03-22 18:15:32
873
原创 不定期更新的源码阅读日常——lodash-2
今天我们来读lodash的深拷贝部分代码。 lodash的clone和cloneDeep两个方法分别对应浅拷贝和深拷贝。两个函数其实都依赖于baseClone方法，通过传入一个标识来进行深拷贝或者浅拷贝的区分，我们来简单看一下baseClone的入参。/** Used to compose bitmasks for cloning. */var CLONE_DEEP_FLAG = 1,...
2020-01-10 23:32:17
187
原创 react源码阅读-基础
react包基础概念以及React包的两个核心api阅读。阅读React包的源码版本为16.8.6。基础概念react包 react包的本质上是建立一个react相关数据类型的抽象屏障，它创建了一系列符合react渲染调度的数据结构，在各个react相关平台(dom,native,render)上进行渲染调度。 在阅读源码前，我一度认为诸如createElement和Compone...
2019-12-28 22:40:50
679
原创 《SEO深度解析》读书笔记(4-6)
SEO深度解析4-6章主要讲述了关键词、链接的设置取舍，以及具体如何在网站中进行相应的优化 其实一直比较好奇，为什么SEO的书籍和资料，大多数到2016年开始就浅藏辄止了。这个困惑在本周和一个做竞价的同学聊天中得到了解答。同学告诉我，现在已经没有多少企业去做SEO了，成效实在太慢了，大多数都直接去做SEM了。对于大多数的中小型企业来说没有那么多时间和人力投入到一个为期半年以上，不能保证见...
2019-12-25 09:45:24
360
原创 《SEO深度解析》读书笔记(1-3)
SEO(Search Engine Optimization),搜索引擎优化，根据搜索引擎(谷歌、百度)的规则来优化自己网站，提升在搜索引擎里面排名的一种技术。是前端技能树比较冷门的一环。 最开始接触到SEO，是最近自己接的一个外包官网项目，甲方要求SEO上优化几个关键的搜索词，在谷歌上面能够排到前列。至此踏入SEO的坑。在搜索了几个SEO相关的博客网站，看了SEO一些相关介绍之后，得出的...
2019-12-24 10:35:10
627
原创 《JavaScript函数式编程》4~8 读后感
《JavaScript函数式编程》4~8章讲了函数式编程通用的几种模式，以及在实际业务场景测试、异步操作的环境下的运用方式。函数的柯里化与管道模式 在《JavaScript函数式编程》1~3 读后感中曾经阐述过：在函数式编程思想中，需要把每一个函数功能拆分为最小单元的功能块。即：函数的设计要精简，每个函数实现的功能需要专一，以组合的方式来实现所需要实现的业务逻辑。函数柯里化就是这样思...
2019-12-23 17:06:25
111
原创 《JavaScript函数式编程》1~3 读后感
《JavaScript函数式编程》一书从语言，业务场景，程序设计的角度阐述了为什么JS需要函数式编程，JS函数式编程实际使用的场景及优势。 本书的1-3章，介绍了什么是函数式编程，JS语言中函数式编程的特性，以及如何使用函数式编程解决实际场景。 函数式编程是一种代码组织形式，它相对于命令式的编程概念。函数式编程思想简单来说，就是一个纯度的，最小功能化的，通过流方式组织上下文的编程模式。...
2019-12-14 03:31:49
154
原创 关于JS的Date你所要知道的二三事
半个多月没更新博文了……鬼知道我经历了什么。连续十几天的班赶项目，在五一加班两天后，终于闲暇一会，整理一下前些时间项目所用到的Date对象进行处理的知识点。Date Date是JavaScript中一个原生构造函数，可以生成时间对象。但实际上可以使用非构造函数的方式来调用Date，此时生成的是一个当前时间的字符串。 与其他原生构造函数不同，Date没有字面量的声明方法。var ne...
2019-12-04 13:05:31
157
原创 package.json里面有啥
前言 今年的2月19日是令我印象深刻的一天，不是因为这天是元宵节，而是因为这天晚上9点我生平头一回直面阿里面试官的面试，问倒了我一半问题。 在前端工程化部分他问了我两个问题：你知道`1，表示什么版本吗?depends有四种依赖形式，你知道他们分别是什么吗？知道哪一种depends不会被安装吗? 对这方面仅仅是了解的我，愣是一个没答上来。 今天趁着清明假期，整理一下packa...
2019-12-03 14:52:05
516
1
原创 都2019了，不要再说你git操作只会add、commit、push和pull 了。
前言 Git是一个我们最常使用用代码管理工具，它的命令操作快速而又优雅，分支开发特性形成的独特git工作流模式也非常符合实际工作开发需求。这篇文章用于整理汇总我在实际工作过程中遇到的分支操作处理情况。 整理前汇总几个概念：hash算法 hash算法是一个开源的文件加密算法，它的特性在于不管多大文件的输入，文件在没有变动的情况下，总是得到相同的输出。而文件只要变动一点，它得出的ha...
2019-12-03 14:47:38
687
原创 Promise的出现与实现
这篇文章总结一下JS本身单线程异步的局限性(promise出现的原因)，以及实现一个简易的Promise。单线程与异步 JavaScript是一个单线程执行的语言，在不考虑异步编程的情况下，它执行的顺序就是一个eventLoop的简单循环。比如书写一段简单的JS代码：// 声明两个变量，和一个函数var demoVariA = 100;var demoVariB = 200;// 函...
2019-12-02 10:12:38
424
原创 JS模块的艺术
ES6的module导出引入总结。基本module语法 ES6提供了export和import语法，给予了JS模块化代码组织形式的能力。export语句用于从模块中导出函数、对象或原始值，以便其他程序可以通过import语句使用它们。export 我们假设我们拥有一个fileA.js的文件，它向外export了这些：// fileA.jsexport const DEMO_VALU...
2019-12-01 23:41:43
107
原创 隐藏在"=="后面的JavaScript隐式转换
逛遍各大程序社区论坛，不少自称编程“大牛”的人最喜欢调侃的语言就是JavaScript。这门被一周创建出来的动态语言被嘲讽没有任何编程的严谨性，其中最为被大家们津津乐道的就是JS中的"=="号。实际上你在使用时，经常会发现这样的情况:// 一个数字既不是true也不是false40 == true // false40 == false // false// 扑朔迷离的字符0null...
2019-12-01 23:06:07
98
原创 不定期更新的源码阅读日常——lodash-1
不定期更新的源码阅读日常将不会采用逐行摘抄源码然后分析阅读的方式进行源码阅读，而是提炼分享源码中个人发人深省的部分进行摘录总结，知识补足。不定期更新的源码阅读日常阅读的库都是模块零碎化或者小功能库。方便灵活，而且不需要连续阅读。不定期更新的源码阅读日常将不定期更新。欢迎大家关注我的个人博客，来查看我每周都会更新的一些文章。今天我们来读lodash的Array部分。数组length的边...
2019-12-01 22:34:05
183
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人