在浏览器的背后（二） —— HTML语言的语法解析
当你看到这篇文章意味着我辜负了@教主的殷切期望周末木有去约会，以及苏老师@我思故我在北京鼓楼的落井下石成功了……
本文demo powered by 已经结婚的@老赵的不再维护的wind.js
物是人非啊……
说回正经事，在上一篇文章中，我们取得了初步成果，毫无意义的字符变成了有意义的token。
接下来我们要把这些简单的词变成DOM树，这个过程我们是使用栈来实现的，任何语言几乎都有栈，为了给大家跑着玩我们还是用JS来实现吧，JS中的栈只要用数组就好了：
function HTMLSyntaticalParser(){
var stack = [new HTMLDocument];
this.receiveInput = function(token) {
//TODO
}
this.getOutput = function(){
return stack[0];
}
}
为了构建DOM树，我们需要一个Node类，接下来我们所有的节点都会是这个Node类的实例。在完全符合标准的浏览器中，不一样的HTML节点对应了不同的Node的子类，我们为了简化，就不完整实现这个继承体系了。我们仅仅把Node分为Element和Text（如果是基于类的OOP的话，我们需要抽象工厂来创建对象。）
function Element(){
this.childNodes = [];
}
function Text(value){
this.value = value || "";
}前面我们的token中，以下两个是需要成对匹配的：
- tag start
- tag end
于是我们的做法是遇到tag start就入栈，遇到tag end就出栈，并且校验一下是否匹配。
对于Text节点，我们则需要把相邻的Text节点合并起来，我们的做法是当字符token入栈时检查栈顶是否是Text节点，如果是的话就合并Text节点
同样我们来看看直观的解析过程：
<html maaa=a >
<head>
<title>cool</title>
</head>
<body>
<img src="a" />
</body>
</html>
parse
当我们的源代码完全遵循xhtml时，这非常简单问题，然而HTML具有很强的容错能力，奥妙在于当tag end跟栈顶的start tag不匹配的时候如何处理。
于是有一个极其复杂的规则来的，幸好w3c又一次很贴心地把全部规则都整理的很好，我们只要翻译成对应的伪代码就好了：
http://www.w3.org/html/wg/drafts/html/master/syntax.html#tree-construction
略微干净的代码可以在这个gist找到：
https://gist.github.com/wintercn/5618683#file-htmlsyntaticalparser-js
在浏览器的背后（二） —— HTML语言的语法解析的更多相关文章
- Android For JNI(二)——C语言中的数据类型，输出，输入函数以及操作内存地址，内存修改器
Android For JNI(二)--C语言中的数据类型,输出,输入函数以及操作内存地址,内存修改器 当我们把Hello World写完之后,我们就可以迈入C的大门了,今天就来讲讲基本的一些数据类型 ...
- MVC框架入门准备（二） - 语言包类与工厂模式
语言包类: 相关配置项 LANG_FOLDER : 语言包目录名,默认为Lang LANG_AUTO : 自动识别语言,默认为true DEFAULT_LANG : 默认语言,默认为zh-cn方法 取 ...
- 火狐浏览器如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器？
一般点账户名——设置——安全设置中开通虚拟MFA两步验证 具体步骤见链接 火狐浏览器如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器? 二次验证码小程序于谷歌身份验证器APP的优势 1.无需下载 ...
- 手把手和你一起实现一个Web框架实战——EzWeb框架(二)[Go语言笔记]Go项目实战
手把手和你一起实现一个Web框架实战--EzWeb框架(二)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 上一篇文章我们实现了框架的雏形,基本地 ...
- 一、JavaScript概述 二、JavaScript的语法 三、JavaScript的内置对象
一.JavaScript的概述###<1>JavaScript的概念 又称ECMAScript,和java没有任何关系 嵌入在HTML元素中的 被浏览器解释运行的 一种脚本语言. ###& ...
- JVM(二):Java中的语法糖
JVM(二):Java中的语法糖 上文讲到在语义分析中会对Java中的语法糖进行解糖操作,因此本文就主要讲述一下Java中有哪些语法糖,每个语法糖在解糖过后的原始代码,以及这些语法糖背后的逻辑. 语法 ...
- Java语言基本语法
Java语言基本语法 一.标识符和关键字 标识符 在java语言中,用来标志类名.对象名.变量名.方法名.类型名.数组名.包名的有效字符序列,称为“标识符”: 标识符由字母.数字.下划线.美元符号组成 ...
- C语言文件操作解析(五)之EOF解析(转载)
C语言文件操作解析(五)之EOF解析 在C语言中,有个符号大家都应该很熟悉,那就是EOF(End of File),即文件结束符.但是很多时候对这个理解并不是很清楚,导致在写代码的时候经常出错,特 ...
- 【转】C语言文件操作解析(三)
原文网址:http://www.cnblogs.com/dolphin0520/archive/2011/10/07/2200454.html C语言文件操作解析(三) 在前面已经讨论了文件打开操作, ...
随机推荐
- 基于.NET平台常用的框架整理
自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线,让我对这个平台产生了浓厚的兴趣,在工作和学习中也积累了一些开源的组件,就目前想到的先整理于此,如果再想到,就 ...
- unity3d关于碰撞问题
这个是我做忍者游戏出现的问题,做个记录也为以后有人遇到也可以借鉴.因为刚接触unity,所以对其所知甚少,说错的地方请指教. 问题:角色碰撞墙为什么会先触发碰撞地面,然后再触发碰撞墙 想要的效果:是角 ...
- ThreadLocal内部机制及使用方法
一.介绍ThreadLocal内部机制之前,先简单说明一下其特点及用途: 1.ThreadLocal是单线程内共享资源,多线程间无法共享(即线程A访问不了线程B中ThreadLocal存放的值): 2 ...
- STL插入删除和查询测试
博客园的markdown不知道怎么插入C++代码,只好放弃了..本文在我的blog发布:http://jwk000.github.io/2015/09/02/20150902/
- Daily Scrum Meeting 汇总
Alpha Daily Scrum Meeting --FirstDay(11.8) Daily Scrum Meeting --SecondDay(11.9) Daily Scrum Meeting ...
- ECF R9(632E) & FFT
Description: 上一篇blog. Solution: 同样我们可以用fft来做...就像上次写的那道3-idoit一样,对a做k次卷积就好了. 同样有许多需要注意的地方:我们只是判断可行性, ...
- 关于使用iframe嵌套页面的跳转方式
一.背景A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,在D中跳转页面的写法区别如下. 二.JS跳转window.location.href.locatio ...
- html5shiv.js and respond.min.js
因为用到这两个插件,所以记录下来.. html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持Css3 Media Quer ...
- java分享第十六天（ java读取properties文件的几种方法&java配置文件持久化：static块的作用）
java读取properties文件的几种方法一.项目中经常会需要读取配置文件(properties文件),因此读取方法总结如下: 1.通过java.util.Properties读取Propert ...
- CentOS安装配置redis
安装前准备,安装gcc 先用 gcc -v命令检测本机是否安装gcc,如果没有则用下面命令安装: yum install cpp yum install binutils yum install gl ...