Step2-知其然:一文讲透Obsidian插件DataviewJS

Obsidian&Zettelkasten&LYT构建第二大脑系列文章总目录(持续更新)

      我们接着上一篇,Step1-先预热:一文讲透Obsidian插件DataviewJS,继续讲解第二步:知其然。作为热身,我们还是先看一段相对简单一点的代码:

示例代码

      这段代码的运行结果是:在笔记库vault中,把标签为“book”的笔记找出来,然后按照书籍的类型进行分组,每组用一个表格的形式展示出来,表格的表头包含“姓名name”、“阅读时间TimeRead”、“评分Rating”,几个字段,表格的内容按照书籍评分降序排列。执行效果如下:

执行结果

      分析代码,格式排版很重要,我的习惯是把他们放到代码编辑器里进行排版,这样便于自己阅读和理解,这里选用Sublime Text来编写和阅读代码。具体怎么用,后面找机会单独介绍,排版以后的代码如下:

格式化后的代码--可读性强

      这么看顺眼多了,也更好理解。整段代码是嵌入在obsidian笔记中的,使用“```davaviewjs”做开头,使用“```”做结尾,里面放的是javascript代码,准确的说应该是typerscript代码。因为Dataview的作者使用的typerscript来开发的Dataview插件。这个从github上的项目文件后缀就可以看出来,都是以*.ts结尾的。

typerscript文件

      代码源文件src下面包括多个目录,随便打开一个里面的文件都是以*.ts结尾。这里api和data两个目录,后面我们会重点介绍里面几个关键的源代码文件。看源代码可以在浏览器的github里打开直接看,不过我强烈建议把整个源码下载到本地,然后用Sublime Text导入整个项目,借助代码编辑器读源代码的效果会高出数倍。

      ❶  首先是一个for语句,在typerscript的for循环语句有两种形式,这里采用的是常用的for...of语法。意思就是在一个集合中逐一取出一个元素进行遍历,针对取出的这个元素,做一些处理动作。for循环体()里的部分是对遍历的集合做一个条件限制。

      ❷  let 是一个定义变量的关键词,类似javascript里面的var,不过let的用法更灵活,它可以定义任意类型的变量,比如

 let aaa : string = "hello"

这里就定义了一个string字符串类型的变量叫aaa。还可以定义别的,比如

 let dance = function(name : string) {return "Look! ${name} is dancing!"}

这里let就定义了一个函数变量dance,这个函数定义用到了function关键词,在()里定义了一个需要输入的参数name,而且明确name的类型为string字符串,在{}里定义了函数要做的动作,return是关键词,表示整个函数运行完后返回的结果。这里函数返回的是一个字符串,一句话:XXX在跳舞,这里的XXX因为在""内,所以使用了简写的方式,使用${}的方式直接调用了参数name的值,比如函数是dance("Jack"),那么结果输出就是:"Look! Jack is dancing!""。当然typerscript在定义函数时有好几种不同的方式,比如刚才的定义也可以写成:

 let dance => (name : string): "Look! ${name} is dancing!"

看上去是不是简洁了很多,这是使用=>定义函数的方式,在typescript的代码里十分常见,要习惯。其实,typerscript和JavaScript相比,代码定义更严格,它是对JavaScript的扩充,针对泛型的使用更高频,代码更简洁,但有时候过度简洁读起来不是特别好理解。比如还是这句,如果用泛型来定义可以写成:

 let dance<T> => (args : T) : T

这里使用泛型<T>的好处就是可以不用事先确定参数的类型和返回的类型,函数的适用范围更灵活,后面我们讲解dataviewAPI的部分源码时会经常碰到这样的情况。一般我们写程序,比如java等,编程的过程都是针对值进行编程,typerscript前进了一步,它能够针对类型进行编程。比如还是这个例子,我们可以定义一个自定义的新类型danceType,让它把这种函数形态给记录下来以后随时使用:

 type danceType<T> = (args : T) => T

type是一个关键词,可以理解为给一个自定义的数据类型起了一个别名,这个就是给一个自定义的函数类型的一个数据类型,起了个别名叫danceType。或者举个简单的例子:

 type mystr = string

就是给string类型另外起了一个别名叫mystr,实际上还是同一个类型。要义就是通过这种方式对类型进行编程了。结合上泛型,就变得十分灵活,不过可读性也确实烧脑了。读源码的时候这种类型+泛型的代码很多,需要熟悉和习惯。后面我会留一些配套的文章,供大家慢慢学习熟悉。

      ❸  继续看例子:for的()里的意思,使用let定义了一个group变量,因为group放在了for...of中间,所以group就是of后面跟着的那个集合中取出的一组元素,确切的说就是

 dv.pages("#book").groupBy(p => p.genre) 

所代表的一组元素集合,是一个数据结构。这里要弄清含义,就需要看看github上作者给出的DataviewAPI了,里面给出了常用的一些函数的说明,位置在首页的概述部分:

打开后,可以看到一些常用的函数:

DataviewAPI页面
API中文翻译
API英文原文

我的英文不好,所以经常是用翻译软件,中英文来回切换着看,这样效率更高一些。

      从API文档里可以看到,dv是在obsidian笔记中调用Dataview的一个代名词,一般的函数都是从dv.XXX开始的。dv.pages(source),这个函数可以根据传入参数source的不同返回符合参数条件的笔记集合,主要支持两种方式:按标签和按笔记所在的目录或者路径,这些条件可以通过与或非进行条件组合。从作者给的例子里可以看出函数返回的是一个笔记的集合pages,里面会有一篇一篇的笔记page。实际上从这个API文档中我们得到的确切信息不足,比如返回的结果到底是什么类型,看不出来,只能猜出大概的意思是一个笔记的集合,但是具体的数据类型并不清楚,这种不清晰会给我们后续理解代码带来很大的障碍,编程不是感觉怎么怎么样,而且确切的推理和推导过程,计算机代码是严丝合缝的,不是靠猜的。要想做到这点,就需要更进一步追踪进去看源代码了,这个我们放到后面第三步再说,这里先意会吧。其他函数的意思大家自己去看API,不再逐个做解释。

      typescript支持函数嵌套的写法,前一个函数返回的对象可以继续调用他所支持的函数继续一层层调用下去,所以会出现很多个函数.函数.函数这样一直连续调用一长段,很正常,习惯就好。在这里dv.pages()函数返回笔记页面构成的集合对象后,继续调用了一个groupBy函数进行分组,groupBy()内部的写法是一个典型的泛型参数传参的写法,这个后面我们看源代码的时候在继续深究,这里只需要明白,groupBy()函数是将前面的笔记集合中的元素,用genre分类属性作为对笔记集合的分组条件,这样返回的结果就是按照分类把书籍分成了几组,所以for循环的次数,和分组后的组数是一致的,看一眼for循环体内的句子,我们大概能猜到,每组书籍应该是以表格形式来呈现的,有几组就有几张表格。

      ❹  for循环体内的语句,不展开,使用了dv.head()与dv.table()的方式来输出三级标题和画表格。这里需要重点提两个地方:

      第一是group.key的用法。group在前面提了,是每次for循环从笔记集合体遍历出来的一个笔记子集合,由于前面用了genre属性做分组,分组保存的形式,类似key、value的方式,key保存的是分组的genre属性的值,value保存的是某个分组下的笔记的集合。所以,group.key的值就是genre分类,把它当成一个三级标题输出。

      第二个是dv.table()的用法,这里不展开讲,用到了排序和map构造二维数组作为填充表格的内容,这个也放到第三步里我们看源代码来详细解读。

      第二步,知其然的部分就说到这,篇幅有限,下篇继续。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,636评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,890评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,680评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,766评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,665评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,045评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,515评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,182评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,334评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,002评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,599评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2 341

推荐阅读更多精彩内容