前端沒有數據庫的概念，不能永久保存， 那么前端數據應該怎么管理呢。

1、 原始方法

直接在view中定義要使用的數據， 然后傳值顯示。

let data = ['test','test'];

{ data[0] } //借助js框架將data可以傳遞到html中{ data[1] } //借助js框架將data可以傳遞到html中

2、 前端動態管理數據

在view中初始化數據， 也相當于是在view中定義要使用的數據

Function (name) {

return this.name = name;

};

function init() {

let initData1 = new Function('test1');

let initData2 = new Function('test2');

return initData = [initData1, initData2];

};

init();

{ initData[0] //借助js框架將data可以傳遞到html中{ initData[1] //借助js框架將data可以傳遞到html中

通過函數來生成數據的好處， 方便數據的處理。

比如通過點擊事件想在添加一個數據， 則可以通過js調用函數， 生成一個新數據，

那么怎樣將生成的新數據傳遞給html呢？？？

以前的方法：

前端要想更新頁面數據， 必須重新請求后臺， 獲取新數據，然后刷新頁面。

js直接操作dom，修改dom值。

可是如果頁面需要更新的地方太多， 直接通過js操作dom修改dom值， 會慘不忍睹。

{ initDataType }

{ initDataType.type }{ initDataType.name }{ initDataType.id }

對于上面這樣的情況，則每個dom都要處理的話， 頁面負擔重， 代碼上也會很麻煩。

現在的方法：

因為這些dom的數據都是有關聯性的， 更新了initDataType這個數據， 可以指定更新某個具體的dom以及這個dom的子dom。

(riotjs的例子)[https://github.com/zhangchch/...]

這個例子中，就是通過js初始化數據，然后通過js事件，更新數據，

更新數據后， 指定更新某個組件(只是更新這個組件，不會影響其他組件，也不會更新整個頁面)，同時也會更新這個組件的子組件。

那么這個過程中數據是怎么管理的呢？

添加course或者添加student或者添加student

course.tag 這個組件的數據存儲在courseList,studentsList這兩個數組中。

先初始化兩個數組的數據。

當通過某個事件改變這兩個數組的數據的時候， 比如courseList添加想添加一個元素。

某個地方點擊添加courseList， 攜帶添加的值， 觸發添加函數添加一個courseList元素，

然后將這個添加的courseList元素放入courseList數組中， 最后更新這個組件。

也就是說通過操作courseList,studentsList這兩個數組，來管理數據的。(更新相應組件)

student取消訂閱某個course或者添加訂閱某個course

student-item組件中，通過取消訂閱某個course事件，

哪個學生取消哪個訂閱，

直接在當前學生組件中， 取消訂閱某個course， 同時觸發對應的course組件， 消除這個student。

這個做法是在具體的兩個對應的組件中修改數據，然后各自更新自己的組件。

對總的courseList,studentsList沒有任何操作，也就是說courseList,studentsList沒有發生變化。

這個做法是點對點的操作。

redux的思想：student取消訂閱某個course， 去更新courseList,studentsList， 然后更新course.tag 這個組件，自動去刷新子組件。

某個course發布消息通知所有訂閱了這個course的學生

這個也是點到點的數據操作， course-item組件中發布某個消息， 攜帶學生，消息等參數， 傳遞給student-item， 然后各自更新自己的組件。

總結

以上是生活随笔為你收集整理的HTML前端数据管理,前端数据管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。