都是这样的模式：

<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 树子叶） 🌝

因为性能问题最好还是看跑分的，它涉及到的影响因素太多了，比如底层一点 JavaScript 解释器、POSIX 线程、Gecko、硬件解释器都可能在进行某些操作时有各种各样的不定时的开销
所以自己手动推测只能得到很不确定的「大致」结果（除非真的是算法上很大的变化），『<del>说难听点叫那只是你一厢情愿的推断（删除）</del>』

建议多使用各种跑分工具，sysprof、评测代码测试你那个速度，而且，现在的 Fx、Chrome 开发者工具很先进跑分、评比资源占用都方便多了，在讨论性能优化的时候不要忘了 prof 结果是纲

简化一下主代码，一行（相对于函式库代码来说）

Object.prototype.run = function (opt) { opt(this) };
const GITHUB_REPO_REGEX = /^https:\/\/github.com\/([A-Za-z0-9_-]+)\/([A-Za-z0-9_-]+).*/;

$('#network').children
  .map(x => x.children.length)
  .zipWith($('#network').children)
  .sort((a, b) => a.first() < b.first())
  .first()
    .second().children
    .filter(x => x.tagName == 'A').second().href
    .match(GITHUB_REPO_REGEX)
    .run(n => alert(`${n[1]}/${n[2]}`));

真好看（迫真）
然后我才发现其实可以不用创建 N 个 zipWith 列表的...

```

$('#network').children

.

sort((a, b) => a.children.length > b.children.length)
  .first()

```

也可以（大嘘）
我真是<del>聪明</del>反被聪明误（划掉）...

突然很好奇 why 本频道进来了这么多人，打算做个小调查，因为 Telegram 也不会告诉你 subscriptor 们是咋想到要进来的...
虽说之前 80 个人我也没想什么...

#recommended #javascript 一个惨痛的排序性能教训（XD

说到排序自然而然又想到 @drakeet 那事了... 其实他不是不会排序... 不至少还写过 Sorter 类么
只不过有序列表处理时可以不用一起 sort 而也可以将几个列表 merge （不过对列表来说应该叫 concat）到一起的...

...头晕（口头禅了...）

好吧... 天才也要学习啊，没有人是生而知之也没有人可以学十几年以后就不再提升自己了...
反正我不关心这些... 他主动屏蔽我我也不会再尝试了解他 可惜啊，不过纯纯写作现在发展得还不错还在维护

*注： Sorter 是 Go 语言的一个 pattern（貌似）
它要实现 Cmp、Len、Less，不过最用的就是 Cmp(a, b): Bool 了。
单纯的面向对象里想传递逻辑（代码块）只能附着在对象上传递，Comparer（比较器）就是一个例子
而函数式里根本不存在这种必须写这种代码的问题（Groovy，我这里没 JShell）：

List<Integer> ls = [2, 1, 5, 8, 4, 9]
List<Integer> ls_asc = Arrays.sort(ls, new Comparator<Integer>() {
  public int compare(Integer a, Integer b) { return b - a; }
});

好像不能解析... 算了 :V

https://duckduckgo.com/?q=contcat+function&t=ffab&ia=web

刚才写错了，LWL 裙中有纠正，感谢反馈。concat 是 CONCATENATE 的缩写