专注于做有价值的技术原创

0%

1. Hook 简介

Hook 这个词很多人都听过,就算不知道,也直接或间接地用到过。它通常是系统或框架开放出来供上层应用开发者执行代码的一种方式。例如,Vue 的生命周期钩子,本质就是框架内部在对应时机调用了组件定义的钩子函数;此外,Webpack 所使用 tapable 更是将 hook 的应用发挥的淋漓尽致,tapable 最值得称赞的就是,它对 hook 做了很好的抽象和分类。

2. Hook 的表现形式

对于开发者,Hook 通常以钩子函数形式存在。开发者注册钩子函数,系统或者框架决定在什么时候调用钩子函数,某种意义上,它和事件回调函数有异曲同工之妙。从数据结构的设计上,我们可以使用键值对(散列表,JS中的普通对象)来表示系统提供的钩子,其中,键代表钩子名称,值是钩子函数数组。

例如,下面的代码包含一个init钩子,这个钩子注册了3个钩子函数:fn1, fn2, fn3

1
2
3
const hooks = {
init: [fn1, fn2, fn3]
}
阅读全文 »

1. 响应式的本质

提到 Vue 的响应式,通常指的是视图跟随数据的改变而更新。开发上带来的便利是,在需要更新视图呈现时,只需修改视图渲染所需要的数据即可,而不用手动操作DOM。从实现来说,可以分为两个部分:

  • 监听数据改变
  • 更新视图

我们很熟悉如何监听鼠标的点击,键盘的输入等用户事件,但是很少直接去监听一个数据改变的事件。虽然,不存在数据改变这个事件,但是监听数据改变是可以做到的,并且从程序设计角度来说,和给事件绑定一个回调函数没有本质的不同。

阅读全文 »

前言

最近公司面试了一些中高级前端,由于公司技术栈以 Vue 为主,而对于中高级前端,必不可少要问及 Vue 源码的问题。很多面试者,对于源码只能简单讲到响应式是基于 Object.defineProperty 或者 Proxy 等老生常谈的基础概念。Vue 经过这么多年的发展,成了很多前端开发者职业生涯不可或缺的一个框架。诚然,每个人都可以在短时间学习一个框架的使用,但是要深入阅读它的源码确实不是一件容易的事。这里面有很多因素,除了业务开发繁忙外,面对一个复杂庞大的代码库,以及众多平时不经常使用的构建工具和新的编程语言等干扰因素,我们时常不知道该从哪里切入。为了应付面试,只能通过一些面经文章和博客,快速获得一些基本的认知,但一旦面试官深入拷问,真正看过源码还是只看过文章,就水落石出。真正读懂源码不是靠一场突击战就能做到的,而是像浇花种树一样,日积月累,反复刻意的练习和回顾,到最后甚至可以自己写出一个框架,才算真正掌握。既然是一场持久战,我们就不能指望在短时间内把整个框架一口吃进去,而是将其分割成一个个小的技术点,一次消化一个单一技术点,连点成线,最后就能吃下整个框架。本文以及接下来一系列文章,尝试将 Vue 源码拆分成独立的技术点,并动手编码实现。

阅读全文 »

前言

有挺长时间没有更新博客了。一来是公司比较忙,二是自己也在思考一些新的问题。最近一个月,在我脑海回想最多的一个词语是“插件化架构”。作此文,也是想简单分享一下我对这个问题的见解。

来自 Webpack 的启发

去年有参与过 Udacity 前端课程翻译。其中我翻译了构建工具部分。Webpack 作为当前主流构建工具,深刻影响着前端开发工作流的变革,正如课程中所说,Webpack 聚合当前前端构建工具所有最热门的构建技术,甚至可以说,它可以作任何构建工具能作的事。那么 Webpack 为什么这么全能,是因为 Webpack 自身这么能干,精通十八般武艺?No !事实上 Webpack 比想象的要“无能”,它的全能是因为它能容万物只所能。因为 Webpack 本身是一个高度插件化设计的系统,它所表现的能力都借助于真正身怀绝技的插件的赋能。当然,我这里所说的插件包含了 Webpack 的内置插件以及通过配置传入的plugins。可以说,Webpack 只抽象了一个软件运行时环境,在不关心和改动这个系统已有代码的前提下,却能独立开发新的插件来充实整个系统的能力。这不就是软件设计中所要追求的开闭原则的最佳实践吗?从 Webpack 的插件化架构设计上所表现出系统良好的开放性,可持续的简洁性,我自然想象到,为何不在业务系统中采用这样的插件化架构。

阅读全文 »

前言

距离尤雨溪首次公开 Vue3 (vue-next)源码有一个多月了。青笔观察到,刚发布国庆期间,出现不少解读 Vue3 源码的文章。当然不少有追风蹭热之嫌,文章草草讲讲响应式原理,或者只是做了一些上层的导读,告诉读者应该先看哪再看哪。不能说这些文章就没有一点价值,它确实能够让你在短时间内,不用过多思考就能了解到一些 Vue3 重中之重的“干货”。但是过于干货的未必就是好的。因为干货通常是经过作者咀嚼过后的产物,大部分营养其实只被作者消化了。留给读者的只是一些看似很有料,实则没有营养的残渣。就像一块啃到只剩骨头的排骨。这样的文章通常适合于媒体传播,仅用于快速捕获眼球。但是对于想更细致了解 Vue3 的专业前端开发,这显然远远不够。

阅读全文 »

每一个程序员都有一款心心念叨的代码编辑器。而在众多妖颜魅惑的编辑器偶像团体前,vim 就像个不加粉饰的农村姑娘,咋一看是那样朴实无华,难有倾心。但只要走近一点,来个亲密接触,又会被她的似水柔情所俘获。

这是青笔亲身经历。公司从腾讯空降技术总监,时不时会分享一些他的开发经验。其中说到编辑器,他的脸上总会泛起淡淡桃花,“我就喜欢 vim!” 。尽管我们曾一致向他引荐当下红极一时集美貌与才华于一身的 vscode 。他却依然心有所属,不为所动。

多少次,我百思不得其解,这个“相貌平平”的 vim 到底有何魔力,能牢牢扣住总监的心弦。在我真正走进她的内心世界,多次昼夜相伴之后。我最终也被她的清新脱俗所拜倒。

接下来就让我们一起来了解这名神秘的“女子”。

阅读全文 »

所有示例都只调用一个函数:get_jobs(城市, 职业)。执行成功后,函数返回一个 pandas.DataFrame 对象,用做进一步数据分析,其中 平均月薪 已经通过 薪资描述 计算出来(已考虑月薪数,默认12薪)。同时将数据保存到当前目录下的 excel 文件,文件名格式为 城市-职业.xlsx 。例如 北京-人工智能.xlsx 表示北京的人工智能岗位。

阅读全文 »

昨天一个朋友说最近想换工作。想让我帮看下Boss现在的招聘情况如何。正好想到上个月写了个开源爬虫框架kcrawler,最后添加了一个Boss类支持,可以实现快速根据关键词查询不同岗位,不同行业的的招聘情况。有现成可用的库,帮助朋友也是举手之劳。

1. 安装

kcrawler是开源的。开发同学可以选择clone源码。但是如果想省事,就直接pip install,然后导入项目使用即可。

1
pip install kcrawler

2. 使用

提供两个类。

  • Crawler: 简单配置爬取任意网站
  • Boss: Boss专用(本文推荐)

2.1 爬虫基类 Crawler

kcrawler 提供了一个爬虫基类 Crawler , 它封装了一个通用型爬虫的基础功能。通过传入配置字典来实例化一个网站的crawler对象,然后调用对象的crawl方法,即可实现指定目标数据的爬取。支持html,json,图像的爬取。以下为Boss的配置示例。

阅读全文 »

1. 基于比较的排序(comparison-based sorting)

使用比较运算符” < ”和” > ”,将相容的序放到输入中,且除了赋值运算符外,这两种运算是仅有的允许对输入数据进行的操作,在这些条件下的排序叫做“基于比较的排序”。本文介绍的除了桶式排序都是基于比较的排序。

2. 插入排序(insertion sort)

最简单的排序算法之一是插入排序。插入排序由 N-1 趟(pass)排序组成。对于 P=1 趟到 P=N-1 趟,插入排序保证从位置 0 到位置 P 上的元素为已排序状态。

阅读全文 »