前端数据管理

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

一、 原始方法
直接在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， 而后各自更新本身的组件。