看 API 返回文档的时候我真的是服了 RESTFul API 的设计了，这是丝毫不考虑压缩数据，一大堆 *._url 本来可以直接利用这个版本 API 的约定得出来的东西 REST 全直接返回了... 有点像面向对象 virtual 方法一样食之无味弃之可惜

现在正在查有没有对应的 GraphQL API

其实是我感觉和 virtual 方法（Jawa 厨不要以为自己没见过，你们天天都在用虚方法）（别找了，Java 里根本没有 virtual 关键字！）在某些方面感觉有点一样的性质，OO 大佬轻喷

#telegram 100 Members Thank U!

https://developer.github.com/v4/object/repository/#forks

A list of *direct* forked repositories.

DIRECT!!!!!!!! ... 看来 *Graph* GRAPH!!!! QL 它 TMD 也查不成 ....

https://github.com/Sodium-Aluminate/repeat-tutorial/network/members

这里，可以使用 $('#network') CSS 选择器找到网络树图

难受的是它的结构是被「编译」成了「缩进」一样的格式... 和 Python 一样...
得手动解析缩进才能知道枝叶深度... 然后才能构建出对应的树... 都可以出成 OI 送分题（删除）了 2333 🙈

都是这样的模式：

<div class="repo">
  <img alt="" class="network-tree" src="https://assets-cdn.github.com/images/modules/network/i.png">
  {{ repeat $depth }}
  <img alt="" class="network-tree" src="https://assets-cdn.github.com/images/modules/network/b.png">
  {{ end }}
  <img alt="" class="network-tree" src="https://assets-cdn.github.com/images/modules/network/l.png">
  <!-- end tree structure -->

  <img class="gravatar" src="https://avatars0.githubusercontent.com/u/10570123?s=32&amp;v=4" alt="@duangsuse" width="16" height="16">
  <a href="/duangsuse">duangsuse</a>/<a href="/duangsuse/repeat-tutorial">repeat-tutorial</a>
</div>

i.png 长得像这样：┊
b.png 长得像空白字符
l.png 长得像这样：└
t.png 长得像这样：┄

这种嵌套树形结构就是这么做...

enum ImageType
Block, ChildBranch, Leaf, EndLeaf

def renderImage(type = ImageType::Block)
text = when type
is Block => "\t"
is ChildBranch => "┊"
is Leaf => "┄"
is Endleaf => "└"
return Html.text(text)

def renderRepositoryItem(name, nick, repo_name)
avatar = Html.img
class: 'gravatar'
src: getUserAvatar(User(name), 32, 4)
alt: "@$name"
width: 16
height: 16
return avatar << Html.a(name, { href: "/$name" }) << "/" << Html.a(repo_name, { href: "/$name/$repo_name" })

def renderTreeView(tree)
html = Html()
html << renderRepositoryItem(tree.name, tree.nick, tree.repo)

for (index, node) in tree.children.withIndex
if tree.isLastIndex?(index) break
html << renderImage(ImageType::ChildBranch) << renderNodeView(node, 1)

return html << renderImage(ImageType::EndLeaf) << renderNodeView(tree.children.last)

def renderNodeView(node, depth)

又把它提升到递归题的层次了... 我拿 Kotlin 写一下，然后写 Makefile 尝试不用 Gradle #Android 单靠 ABT（Android Build Tools）编译打包 #Kotlin Android SDK28 应用试试

def renderNodeView(node, depth):

递归... 对 CS 系的同学来说不是易如反掌吗... 而且贼自然 不用写循环

学写 CMake 大概也不错吧... 比 Make 多了一个宏系统？
它连依赖关系都管理不好构建有依赖的包麻烦得要死...

Haskell 递归起来很方便呢，可以再先写个 Haskell 的 tree ...

https://github.com/Sodium-Aluminate/repeat-tutorial/network/members #javascript #frontend #fp

let map = (iter, opt) => {
  let result = new Array();
  for (let i of iter)
    result.push(opt(i));
  return result;
}
HTMLCollection.prototype.map = function (opt) { return map(this, opt); }
HTMLCollection.prototype.get = function (i) { return this.item(i); }

Array.prototype.first = function () { return this[0]; }
Array.prototype.second = function () { return this[1]; }
Array.prototype.lastIndex = function () { return this.length - 1; }
Array.prototype.last = function () { return this[this.lastIndex()]; }
let zip = (...iters) => {
  let result = new Array();
  let max_len = iters.map(x => x.length).sort((a, b) => a > b).first();
  for (let i = 0; i < max_len; i++)
    result.push(iters.map(x => x.get(i)));
  return result;
}
let filter = (iter, opt) => {
  let result = new Array();
  for (let i of iter)
    if (opt(i)) result.push(i);
  return result;
}

Array.prototype.get = function (i) { return this[i]; }
Array.prototype.filter = function (opt) { return filter(this, opt); }
HTMLCollection.prototype.filter = function (opt) { return filter(this, opt); }
Array.prototype.zipWith = function (other) { return zip(this, other); }

let childs = $('#network').children
let child_lens = childs.map(x => x.children.length);

let child_len_s = child_lens.zipWith(childs);

let sorted_child_len_s = child_len_s.sort((a, b) => a.first() < b.first());
let repo_loc = sorted_child_len_s.first().second().children.filter(x => x.tagName == 'A').second();

let gh_repo_match = repo_loc.href.match(/https:\/\/github.com\/([a-z0-9_-]+)\/([a-z0-9_-]+)/);

alert

(`${gh_repo_match[1]}/${gh_repo_match[2]}`);

顺便吐嘈一下：

1. 妈的 Firefox XXMonkey 引擎现在居然还没有支持 ES6 具名组匹配
2. 妈耶 JavaScript 不支持泛型真的好麻烦，原型扩展还得一个一个加...
3. JavaScript duck typing 怎么支持泛型... 好像也可以
4. 集合处理方法真的好方便
5. JQuery 也只是用到了一小部分集合处理方法
6. 我写的全都是最简用例所以（而且我足足写了快一个小时啊！）写 JS 的可以看看提个建议...
7. 上面是指那些还不会的... 其实我也不会吧... 我也没用 JavaScript 的 property（属性方法） 特性，btw. 其实有时候你不应该用属性方法，比如不应该定义用来获取系统时间的属性
8. 不要学我，实际上机制的你们会发现我使用 first() second() 混淆掉了一些语义，优秀的代码应该反映出它所处理的数据结构，我的代码不优秀
9. 上面的主要是闲得懒得干实事然后光做些没有的无意义的事情，不是好例子，别学我。

#web #dev #javascript #google #performance 🌚🌝 emmmm.... 如果是那种动态设置 DOM 属性的那种的话不就是说文档树上的内存依然分配但是等到用的时候再提交 JavaScript 引擎了吗... async 加载的话不好之处在于虽然不会影响网页渲染，如果脚本比较大，可能会耗费一些资源和时钟导致速度稍稍变慢

对于性能问题，最好还是先看完《CLR via C#》这样分析起来方便一些（我当然还是没有看完...）

我本来也想过 到觉得动态操作 DOM 性能不好…
而且那个脚本本身就是 async 属性的所以不影响什么

https://t.me/yscschan/6402
既照顾性能，又照顾 DNT 的一个 dirtyhack 是：
<script src="https://www.google-analytics.com/analytics.js" type="text/n-javascript" id="ga-js-tag"></script>
<script>
let dnt_ga = () => {
if (navigator.doNotTrack === '1') {} else {
document.getElementByID('ga-js-tag').setAttribute('type', 'text/javascript')
}
}

window.onload = () => {
dnt_ga()
}
</script>

写了这么久 DOM 交互代码后我终于发现我错了... 我自以为嵌套最深的是 Xeonacid/repeat-tutorial 可其实是 rikakomoe/repeat-tutorial... 🙈
因为它的子 DOM 节点数最多，换句话说就是它的「自动生成节点缩进」最大，自然是嵌套最深的叶子...

一页（Firefox 的自动换行）障目，不识泰山（最深的 fork 树子叶） 🌝