前端數據管理

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

一、 原始方法
直接在view中定義要使用的數據， 而後傳值顯示。

let data = ['test','test'];
<div>{ data[0] }</div>   //藉助js框架將data能夠傳遞到html中
<div>{ data[1] }</div>   //藉助js框架將data能夠傳遞到html中

二、 前端動態管理數據
在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();
<div>{ initData[0]</div>   //藉助js框架將data能夠傳遞到html中
<div>{ initData[1]</div>   //藉助js框架將data能夠傳遞到html中

經過函數來生成數據的好處， 方便數據的處理。
好比經過點擊事件想在添加一個數據， 則能夠經過js調用函數， 生成一個新數據，
那麼怎樣將生成的新數據傳遞給html呢？？？
之前的方法：

• 前端要想更新頁面數據， 必須從新請求後臺， 獲取新數據，而後刷新頁面。
• js直接操做dom，修改dom值。

但是若是頁面須要更新的地方太多， 直接經過js操做dom修改dom值， 會慘不忍睹。

<div>
{ initDataType }
<div>{ initDataType.type }</div>
<div>{ initDataType.name }</div>
<div>{ initDataType.id }</div>
</div>

對於上面這樣的狀況，則每一個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， 而後各自更新本身的組件。