前端
文章平均质量分 94
tangding12
这个作者很懒,什么都没留下…
展开
-
2022请查收这份前端指南
你的测试越接近于软件的使用场景,它就会越可靠。原创 2022-07-04 09:13:56 · 173 阅读 · 1 评论 -
聊聊去年最火的前端库zx
&emsp根据github上的数据,去年最受欢迎的前端库为谷歌棋下的zx。今天我们就来聊一聊这个去年最火的前端库。zx是什么 zx 是谷歌实现的一个能在 node 中写 bash 的库。就像这样:await $`echo "hello world"`; 使用$``框起想要执行的命令,就可以直接执行 bash。 这个库的最大的便捷在于,node 和标准的 bash 都是我们非常熟悉的东西。只需要知道最基本的库的使用,就可以很快上手,写出功能很强大的工具。基本使用 只需要安装原创 2022-02-03 21:26:22 · 1565 阅读 · 0 评论 -
如何组合两个不同版本的react
错误的开始 接到需求,我需要在 react-15 的项目中,嵌入一个最新 react 版本写的编辑器。 刚开始思考的很简单,编辑器是以包的形式发布在公司私有 npm 上的 -> npm 包是编译完发版上去的 -> 只要保证编辑器使用自己打包编译的 react 就不会造成影响。 为了保证打包进准确的依赖版本,我特意把 react 和相关的一些组件包申明在 dependencies 中,{ "name": "editor", "version": "0.0.1", "de原创 2021-07-05 18:55:28 · 3371 阅读 · 2 评论 -
务实之道
我的源码被猫吃了好像是楼上的暹罗猫。 当我刚进上家名为某道智能的奇葩公司的时候,坐在我右侧的 java 开发总是和我说:这里不是善地,等我看完这本书就可以去面试跳槽了。我惊异于他的目标性,非常尊敬的冲他点了点头。然后看了一眼书,是一本关于 mysql 的书籍,看到第一章,大概110页的位置。 后来公司开始疯狂的加班和要求我们电销,当 CTO 在讲话时要求员工主动加班想办法为公司创造价值的时候,我知道是时候准备面试了。我和右侧的 java 开发说,老哥我明白你的意思了,我要开始准备面试了。他得意原创 2021-03-20 16:55:18 · 302 阅读 · 2 评论 -
实现 Promise 要讲武德——手把手实现一个遵循规范的 Promise
一步步实现一个 promiseA+ 规范的promise。Promises/A+ 规范 Promise 是一个解决js异步调用的方式,它于 ES6 以对象的形式实现和出现。 在 Promise 解决js异步调用的解决思路出现以后,Promise 标准出现以前,github上大大小小的 Promise 库出现了上千个,实现思路和调用方式各不相同,质量也参差不齐。各个类库经常出现引用了三四个 Promise 库功能互相间还不能互通兼容的情况。为了解决这个情况,社区出了一个开源的通用的 Promis原创 2021-01-24 02:22:08 · 286 阅读 · 2 评论 -
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 · 129 阅读 · 0 评论 -
webpack,迈出你的第一步-1
原文为线上开源的英文书籍。你可以点击这里阅读原书籍。本篇对应书本前两篇,讲了什么是webpack,webpack的基本开发。什么是webpack webpack是一个模块打包器。通过定义入(input)出(output),webpack能自行遍历模块之间的引入,根据自定义的配置,生成对应的文件。 webpack支持各种模块和标准,诸如 ES2015, CommonJS, MJS, AMD 甚至 WebAssembly,通过导入器(loader)也能很好支持诸如css的文件。你可以使用插件(plu原创 2020-11-16 11:03:53 · 205 阅读 · 0 评论 -
一文读懂react实现原理
转载自翻自Rodrigo Pombo的博文Build your own React。翻译有纰漏和不足之处请多多指教。 你可以在这里阅读原文,在这里提交勘误。本文已获得原作者翻译转载授权。如果需要转载翻译请联系原作者或者本人。 我们将一步一步重建一个属于我们自己的react。我们的react架构将和真实的react架构相同,但是去掉了大部分的优化和一些目前不必要的功能。接下来我们将逐步在自己的react中实现这些能力:createElement函数render函数Concurrent翻译 2020-10-04 19:06:36 · 3124 阅读 · 0 评论 -
前端应该懂的网站优化思路
缓慢的开始 一次偶然中,我发现我的个人站打开需要长达半分多种的时间,吓得我赶紧打开Network看一下到底是什么问题导致的。NameSizeTimetime.gif83.7kb3.87smain.js1.68mb31s 事实上问题再简单不过了,资源过大了。自己自费的服务器仅仅有1M的带宽,意味着传输的每秒的极限值只能达到100kb。在硬件配置无法提升的情况下,只能通过软件的调整来进行对应的优化了。优化大体思路 web的优化一直是不存在标准答案的,是因原创 2020-08-30 22:57:41 · 242 阅读 · 0 评论 -
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 · 611 阅读 · 0 评论 -
一文告诉你 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 · 181 阅读 · 0 评论 -
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 · 575 阅读 · 0 评论 -
关于JS中number位(Bit)操作的一些思考
JavaScript中所有的数字都按照IEEE-754标准储存为64位。但是位操作符却是转换为32位数字进行操作的。关于这一点的可用性进行了一些思考。32带符号整数 先来复习一下32带符号整数的数据表示方式。在计算机中,所有的数据都是被储存为0和1的序列,数字也不例外。比如数字4,通过二进制转换,储存为100。但是整数在实际业务场景中是存在正负的,如何用01序列来表示一个负数呢。我们可以...原创 2020-03-30 14:17:54 · 2211 阅读 · 0 评论 -
不定期更新的源码阅读日常——lodash-3
今天我们来读lodash的节流防抖部分代码。 节流和防抖,是限制函数高频执行的一种手段。它们概念的区别在于,防抖合并多次函数执行为一次;节流是在一定的时间内函数只执行一次。具体的区别可以参考lodash官网推荐的这篇文章。 虽然明细了概念的区别,但是在lodash源码中,这两个方式其实是一个实现。lodash中_.debounce对应防抖,_.throttle则对应节流。我们先来看一...原创 2020-03-22 18:20:01 · 249 阅读 · 0 评论 -
不定期更新的源码阅读日常——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 · 196 阅读 · 0 评论 -
react源码阅读-基础
react包基础概念以及React包的两个核心api阅读。阅读React包的源码版本为16.8.6。基础概念react包 react包的本质上是建立一个react相关数据类型的抽象屏障,它创建了一系列符合react渲染调度的数据结构,在各个react相关平台(dom,native,render)上进行渲染调度。 在阅读源码前,我一度认为诸如createElement和Compone...原创 2019-12-28 22:40:50 · 689 阅读 · 0 评论 -
《SEO深度解析》读书笔记(4-6)
SEO深度解析4-6章主要讲述了关键词、链接的设置取舍,以及具体如何在网站中进行相应的优化 其实一直比较好奇,为什么SEO的书籍和资料,大多数到2016年开始就浅藏辄止了。这个困惑在本周和一个做竞价的同学聊天中得到了解答。同学告诉我,现在已经没有多少企业去做SEO了,成效实在太慢了,大多数都直接去做SEM了。对于大多数的中小型企业来说没有那么多时间和人力投入到一个为期半年以上,不能保证见...原创 2019-12-25 09:45:24 · 367 阅读 · 0 评论 -
《SEO深度解析》读书笔记(1-3)
SEO(Search Engine Optimization),搜索引擎优化,根据搜索引擎(谷歌、百度)的规则来优化自己网站,提升在搜索引擎里面排名的一种技术。是前端技能树比较冷门的一环。 最开始接触到SEO,是最近自己接的一个外包官网项目,甲方要求SEO上优化几个关键的搜索词,在谷歌上面能够排到前列。至此踏入SEO的坑。在搜索了几个SEO相关的博客网站,看了SEO一些相关介绍之后,得出的...原创 2019-12-24 10:35:10 · 633 阅读 · 0 评论 -
《JavaScript函数式编程》4~8 读后感
《JavaScript函数式编程》4~8章讲了函数式编程通用的几种模式,以及在实际业务场景测试、异步操作的环境下的运用方式。函数的柯里化与管道模式 在《JavaScript函数式编程》1~3 读后感中曾经阐述过:在函数式编程思想中,需要把每一个函数功能拆分为最小单元的功能块。即:函数的设计要精简,每个函数实现的功能需要专一,以组合的方式来实现所需要实现的业务逻辑。函数柯里化就是这样思...原创 2019-12-23 17:06:25 · 113 阅读 · 0 评论 -
关于JS的Date你所要知道的二三事
半个多月没更新博文了……鬼知道我经历了什么。连续十几天的班赶项目,在五一加班两天后,终于闲暇一会,整理一下前些时间项目所用到的Date对象进行处理的知识点。Date Date是JavaScript中一个原生构造函数,可以生成时间对象。但实际上可以使用非构造函数的方式来调用Date,此时生成的是一个当前时间的字符串。 与其他原生构造函数不同,Date没有字面量的声明方法。var ne...原创 2019-12-04 13:05:31 · 163 阅读 · 0 评论 -
package.json里面有啥
前言 今年的2月19日是令我印象深刻的一天,不是因为这天是元宵节,而是因为这天晚上9点我生平头一回直面阿里面试官的面试,问倒了我一半问题。 在前端工程化部分他问了我两个问题:你知道`1,表示什么版本吗?depends有四种依赖形式,你知道他们分别是什么吗?知道哪一种depends不会被安装吗? 对这方面仅仅是了解的我,愣是一个没答上来。 今天趁着清明假期,整理一下packa...原创 2019-12-03 14:52:05 · 522 阅读 · 1 评论 -
Promise的出现与实现
这篇文章总结一下JS本身单线程异步的局限性(promise出现的原因),以及实现一个简易的Promise。单线程与异步 JavaScript是一个单线程执行的语言,在不考虑异步编程的情况下,它执行的顺序就是一个eventLoop的简单循环。比如书写一段简单的JS代码:// 声明两个变量,和一个函数var demoVariA = 100;var demoVariB = 200;// 函...原创 2019-12-02 10:12:38 · 430 阅读 · 0 评论 -
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 · 109 阅读 · 0 评论 -
隐藏在"=="后面的JavaScript隐式转换
逛遍各大程序社区论坛,不少自称编程“大牛”的人最喜欢调侃的语言就是JavaScript。这门被一周创建出来的动态语言被嘲讽没有任何编程的严谨性,其中最为被大家们津津乐道的就是JS中的"=="号。实际上你在使用时,经常会发现这样的情况:// 一个数字既不是true也不是false40 == true // false40 == false // false// 扑朔迷离的字符0null...原创 2019-12-01 23:06:07 · 99 阅读 · 0 评论 -
不定期更新的源码阅读日常——lodash-1
不定期更新的源码阅读日常将不会采用逐行摘抄源码然后分析阅读的方式进行源码阅读,而是提炼分享源码中个人发人深省的部分进行摘录总结,知识补足。不定期更新的源码阅读日常阅读的库都是模块零碎化或者小功能库。方便灵活,而且不需要连续阅读。不定期更新的源码阅读日常将不定期更新。欢迎大家关注我的个人博客,来查看我每周都会更新的一些文章。今天我们来读lodash的Array部分。数组length的边...原创 2019-12-01 22:34:05 · 191 阅读 · 0 评论