Imperative vs. Declarative
就如同常見的兩種編程方式,JavaScript與DOM交互的方式也分為命令式與聲明式。一般來說,聲明式編程關注於發生了啥,而命令式則同時關注與咋發生的。
var hero = document.querySelector('.hero') hero.addEventListener(‘click’, function() { var newChild = document.createElement(‘p’) newChild.appendChild(document.createTextNode(‘Hello world!’)) newChild.setAttribute(‘class’, ‘text’) newChild.setAttribute(‘data-info’, ‘header’) hero.appendChild(newChild) }) }
上面這個小例子就是典型的命令式編程,我們手動地查找到某個元素,然后將UI狀態存儲在DOM中,換言之,就是關注於如何達成某個目標。命令式編程的優勢在於很直觀,不過缺點也很明顯,整個程序的健壯性很差,也不易於擴展。譬如如果某人把那個元素的類名從hero
變成了villain
,那么事件監聽器就永遠不會被調用了。
聲明式編程可以較好地解決這個問題,剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區處理,這樣就能讓開發者專注於發生了啥。
今年才出的Angular 2也是組件化思維,不過太過龐大。另一個常用的小而美的工具就是 React,專注於用戶交互的構建。React可以認為是MVC層中的View層,React只是一個Library,通常與 Flux或者Redux一起結合起來使用。