关于项目作业系统的开发


本文介绍个人在用 AngularJS 开发项目中的作业系统模块过程中遇到的问题及解决方案寻找的过程,给自己做个记录。

前期酝酿

一开始,首先要明白整个流程:

后台产生作业数据 --> 前端如何取这个数据 --> 取回之后怎么用 --> 用数据来驱动视图

JSON数据   -->      $http返回promise   -->  取回后是一个数组 --> 在directive中用

fake数据

目前后台还没有搭,只能先fake一个数据,这个JSON的数据格式需要良好的构思,这样对于后续的逻辑操作至关重要,才能够让操作尽可能简单,而不需要绕很多的弯路。酝酿 homeworks.json 这个数据也不是一蹴而就的就是了,要不断地实验,不断地更改,不断地完善,才能更好,就算到现在,肯定还有好多字段需要改变。这个过程中,最重要的就是狠下心,咬咬牙,就算现在功能实现了,但是如果数据结构太烂,或者是别的(如directive)的结构太复杂,太烂,能够换,那么狠下心也得换了,不能出烂货

取数据

取数据这个就仿照了 notification 怎么取,我这边就怎么取,然后注册到 reader.js 的 $scope 中,没太大的问题。最后以 $scope.homeworks 这样一个对象作为接口提供外面模版/视图使用。

扩展指令

最开始的版本是所有东西写在一个 <homeworks> 指令中,模版内容,css样式,以及数据如何去追加到合适的位置,都全部动态放进去,别提有多复杂,这期间遇到多多少少的问题,虽然是小问题,也都一一解决,但后来碰到单元过滤这个问题,无论怎么想绕都绕不过去,只好重写这个指令,把模版分离出来,多扩展了两个新指令,达到现在的这样,解构之后很清晰,而且每一层用 ng-repeat 这样也就可以很好地对应 JSON 文件中很多层的嵌套,也就避免了如果只有一层指令,一层 ng-repeat 那样去取最内层的数据是非常麻烦的。

后来又遇到了闭包在循环中的引用问题,还是通过解构成小的问题,避免了循环的出现,完全可以避免的东西,就尽量不要用。这也算是个原则了。还有就是要狠得下心重构

添加单元过滤

添加单元过滤也用了两个 commit 才得以解决,主要是在 ng-repeat 中,对于 filter 来讲,输入是总的集合:homeworks ,而不是子集 homework ,这样就能在扩展的 filter 里面进行比较了。filter 受启发于 这个帖子 以及 这个

后续开发

后面还有就是收集学生做题的情况实时反映在UI中,然后把答案提取打包,丢给后台处理这个问题,整个过程主要还是侧重在监听本地存储的变化,不去管后台来的JSON的变化,因为本地存储会去同步远端的数据。

左银右煌 /
Published under (CC) BY-NC-SA in categories programming  tagged with AngularJS