![](https://img-blog.csdnimg.cn/20190713192926956.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
从TypeScript视角看HTML DOM
利用TypeScript的强类型实现解析HTML DOM。
元无心
2023年尽量不摆烂
展开
-
Evaluate之迷思
evaluate这个词到底是什么意思?按照翻译的解释:form an idea of the amount, number, or value of; assess.实在是有点抽象。在应用中,感觉最常见的意思大概就是“评估”了。不过,在数学里,它是“求值”,求出某个表达式的值(区别于solve,solve是解方程的“解”),对应于”value of“;在人机交互里,这个意思有点接近于评估,...原创 2019-07-15 10:30:06 · 1559 阅读 · 2 评论 -
从TypeScript视角看HTML DOM(六):Scripting
这一篇可能和TypeScript没太大关系。看到TypeScript实现的script接口(去掉了deprecate的属性),除了我们平时经常用的几个属性之外,还可以添加监听,倒是让人耳目一新。interface HTMLScriptElement extends HTMLElement { async: boolean; defer: boolean; src: ...原创 2019-07-15 11:26:14 · 1233 阅读 · 0 评论 -
从TypeScript视角看HTML DOM(五):Event
说了半天事件,事件是什么?说到底,事件无非就是网络状态的变化,或者是用户的操作。这里的状态是比较宽泛一点的概念,不是单指网络的连通性一类的状态。插一句,提到监听网络状态变化,倒是有一个新的实验性APInavigator.connection,可以用于检测网络状态,其中包括网络类型、带宽、RTT等一系列属性。好用是挺好用,但是目前看起来支持得并不充分,至少Firefox就不支持;不过Chrome是...原创 2019-07-15 17:39:47 · 1275 阅读 · 0 评论 -
从TypeScript视角看HTML DOM(四):Event Flow
说起DOM,除了HTML到DOM树结点的映射之外,最让人印象深刻的,大概也是最重要的,就是事件了。我们在浏览器中的操作,大多属于UI事件。我们先来看看W3C对UI事件的定义:This specification defines UI Events which extend the DOM Event objects defined in DOM. UI Events are those typ...原创 2019-07-15 13:32:39 · 1266 阅读 · 0 评论 -
从TypeScript视角看HTML DOM(三):NodeList与HTMLCollection
“理解NodeList和HTMLCollection,是从整体上透彻理解DOM的关键所在。“——《JavaScript高级程序设计》解决上面的问题之后,我们有必要进一步深入一下。NodeList和HTMLCollection这两个类,在方法上的差异是毫无疑问的。按照Stack Overflow上的说法:Both interfaces are collections of DOM nod...原创 2019-07-13 19:15:45 · 1903 阅读 · 0 评论 -
从TypeScript视角看HTML DOM(二):Node与Element
要说DOM,绕不开的自然是结点(Node)的问题[1]。我们在实际使用的时候,应该都见过这种现象,对于同一段HTML,用children和childNodes获取到的内容不太一样。举一个从网上看到的例子:<html> <body> <h1>China</h1> <!-- My comment ... --> ...原创 2019-07-13 19:13:52 · 3661 阅读 · 0 评论 -
从TypeScript视角看HTML DOM(一):前言
按照信息隐藏的观点,一个模块应该暴露自己的职责,同时隐藏具体实现。其实,我们认识一个模块,其实只需要一份“契约”而已:知道了供接口、需接口,和本身的“不变式”,这个模块的职责也就清楚了(模块的交互体现在供需接口里,作为参数出现)。以往,JavaScript没有强类型,在契约的实现上有所欠缺;现在TypeScript提供了强类型和接口机制,正好给了我们一个更深刻(也更简单)的认识DOM的机会。...原创 2019-07-13 19:12:48 · 1471 阅读 · 0 评论