前端数据管理

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

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, 然后各自更新自己的组件。

猜你喜欢

转载自blog.csdn.net/zr15829039341/article/details/81327392