客戶端應用程序的全局可變狀態

Question

這可能是一個非常通用的（也許是天真的）問題。

據我所知，「客戶端」應用程序（即在瀏覽器中運行的應用程序）的編程模型意味着有一個共享的可變對象 - 網頁的DOM - 要更新由javascript程序。 天真應用我所看到的由幾十個JS回調是更新一個大的共享DOM，

它是正確的嗎？現代JS框架如何管理它？他們如何實現數據隱藏？

Answer 1

除非您依賴於window.open，iframe或允許您的應用程序跨越多個相互通信的窗口/選項卡（可能通過postMessage進行通信），否則您沒有其他選擇來操作同一文檔：只有一個文檔。

但是，這不是因爲單個文檔被操縱，文檔本身不能被分成多個封裝的協作模塊。 Nicholas Zakas在他的演講中很好地揭示了這個概念。

應該給模塊一個非常嚴格的文檔部分。這是他們自己的小沙箱，他們不應該到達其他模塊的沙箱。如果他們需要溝通，他們會以非常分離的方式進行溝通（例如通過Mediator）。

大多數今天的框架都依賴於模型 - 視圖 - 控制器（MVC）的客戶端變體，通常稱爲MV */MVW來實現該目標。我不會在這裏詳細討論，但主要目標是將數據從視圖（表示）中分離出來，並且通常將視圖與在Controller對象中完成的用戶操作的處理分開。

直到最近，還沒有真正的方法來執行封裝。例如，不可能阻止某個jQuery插件外部的代碼修改該插件生成的DOM結構。我們必須依靠程序員的專業知識來確保他們沒有涉及到插件的內部。

現在，隨着引入新概念（如Shadow DOM）的Web Components規範，真正的封裝將能夠發生。不幸的是，該規範尚未在瀏覽器中實現，但幸運的是，Google的Polymer項目可以被看作Web組件墊片。

Answer 2

現代JS框架使用JavaScript語言：在DOM事件

1. 寄存器興趣
2. 響應DOM事件：通過創建或突變對象狀態
   • 直接或
   • 通過製作遠程「阿賈克斯」請求並使用響應更新其狀態
3. 通過（有選擇地）更新DOM來反映它們的部分或全部修改狀態。

而那就是它。這就是現代客戶端應用程序的基本運行循環。

有許多框架可以用來做到這一點，當然每個框架都以不同的方式實現基本範例。像jQuery這樣的框架傾向於採用「DOM是真相」的方法，並將其狀態數據從DOM中掛起，而其他像Ember.js的則處於另一端，並採用「模型就是事實」的方法，並在DOM。

許多框架中使用的常見模式是MV *，即Model/View/Something。框架將具有某種模型來管理狀態，某種視圖/模板層以及其他控制/協調/協調應用程序的功能。這可能是特定於不存在的（即數百個DOM事件回調），或者依賴於框架的結構和複雜性。

由於存在一些誤導性評論，值得一提的是這些框架中的視圖層不等同於DOM。 DOM中最終實際上是呈現視圖的輸出，即DOM是的視圖的視圖。