Web最佳实践、Chrome浏览器用法、Fetch流式上传下载、SVG矢量图、JWT
通用
JS:
窗口包含文档，文档包含元素，比如取根元素：window.document.documentElement;
document.documentElement; HTML文档会输出不含 doctype 的 <html>...</html> 元素。
等同 document.querySelector("html"); document.all[0];
获取body元素：document.body;
认证：
OAuth + JWT（RFC 7519）无状态认证
浏览器
滚动停止事件： 仅 Safari 暂未支持
window.addEventListener("scrollend", function fcb() { // document.onscrollend
console.log("滚动停止，且只执行一次。"); window.removeEventListener("scrollend", fcb);
setTimeout(() => { console.log("removeEventListener后本回调依然会执行。"); }, 3000);
}); // or 简写为 window.addEventListener("scrollend", () => { }, {once: true});
Chrome：
F12打开开发者工具，或选中元素点检查，在二级 tabs 的 Event Listeners 查看已 addEventListener 的回调函数。
Fetch API
fetch UI
下载：
上传：
单文件最简示例：
<input type="file" id="file" /><br /><br /><button onclick="execute(this)">上传</button>
function execute(btn) {
var files = document.querySelector("#fileTag").files;
if (files.length === 0) { alert("您未选择任何文件！"); return; }
console.log(files[0].size);
var maxSize = 100; // 单位MiB。
if (files[0].size <= maxSize * 1024 * 1024) {
var fd = new FormData(); fd.append("file", files[0]);
fetch("/upload", { method: "POST", body: fd
//, headers: {"Authorization": "Bearer " + accessToken}
}).then(r => {
console.log(r);
if (r.status === 413) {
alert("文件大小不能超过 " + maxSize + "MiB！(" + files[0].size+")");
} else { alert("上传完成！ - " + files[0].size); }
});
} else { alert("文件大小不能超过 " + maxSize + "MiB！"); return; }
}
多文件最简示例：
<input type="file" id="fileTag" multiple="multiple" /><br /><br />
<progress id="pbTag" value="0" max="1"></progress> <span id="pbtTag">0%</span><br /><br />
<button onclick="execute(this)">上传</button>
矢量图
SVG:
死记：
text标签不会自动换行，且以其基线起点为定位点，而其他标签则是以左上角为准。
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 100' height='100px'><text text-anchor='start' dominant-baseline='text-before-edge' font-size='64px'>😀</text></svg>" />
说明 - width/height决定最终渲染宽高，viewBox后两个参数则指内层宽高（参照svg宽高单位但不写上），根据preserveAspectRatio="xMidYMid meet"默认值，若比外层小则扩大填满外层，反之则缩小。
大段文字自动换行：
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'> <foreignObject width='100%' height='100%' style='padding-left: 2px'>😀</foreignObject> </svg>
