JS響應資料

2022-07-28 19:09:15 字數 2037 閱讀 3356

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

當然,最直接的方法就是操作節點,頁面載入之後獲取節點,再將資料填充到獲取的節點之上,每當資料修改,就將該資料對應的節點重新填充資料,像修改資料這樣的操作只能通過頁面中的操作來實現,也就是事件繫結呼叫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,保證生成的觀察者物件的唯一性。

完整**:

Ajax 響應資料

資料提交到的兩種請求get和post基本上都會使用後,就應該想獲取資料的問題了。前面我們都一直很無私的往伺服器提交資料,那麼伺服器返回的那些資料,我們又該怎麼通過ajax去拿呢?這裡就要靠xmlhttprequest的事件onreadystatechange,這是用來監聽我們請求的一些狀態,比如 成...

原生JS響應式瀑布流

如何產生響應式列 動態獲取視窗的尺寸 獲取到列的固定寬度 響應式列數 動態獲取視窗的尺寸 獲取到列的固定寬度 如何獲取響應式列的最小高度?把產生的列容器放在乙個陣列裡面 這個陣列使用sort 方法進行公升序排列 產生的新陣列的第一位就是高度最小的列 charset utf 8 title cols ...

js和media query的響應式

window resize function else if window width 879 else if window width 880 loyalty banner loyalty visible slidedown 1000,function 窗體變化監聽 window.nresize ...