#JavaScript #react 🤔 https://immerjs.github.io/immer/docs/example-setstate

https://github.com/FirefoxBar/HeaderEditor/blob/master/src/background.js HeaderEditor 的 response body 修改 #Learn #JavaScript

解码用到了新的 ArrayBuffer / TypedArray API

browser.runtime.onMessage.addListener(function(request, sender, sendResponse)
传统的 Message 化控制流扩展

if (browser.contextMenus != undefined)
browser.contextMenus.onClicked.addListener((info, tab) => {

WebExtensions ContextMenus API

browser.browserAction.setIcon({ path: "" })
常见的 BrowserAction

_textEncode(encoding, text) {
let encoder = this._textEncoder.get(encoding); //cache
if (!encoder) {
// UTF-8使用原生API，性能更好
if (encoding === "UTF-8" && window.TextEncoder) {
encoder = new window.TextEncoder();
} else {
encoder = new TextEncoder(encoding, { NONSTANDARD_allowLegacyEncoding: true });
}
this._textEncoder.set(encoding, encoder);
}
// 防止解码失败导致整体错误
try {
return encoder.encode(text);
} catch (e) {
console.log(e);
return new Uint8Array();
}
}
还有许多不能直接发上来了，只有简化版，待会还有一个 time limited cache，看看。

#dev #JavaScript #Haha 草，我竟然做出来了……
一个车夫，赶着1辆马车，车上坐着5个人，每人拿着5个袋子，每个袋子里装着5只大猫，
每只大猫带5只小猫，每只小猫带着5只老鼠干粮
问：这道题里一共有多少条腿？ 😂

衬衫的价格是 9 磅 15 便士。ES6。

const
laoshu = n => n*4,
mao = n => laoshu(n)*5 + 4,
bigmao = n => mao(n)*5 + 4,
daizi = n => bigmao(n)*5,
ren = n => daizi(n)*5 + 2,
cheche = n => 2 + ren(5);

answer = cheche(1) //13104

===== 评论区 =====
duangsuse: https://t.me/dsuset/7251

const
laoshu = n => n*4,
mao = n => laoshu(n)*5 + 4,
bigmao = n => mao(n)*5 + 4,
daizi = n => bigmao(n)*5,
ren = n => daizi(n)*5 + 2,
cheche = n => 2 + ren(5);

answer = cheche(1) //13104
wuhang2003 - 疯狂...: (➤duangsuse) 同学给的答案是 15516，某搜题软件提供的答案是 15512 ，怎么说这差距也太大了🌚

#zhihu #JavaScript https://www.zhihu.com/question/384801714/answer/1125005923

https://github.com/itorr/homo/blob/master/homo.js#L1 #JavaScript #code
核心代码，首先我们有一个类似这样的表，eval(xs[i]) == i ： ["1", "2"]

function divmod(a, b) { return [Math.trunc(a/b), a%b]; }
function ordFinder(xs, cmp, is_descending = false) {
  const sorted = is_descending? xs.sort((a, b) => b-a) : xs.sort();
  return function finder(n) {
    for (let x of xs) if (cmp(x, n)) return x;
  };
}

const findMaxLT = ordFinder(predefined, (a, b) => a < b, true);

function demolish(num) {
  if (typeof num != "number") return "";
  if (num < predefined.length) return predefined[num];
  let [k, div] = divmod(num, findMaxLT(num) );
  return `({demolish(k)}*{div}+{deomolish(mod)})`. replace(/\*\(1\)/, "") //*1=itself
}

开始我还以为是自动构造数学表达式然后 filter 呢……

#JavaScript #tools #recommended #China #Low #bear https://greasyfork.org/zh-CN/scripts/399436-清明节要拒绝强行吊丧/code

#web #PLT #JavaScript #zhihu https://www.zhihu.com/question/385711203#write
牛逼啊，竟然还扯出了 extonic object, 稀疏数组, 2^53-1 一大堆术语

function* readSourceTable(text) { //< obsoleted
let entries = text.split("\n\n");
for (let entry of entries) {
let entryList = [];
let key = null; let content = "";
for (let line of entry.split("\n").map(it => it.trim())) {
if (line.length == 0) continue;
if (line.endsWith(":")) {
if (key != null) entryList.push([key, content]);
key = line.substring(0, line.length-1); content = "";
} else content += `${line}\n`;
}
entryList.push([key, content]);
yield entryList;
}
} #JavaScript #web 丢掉的代码，虽然也不怎么厉害

补充一句： #Python #PLT #cs 红姐 其实是 github.com/thautwarm
https://pythonhunter.org/episodes/ep11

https://github.com/anqurvanillapy
另外 ANQUR 也是 Python 大佬
#JavaScript 的 贺老 就是贺师俊、 阮老师 就是 阮一峰

这些是昵称/尊称。

中午还没吃饭，那就不吃了，最近浪费时间第一的实践...

#JavaScript 其实最开始我是不打算用 fold 解释器的，打算直接用 eval() 处理变成 clickingOn("wtf").addsClass("") 这种形式的代码，为此还定义了一个


foldReplace(/(\S+)\s+(\S+)("[^"]*")?/, (a,b,c) => a+capitalize(b)+c?(${c}):"", "apple fd") function capitalize(s) { return (s=="")?"" : s[0].toUpperCase()+s.substr(1, s.length); } function foldReplace(re, op, input) { var text=input; var matched=false; do { matched=false; text = text.replace(re, (_, ...args) => { matched=true; return op(...args); }); } while(matched); return text; }


但是发现这样没法区别处理 "" 里的东西，不得不换成兼容 ES5 的 RegExp sticky flag 分词法。

总之，这次感觉血亏，跟着一个30岁，还只会前端、冒鬼点子的大叔，也没学到写CSS。

嗯…… 也不全对，学到了个 requestAnimationFrame((t_ms) => void) 算 start/elapsed
还有魔怔的 +function(){}() 等于 (function(){})() IIFE 技巧

#Web #JavaScript #CG Canvas 笔/刷技巧。 最后一个特效很有意思

#Web #JavaScript #dev

0202 年了, Fetch API 居然还没有进度回调 😡
#吐槽 #JavaScript

#ce #plt #JS #DontKnow 在 #JavaScript 的一个 async function 中，请问在什么情况下 return fetch(...) 和 return await fetch(...) 会有区别？
（其中 fetch 返回一个 Promise，且这个 Promise 一定是成功的）

duangsuse:
async function 相当于一个可带 awaiter 的 function* ，封装为 Promise
直接 return Promise 大概会得到二层的这个
await 的话等价 yield 执行权给 awaiter ，成功了 return it ，大概是 Promise<String> ？

reply:
正常 async 函数返回值也是 Promise<string> 哦（注： fetch() resolve 后是 string

other:
如果返回的是promise那么还得await或是then
reply:
并不需要，Promise 套娃是会自动解开的

duangsuse:
[In reply to duangsuse]
呃……想起来了，async awaiter 其实会自动 await yield 的 Promise ，而 return 也是一种 yield

duangsuse:
[In reply to reply]
async function op1() { return Promise.resolve(100); }
async function op2() { return 100; }
for (let op of [op1,op2]) op().then(console.log); //100 x2

function foldN(n, op, x) { var acc=x; for (var i=0;i<n; i++) {acc = op(acc);} return acc; }
foldN(4, (x) => Promise.resolve(x), 100).then(console.log)

reply:

try { return op1(); } finally { op2(); }

里 op1() 先执行

try { return await op1(); } finally { op2(); }

里 op2() 先执行

duangsuse:
[In reply to duangsuse]
亦可简写为
const puts=console.info;
const op1 = async()=>Promise.resolve(100), op2 = async()=>100;
for (let op of [op1,op2]) op().then(puts);


foldN(4, v=>Promise.resolve(v), 100).then(puts); 

另外一般内部实现的 awaiter 亦可这么定义：

function __onestep(gen) {
  let {value, done} = gen.next();
  if (!done && value instanceof Promise) value.then(x => __onestep(gen.next(x)) );
  else return value;
}
function __awaiter(gen) { return Promise((resolve, reject) => { resolve(__onestep(gen)); }; }

未实现 reject
果然是 try-catch 时控制流易跑偏……看来在协程continuation的实现方面结构化异常处理需要注意啊

duangsuse:
[In reply to reply]
感觉你这个和举的例子有点区别啊…… 举的例子里 return 是实际执行的最后一条语句
第一个…… 不对，看起来是我默认错了

最后一行和实际末语句是有区别的，如在 () => { return 1; print(); } 里。
尾调用优化也是 return thisOp(); 是可变成循环， return thisOp()+1; 仍需保留调用栈

duangsuse, [13.01.21 11:06]
try {} 里的 return 语句居然还能前置执行 finally {} ，涨知识了
之前哪里能用到这么多 try 块……

await 休眠当前函数实现的不错，看来这个问题是问“控制流什么方法可以在 return 前加逻辑”啊
回答本身是执行顺序问题。如果直接 return Promise 会被 awaiter 处理，类型上也没错

#javascript #ui #plt #js #web #tools https://rete.js.org/ 有意思，可视化编程框架，但仅仅是框架 写了点加减法、浏览器事件的例子

列一些有趣的社区项目 #math #listing #Java
https://www.desmos.com/calculator/i6fijibmbz

#GUI 系列：
https://github.com/darsam44/Mini-desmos (吐嘈: 真的不迷你)
https://github.com/DanielZhangD/Javmos
https://github.com/LitterallyTheCoolestGuy69/Desmos-But-Scuffed

#Python 转换/等式代码生成脚本系列：
https://github.com/MrNewdary/svg2desmos/blob/main/svg2desmos.py
https://github.com/anematode/parametrizer/blob/master/undeletable.py
https://github.com/allesspassig/despy/blob/master/despy.py
https://github.com/emily-yu/image-to-desmos OpenCV #cv
#music https://github.com/AlexApps99/MIDI2Desmos 听 MIDI 函数图系列...

多项式课系列：
https://github.com/galbar07/Desmos
https://github.com/yonatan555/Desmos-Polynom
https://github.com/JiangTianXiang/Grade-12-Calculus-Graphing-Calculator
https://github.com/WhoIsKatie/Javmos
https://github.com/TimChoy/javmos
https://github.com/DvirTomer/Desmos-Polynom

乱入：
https://github.com/andrewpareles/Calculator/blob/master/main.ml
https://github.com/Tuttivers/ExponentialSeekbar-sample/blob/master/NearMeSeekBar.kt#L75 #Kotlin #Android
https://mukunthag.github.io/SHM/ 振荡器什么的...
https://github.com/Rob--/root-approximations/blob/master/evaluatex.js#L190 #JavaScript #lib #parsing 几百行的符号代数系统...

可移植性/项目管理极差的 GUI：
https://github.com/Pi-Man/Graphing-Calculator/tree/master/Graphing-Calculator
https://github.com/RohanK22/cppmathtool
http://well-made-territory.surge.sh/Desmos.html
https://github.com/softchickenidiot/3D-Grapher/tree/master/3D Grapher

我开始讨厌学校里照本宣科了，如果不是因为不熟悉 #JavaScript 这种「动态语言」，怎么会写出如此执掌的代码……我太阳
学校的JS理应把重点，首先让他们写 deep copy 和 deep eq 之类熟悉{} 然后再科普ES6新语法，以及Babel,TypeScript 在完全无需考虑兼容这回事
DOM最少也要把 innerHTML 和 Text 的区别教了，别只AJAX下载html，省得一些人文H不分

在这个视频
函数风格的DSL #design 不是很新的概念(尽管在js界里是.. )，Flutter,ktCompose,我的TkGUI, 甚至蛤为的 ArkTS 都用它取代过XML

☝️一个框架能意识到 CSS,HTML -in-JS 对整个易用/复用性的必要，可以说是一种革命 ，因为它的设计重点从 @click.prevent 和 "reactivity" 这些花哨的东西，转移到UIUX的数据和操作上了

当然，写法的不同也是主要竞争力，像 ArkTS 这个就滥用builder和this ，非常难看

EQ一开始也像Van一样主要负责“模板”，但后来也实现了 lists,when ,组件和CSS模块化

这个视频例子上，EQ的胜负处：
👍
- 统一的风格(甚至像独立于ES6的语言了)，避免 func,const,return div() 的无味之争
- 没有 n=van.state(1) , 变量随便加
- 没有 .val (按_currDep 捕获val访问) 和derive的概念，而是让事件选中(Eq.sel)变量，看起来更纯，低魔法
- html格式化,很ES6
- when() 很漂亮，在纯JS,html 里都能用
- 我不写 3:33 的那种滥用弱类型的代码😐 简洁，显然不是指能看懂的符号少

👎
- wOSK{} 三要素 没能显示出对组件设计的益处 (需求太常规，API的体系性无法体现。像 Van 这样到处 onclick 是意识不到该做 btn(数组,) 复用, 以及该避免 onclick 可变时"escape" )

- 同样，因为EQ涉及三界(JS的带this管道,async load,ondiff,ease-efx,wOp-SSR事件上传,.) 所以只有 界0=wOSKita 是<100行的，与Van同为极简主义的我应该很丢脸?(x
- 在不用爬虫时写 html 模板，稍微有点长
- wOp({tap:n(x=>x+1)}) 选中了n变量，但放在 html`count is ${n(x=>x+1)}` 也可以

— 在 4:09 上 —
👍
- {x:0}.it.x 不负责保留旧值，也没 html _binds ，因此适合在NodeJS里用
- x0.it.to({x:1}, (A,B)=>B) 的「合一 unify」 适用于赋默认值、模式匹配等情况 🌠
- div$cls() 简写真的很CSS。EQ的风格就是DOM加糖
- 浏览器本就会“批量修改DOM” 再reflow ，EQ不会对数组以外重新检查 “vDOM变更”，再用setTimeout去哆嗦着赋值那些玩意。obj.it 就是EQ的“虚拟树-但无关HTML ”
- EQ自然支持 SSR(注水,wOp上传-HTML下载, ) 尽管未提供无DOM模式
😐
- 不用写 import tags，因为 evalFun 在运行或编译时支持了 this 作用域
- createElementNS() 的支持被复杂化为 {svg}=ee.use, 包含 svg,WebAudio 滤镜图

- 不能 van.add(ul,state转节点) ，因为EQ必须支持爬虫和diff-特效，必须隔离JS,DOM，而不是靠跳帧检测全局states, 替换或删除其 _binds=[元素,函数,deps..] , 再在节点已移除时"GC"
不能靠 ul( ()=>del? null : li() ) 修改子节点，只有“when,as=filter函数”能做GC
因此，EQ里 wKV 是不需要靠返回原元素，来避免replace的

EQ选择的是Node 和 Object.it “合一”，而不是 shallowRef() 的字典，所以它的 diff 不是在树内vars被拍平后，靠跳帧检测，而是在 JS对象图。
也因此对 [1,2,3] 和 [[1],[2]] 赋值，都是既不Memo(Van做到了)，也不导致<text>外ul节点替换的，只是旧值被新值“合一”了

总之，VanJS 足够小，所以这个视频分析的相当全面 #recommend

可能在程序员看来，我每天都在写 “不能运行的代码”……
但这就是设计者做事的方法 🥳