當你看到這篇文章意味著我辜負了@教主的殷切期望周末木有去約會，以及蘇老師@我思故我在北京鼓樓的落井下石成功了……
本文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節點
同樣我們來看看直觀的解析過程：
當我們的源代碼完全遵循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
文章列表
留言列表
