前端数据管理

前端没有数据库的概念，不能永久保存， 那么前端数据应该怎么管理呢。

1、 原始方法
直接在view中定义要使用的数据， 然后传值显示。

let data = ['test','test'];
<div>{ data[0] }</div>   //借助js框架将data可以传递到html中
<div>{ data[1] }</div>   //借助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();
<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， 然后各自更新自己的组件。