JS響應資料

頁面中展示的資訊都是儲存在伺服器中的資料，離開資料的頁面就像是一塊畫板的作用，如何通過資料來描述乙個頁面，又怎麼對映資料變化和頁面渲染的關係。

當然，最直接的方法就是操作節點，頁面載入之後獲取節點，再將資料填充到獲取的節點之上，每當資料修改，就將該資料對應的節點重新填充資料，像修改資料這樣的操作只能通過頁面中的操作來實現，也就是事件繫結呼叫ajax，成功時修改節點。這樣的方式存在很大的缺陷，如多個類似的區塊，幾百個節點都是與頁面資料相關的，再比如管理應用中資料的管理，這種情況實際應用基本不可行，對於開發維護都是一件很恐怖的操作。採用節點操作的方法來填充資料，並沒有將頁面資料化。

既然要通過資料來管理頁面，那麼就需要將頁面的資料結構抽象化，並將資料同步至結構，那麼管理的這個區塊就應該有自己的結構、資料和操作，這樣就很容易聯想到使用類的例項，也就是物件來管理頁面。我們在constructor構造器中定義資料、頁面結構、頁面中的掛載點，頁面結構使用字串模板的形式，將資料載入到結構中，並提供render( ) 方法將頁面渲染到掛載點。除此之外，頁面中的行為定義到hander( )方法中，並且把事件繫結放在hander( )之中。由於所有的頁面都包含render( )和hander( )操作，所以定義init( )方法，依次執行render和hander，就可已初步完成頁面的載入。當資料發生修改，修改完成後呼叫init( ) 重新生成新的節點並繫結事件。這樣的做法將頁面的各功能模組獨立出來，並採用集中管理的模式，減少了很多重複的操作。並且資料被抽象成物件的模式，方法被擊中在handle( )中，便於維護和管理。由於每次修改資料都要重新渲染，增加瀏覽器的壓力，並且這樣的管理模式仍然不夠直觀，資料的修改和re-render( ) 還是通過每個事件繫結來完成的，那麼怎樣才能讓資料的變化更加智慧型化呢？

既然是以物件來描述資料，那麼想要知道每次資料的修改是什麼時候發生的，那麼可以使用set( )方法定義物件的屬性，每次資料發生修改，那麼就呼叫處理該資料與檢視之間聯絡的方法，達到修改資料節點的re-render( )，並且資料的獲取採用get( ) 可以很輕鬆的管理資料，實現檢視與資料的響應。

首先定義資料，通過物件管理需要定義乙個管理的類：

class data

const data = new
data(,
template: `
`,

首次資料的載入：

loaddata() ,
//檢視和資料的描述，資料將會載入到對應的節點，並將檢視和資料的管理操作封裝到觀察列表中
subsciribe(key, value) ]`)
.foreach(item =>
doload(value);
if (this
.watchers[key])  
else
})//表單元素的載入和監察
document
.queryselector(_this.el)
.queryselectorall(`[i-model=$]`)
.foreach(item =>
doload(value);
item.oninput = function
() ;
if (this
.watchers[key])  
else
})},
//對於資料修改後的具體操作，將會鎖定到觀察列表中的內容
emit(key, value) 
}}

setdata() ,
set(_value) }})
this
.ob.subsciribe(key, value);
}}

這樣資料和檢視的關聯性就完整地表現出來，只需要依次執行頁面載入、物件描述和屬性定義設定即可，再在constructor( )中呼叫init( )，頁面的相響應資料就能夠實現了。

init()

這裡的loaddata( )呼叫獲得資料處理的描述物件並需交給this.ob，保證生成的觀察者物件的唯一性。

完整**：

JS響應資料

Ajax 響應資料

原生JS響應式瀑布流

js和media query的響應式

JS響應資料

Ajax 響應資料

原生JS響應式瀑布流

js和media query的響應式

相關推薦