网站的二级栏目怎么做,商务网站开发意义,网站配色方案橙色,河北省住房和城乡建设厅网站查当你看到这篇文章意味着我辜负了教主的殷切期望周末木有去约会#xff0c;以及苏老师我思故我在北京鼓楼的落井下石成功了…… 本文demo powered by 已经结婚的老赵的不再维护的wind.js 物是人非啊…… 说回正经事#xff0c;在上一篇文章中#xff0c;我们取得了初步成果教主的殷切期望周末木有去约会以及苏老师我思故我在北京鼓楼的落井下石成功了…… 本文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 starttag end于是我们的做法是遇到tag start就入栈遇到tag end就出栈并且校验一下是否匹配。 对于Text节点我们则需要把相邻的Text节点合并起来我们的做法是当字符token入栈时检查栈顶是否是Text节点如果是的话就合并Text节点 同样我们来看看直观的解析过程 html maaaa head titlecool/title /head body img srca / /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
