出现的问题:
1. 数据与界面的同步,业务逻辑与界面显示的划分
- 数据变化时,需要更新UI。UI的更新要根据当前数据,做统一处理,而不是每更新一个数据,就单独处理某个UI变化。
当选择了“我的标签”时,需要将标签定制区域显示出来,否则就隐藏。触发UI变化的事件,不应该是“我的标签”的点击事件,而是内存中已选标签的数据的变化。
流程应该是:
界面事件引起数据变化 -> 数据变化引起界面更新
而不是:
界面事件直接导致界面更新
这样才能保证数据与界面的同步。
(数据的变化可能来自界面事件,也可能来自服务器;除了界面需要根据数据的变化而变化,业务逻辑可能也要根据数据的变化而变化。 所以,要以数据为中心。)
- 根据现存数据与UI事件去更新UI的时候,更新UI的策略算法,要跟实际更新UI的CSS语法分离开来。
当选择的标签过多的时候,需要显示左右导航。点击左右导航的时候,要将相应的下一个标签完全显示出来。这时候就要有一个判断下一个标签位置的算法,这个算法最好与UI显示逻辑分离开来,将CSS定位方式与该算法混起来,会显得非常混乱,并且不利于以后修改(也许需求只是更改了UI显示逻辑,那么算法就可以不用变化)。
- 模板与业务逻辑要隔离开来,模板只负责判断数据是否存在,如果存在就渲染。数据的格式化,要么放在前端业务逻辑代码块中,要么放在后台(放在前端更好一些,因为后台数据应该不用关心展现方式)。