#HTML #JS #DontKnow 你知道吗？ 🤔
HTMLElement 的 remove() 和 replaceWith(e1) 都不需要手动拿 e.parentElement ，只有 insertBefore(e1, e) 需要在 parent 上
如果不用 JQ ，可选注册 document "DOMContentLoaded" 或 window "load" 事件

element 和 node 的区别在于，前者只能是 <a> <b> <div> 这样的元素，后者可以是 #text 文本标签。

HTML 里基于 XML 的部分有三种情况： <meta charset="UTF-8"> 的单独标签、 <div></div> 的配对标签(with childNodes)、 <link rel="stylesheet"/> 的折叠(collapsed)标签，有些配对标签也有折叠形式，但折叠和 no children 是不同情况。

有许多方法可以缩写 HTML ，最常见的是基于 CSS 选择器的 emmet.io 和基于缩进的 模板语言 #Ruby slim-lang.com ，而 DOMParser 本身也支持兼容解析修正一些不完整的文档。
想在社交平台分享自己的网站， OpenGraph 了解下？

- !!"" 和 !!0 、 !![] 都是 true ，第一点往往造成隐患 必须详细检查
- undefined == null ，所以有时用 === 区别严格相等性
- JS 最不常用的两个关键字： delete o[k]; 和 v=with(o,o1) { attr }

许多时候：
如果用 e.onclick = 的简写，在任何地方的(其他)脚本重复注册时会导致覆盖，所以尽可能用 addEventListener
JS 里较短参数的函数兼容较长处的类型限制（允许无视参数），但在调用时省略默认参数可能造成性能问题，在绘图/大批/频繁处理时，需要多用图形界面的 profiler

#js #DontKnow 原型链：（感谢 @JackWorks 提供相关信息）

访问语法都是动态解析的，比如 x.prop 或

x["prop"]

就是

x.[[Get]]("prop", x)

ES 里一共有五种不同的 [[Get]] 实现，分别是
- 普通对象 [规范]
- Argument 对象（你们今天应该不会用到了）
- 类数组对象（数组的特殊行为就在这里）
- 模块对象（import * as Mod 里的 Mod）
- Proxy 对象(reflect proxy 全 delegate)

此外， Object.getOwnPropertyDescriptor(o, k) 可以获取可配置 enumerable, writeable 等属性的配置对象

Object.[get/set]PrototypeOf(o)

和 o.__proto__ 是它的「超类虚表」

[[Get]] 过程的 Receiver （第二参数）很重要，如果没有这个 Receiver，基于原型链的 OOP 其实是做不起来的

原来是往 proto 上找属性！
这就解释了 Array.prototype.map 之类的东西

parent = { method() { return this; } }
child = {}; child.__proto__ = parent;
child.a = 1; child.method(); // 返回自身

最简单的解释是， Receiver 就是属性访问的时候最上层的那个对象，会被当成 this 用。
因为在这个算法里你可以看到，Receiver 是跟着递归一路传递下去的

原来是 o["RESOLVE"](o.prototype, "attr", receiver=o) ！（当然，肯定是先查本地，然后才查 prototype
本地如果有就不会查 prototype 了

明白了，和之前写的 LuaOOP 很像，都是层叠属性查找

“ 大佬能交换下原型链相关知识吗
之前看加 Mixin 好像是说把 prototype 除了哪两个属性的什么全部复制一下
#Python 和 #Ruby 的情况我都了解， Py 是 mro() 链查询， A.wtf 和 a.wtf 都是往 class A 找成员，后者实质是 type(a).wtf(a) 所以得到 bound method ，而直接 A.wtf 就是 bind 操作
@staticmethod 直接不收 self ，不需要 bound 所以可以在类和实例上用

https://paste.ubuntu.com/p/tJv7QpSjGt/ liuil-util 的 #TypeScript mixin.ts 重写

#java #recommend #dontknow https://t.me/Javaer/557784
部分 Iterator 支持 remove() 掉上次 next() 到的项。
很多时候直接在 foreach 里操作目标 Collection 会 ConcurrentModificationException

#DontKnow #cplusplus 类型 (void*) 和 size_t 不同，无法进行 +1 运算 https://t.me/Javaer/559161

#cplusplus 嘛，为了避免有人说我指点江山 🐸我就写几行证明下 fcntl() dnotify 是超级简单地。
Android 除了 RootFS 和 libc 结构外本质就是为嵌入式优化的 Linux ，而 DNotify 是 Linux 2.4 引入的目录变更监听机制(为兼容性, in_ 是 2.6 feature)，所以我用 C++11 lambda 不需要几行代码就能实现「文件变更的监听和删除文件的保存」

众所周知写程序先写测试：

touch a b; echo 1>b
rm a b
cat saved/b

预期 ./fsw_amd . 输出 Aa Ab Mb Da Db 行。
#cplusplus #code 草，居然不支持文件名…… 真的只能看目录么 那样只能 fstat() readdir() 扫 dirent 了，而且也没法知道具体什么文件有变更，非常草。 之前还以为是不能递归监听

#include <fcntl.h>
#include <csignal>
#include <unistd.h>
#include <cstdio>
const int sigPrior = SIGRTMIN+1;
#define notNeg(v) v; if (v<0) return -1
void printFPath(int signo, siginfo_t* si, void*) {
  auto o = *si;
  getFPath(o.si_fd); printf(" %s\n", fpDesc);
}
int main(int argc, char** argv) {
  auto fp = (argc>1)? argv[1] : ".";
  int fd = notNeg(open(fp, O_RDONLY));
  fcntl(fd, F_SETSIG, sigPrior);
  fcntl(fd, F_NOTIFY, DN_MULTISHOT|DN_CREATE|DN_MODIFY|DN_DELETE);
  struct sigaction dnAct = { .sa_sigaction=printFPath, .sa_flags=SA_SIGINFO };
  sigemptyset(&dnAct.sa_mask);
  sigaction(sigPrior, &dnAct, NULL);
  while(true) pause();
  return 0;
}

fs watch 是 Ruby/Node 系 CLI 应用重要的特性，包括 jekyll, inotifywatch 在内支持者不在少数，封装好的东西例子就不举了 睡大觉😴。
https://www.linuxjournal.com/article/8478 #linux #dev
https://github.com/NexusBots/Umbreon-Rootkit/blob/master/readlink.c
关于 dnotify 如何取得 path 的问题可以 readlink /proc/self/fd/0 ，看这个

#DontKnow MAX_CANON PATH_MAX 第一次知道 canon 是指 termios 意义的…… 难怪 termcontrol 会有相关常量名 😳

https://gist.github.com/duangsuse/a8984950c563894eea54fc2f537b5003#file-inotify-cpp
唉现在想着初学时不知道 stdio, fcntl, unistd, stdlib 这些 header 都是干什么的呢…… 不知道怎么选。不过，或许新手会觉得 C 的 std in/out/err; fprintf,fscanf; fread,fwrite 比 Java 的 I/O Stream 要方便些，其实 libc 的确更不方便呢

#school #life #cplusplus #web #algorithm #statement snake&dom 🤔
感觉这个实在是太幼齿了，下次一定要加速啊（关于游戏 只会一两个模板就太可惜了）

对了，没有网的话怎么消磨时间呢？ #Google #DontKnow Dragon Trex 小恐龙！
这个东西的源码不在页面上，查 event 注册什么的应该也看不到，但通过 Performance 快照，或者 Network 查 canvas 更新的 initiator 能找到 VMno 脚本号，可以看见它把 Runner 类暴露了。

作弊小技巧： r=new Runner(); r.gameOver=console.log; r.restart();
这样 Trex 就不会 GG 了，而是永无止境地跑下去 -_-|| 仔细看还能发现月亮 spirit 是有圆缺更替的，非常细心。
整个脚本是没带框架的，还包括碰撞检测程序，啊真是非常完整呢。

#js #web #DontKnow DOM 小提示！ 😘
1. with(e.parentNode){ insertBefore(e1, e); removeChild(e) }可以用 e.replaceWith(e1) 替换
2. e.remove() 等于 e.parentNode.removeChild(e)
3. children, firstChild, prevElementSibling 不会获取到 text node 而 childNodes, parentNode, nextSibling 会
4. e.onXXX 的 event handler 里 return true 可以停掉链传播
5. event handler 都是函数值，函数不必真的有名字，只需持有函数的引用，并不一定真是带 name 的 （感觉写得好废啊
6. document.body.contentEditable=true 你会发现浏览器就像 HTML 编辑器！(designMode 亦可) ⭐️
7. document.elementFromPoint(x,y) 你会发现想实现 Ctrl+Shift+C 很简单！
8. AJAX 是异步 JS/XML XMLHttpRequest open send 的缩写，已被 fetch("http://").text() .json() Promise API 取代；PJAX 是 pushState JS/HTML 的缩写，意为能控制 navigator history API ，实现跨页播放器可用它
9. 设置 inner/outter HTML 的速度没有 createElement 快！请不要靠拼接 HTML 渲染视图，而要靠它做缓存等工作
10. e.setAttribute(attr,v) 是忽略大小写的，否则也可直接用 e[attr]=v
11. createElementNS 主要用于创建 SVG namespace 下的 tag ，这些 tagName 是不能按平常方式 create 的

12. JS 支持 (new Date).getTime() 语法，这个调用类似 performance.now()
13. cloneNode(true) 可以只复制节点 HTML ，相当于 outterHTML=outterHTML
14. 许多浏览器的控制台的 CSS warning 默认不显示，你可以启用它。 除了 console.log 还有 info, debug 等其他 logging 方法 ⭐️
15. Cookie 是 HTTP API 用户登录 session 的主要实现方法，被持久化的登录信息，一般存储在 localStorage ; 是 Storage.prototype 。
在浏览器插件里， chrome.storage.sync 是能被自动同步的配置，与单页的只能 localStorage 相对。
此外浏览器插件利用 chrome.runtime.sendMessage 能在 background 与被注入的 pagescript 之间交换数据
16. alert(); prompt("title", "默认"); confirm(); print() 往往不被推荐使用，因为 UI 框架往往有更漂亮的非阻塞替代 ⭐️
17. (un)? escape(), encode/decode URI (Component)? 是常见的编解码 API ，如果你要拼接/解析 URL ，必须用后者来兼容 &name=(含等号,&,? 等特殊符内容) 这种参数；如果你要让 URL 更可读(像解码 Unicode)可能就要用 decodeURI
18. document.execCommand("copy") 能复制已选内容，一般结合 Form 元素 input 的 select() 操作
19. 很多人都用 <script defer src=""></script> 取代 JQ 的 $(op) 或者说 document.addEventListener("DOMContentLoaded",op);
20. JQ 比较意思的地方除了链式调用、选择器 expr 支持，还有它封装的 Animation 、 Tween, easing 与队列。

#html #dom #API #doc #dontknow
https://duangsuse-valid-projects.github.io/Share/HTMLs/school/ 🌝新写了个弹球动画，我真是 HIGH 到不行，赛高哩HIGH哒≈

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats

还有之前的剪贴板我也查了
document.querySelectorAll("[contenteditable]").forEach(e=>e.onpaste=(ev)=>{ e.execCommand("paste",false,ev.clipboardData.getData("text/plain")); })

[在线Html编辑器粘贴过滤技术详解（一）_weixin_33910460的博客-CSDN博客](https://blog.csdn.net/weixin_33910460/article/details/89910701)
[JavaScript如何获取粘贴事件的剪贴板数据(跨浏览器)？ - 问答 - 云+社区 - 腾讯云](https://cloud.tencent.com/developer/ask/186776)

另外在找的时候我发现一个 1k star 的 JS DOM 变动静态库，思想挺有意思的，不用 MutationObserver 和 NodeIterator,TreeWalker (document.createXXX(e).nextNode() ) 什么的，而是利用了自定义 @keyframes 的事件 animationStart 。 API 类似 inotify ， on(selector,op) 这样

https://github.com/muicss/sentineljs
然并暖，到 DevTools events/debugger 面板看看 DOM Events 的归类就能发现有一大堆 DOM 变动的事件支持嵌套次序🌚
$0.addEventListener("DOMSubtreeModified",console.log); $0.getRootNode().body.setAttribute("contenteditable","")
稍有常识的人不难看出，如果我们的 API 继续前进，类似的魔法还能有价值吗？

#html #learn #dontknow 谈谈 IE 时代开始的 XHTML, HTML4 相关的格式之争吧。

<!DOCTYPE html> 为什么和 <!-- 那么像？其实这个标签是 HTML5 才引入的，类似 ES5 的 "use strict"; 它只是「使用新版格式」的标记

早先的时代，web就好像 (Linux 用户所见的) man pages ，HTML 就像今天看到的 markdown，并不严谨，并没有被广泛采用的规范（对 UI 而言，人杂是 web 的缺陷；心乱是 mobile 的缺陷；框架多是 desktop 的缺陷）

HTML 2,3,4 都是 retro-spec ，即先被广泛实现再有标准，而规范的制订主要是帮助兼容「含错误的网页」（真的搞不懂一些人成天爱 -webkit -moz -egde 前缀 CSS1,3 标准属性的是干什么）

比如说， <br> 和 <br/> 及相同模式的 hr,dt,p 标签，对一些浏览器可能显示，另一些无法兼容，这就导致了客户端（用户代理）差异，而规范统一了错误兼容法，即 HTML 的格式。

W3C 尝试以 XML 规范 HTML ，它指定了 application/xhtml+xml 的强制错误检查格式，但被写惯非 XML 兼容扩展的开发者拒绝了，无奈只能允许用旧 application/html 分发文档，不进行错误检查，只是做了 xml schema 规范。
所以说一些上个时代的网站(比如 gnu.org)声称自己支持 XHTML 1.0，只是说兼容了此规范，并不代表没有使用 undefined behavior 的错误兼容。当然随后 1.0 的附录 C 被取消， xhtml+xml 也不能用了(不向后兼容)

Apple WebKit 和 Gecko, Chrome与Opera 合作的 Blink 等新渲染器取代了 MS IE 的时候， W3C XHTML 2.0 尝试复辟检查的老路，并且完全向 XML 靠拢(众所周知很多应用协议基于 XML 数据建模)，竟不向后(前进者的背后!)兼容了！于是 Mozilla&Apple 发起了 WHATWG 规范组，它设计了现在被广泛使用的 HTML5 ，现有引擎支持 H5 不会 break 现有的网页。

#DontKnow #推测性 #web 关于两个常见交互/功能设计！二维码登录和「划屏手势同时使用 pager 和 paged banner」

一般而言，网站使用 cookie (本意是临时的标识符)获取用户的登录身份。不同设备有不同网络地址，最好不要复用 cookie ，服务端一般要写专门的逻辑支持「手机扫码登录」。

但是，所需最小的信息交换和直接共享登录 cookie(token) 的方法是一致的。网页端显示的二维码蕴含已登录客户端和自己都明白的一个「读写位置」，它能写的数据可能是固定的，比如由已登录客户端请求服务端写入新 cookie ；但本质仍是通过「二客户端都知晓的读写位置」来实现，只是掩盖了直接读写的操作且支持了事件

为了监听到登录事件，往往选择暴露 WebSocket 接口

== 很多时候 DOM 树上接受某事件的元素不止一个。 举个(不同平台的)例子， Android 上一些 ViewPager 里可能有横向滚动条，为什么只有滑动到滚动条末端 pager 才会翻页？

从嵌套序来看是 pager 包含了(其子项) ScrollView ，但对于用户的输入 event ，传播责任链是深者优先——直接目标 Scroll 会处理这个交互。

如果滚动条已到最左而仍收到 swipe 手势，它就不能截获(intercept)此事件仅由自己处理，故此其父项 pager 就有机会往左翻一页；反之，如果它明白事件的涵义是滚动自身，则可以消耗它而不影响父视图。