关于近期项目的思考 - 1.画面

从进项目组到现在，眼看着这个项目从最初的40多个人到现在我们几个人，越来越接近尾声。回想下项目中遇到的

一些问题，记录下来。

 

整个项目是一个会计系统，采用复式记账法。对这个不太了解的同学可以去网上搜搜。具体的业务我就不说了。

该项目采用B/S的结构，在IE8下运行。开发语言是PHP,后台数据库为SQLServer 2008,在symfony框架的基础上

进行了二次封装成为我们的开发框架。

 

背景：画面分为Header检索部和List明细部。数据项的添加，更新，删除放在同一个页面进行。检索部检索

数据时，会根据检索部的选择进行明细部的各明细项是否可输入值的判断，最终不可输入值的项灰掉。

例如： 检索部下拉框有三个选择： A,B,C

           明细部展示项：M1,M2,M3,M4,M5...

当检索部选择A, M1,M3,M5...不可输入值，其它可输入值。

当选择B,M2,M4,M6...不可输入值，其它可输入值。

当选择C,M3,M5，M6...不可输入值，其它项可输入值。

A，B，C可进行切换选择。画面默认检索部选择A。

方案：

对A,B,C每个选择，对应明细部可输入的的项做一个列表进行配置。在页面初始化进行调用，JS中进行判断。

优点：后期要变更每个明细项可输入情况只需更改配置。

缺点：效率很低，基本上每次切换都需对每一个明细项进行可输入值的状态变更。

改进案：

由于画面初始化时检索部默认选择A，则在初期化画面时明细部各明细项可输入情况按照A情况进行初始化。

经过观察，A，B，C三种情况并非所有的明细项可输入值情况都不同。找出其中明细项在A,B,C三种不同的

情况进行配置。相同状态的项不再重新进行状态赋值。

总结：能放在页面中做的逻辑尽量不放在JS中进行处理，否则系统加载运行时很慢。

 

背景：选择明细部每一行的checkBox，点击删除按钮进行删除。

将明细部的每一行放在一个div中，每个div用rowNum记录该行的行号，点击删除时传递该行的行号进行

该行div的删除。这部分做了个共通，所有的画面都遵循相同的接口规范，调用时只需按照共通要求传递

值即可。同样的处理还有检索部的联合数据查询，当每增加一个条件时，共通会自动进行SQL的拼接，无

需每个人单独对其进行处理。

总结：对于一些经常用到的地方提取共通，一方面使用起来比较方便，便于大家的统一，另一方面

在测试和后期维护等节约很多工作量。

 

背景：明细部的每一行M1项需要根据明细部同一行的M2项选择进行自动赋值。

方案：当点击M2项进行选择时，会获取该对象。因为是同一行，则可以根据查找兄弟节点的方式找到M1项，然

后根据M2项的值进行M1项的赋值。这种方式效率并不高。而且代码的可读性不高。

改善案：在明细部进行展示时分别给M2项与M1项一个特别的属性rowNum用于记录当前行号。M1项给一个ID，

格式为 element_行号。当选择M2项时可以获取当前行号，即知道需要变动的M1项的ID，此时根据M2项的选择

直接赋值即可。

总结：能用ID进行获取对象的的尽量想办法用ID进行对象的获取。

 

背景：明细部的M2项为下拉框，初始值为空，下拉框的值需要根据检索部A的值自动加载。页面一旦加

载完成，下拉框对应的值是固定的。

方案：初始页面时将检索部A选择的值对应的M2项值分别存放在几个隐藏域中。明细部进行加载的同时初始化明

细部M2项值。当检索部A变化时，M2项重新进行加载。

缺点：此种方案每次在展示明细部时会把所有行的该项数据组装完成，这本身是一个比较耗时间的操作。对于明

细部，并不是所有行都会被用到。M2项初始值为空，而未被用到的行进行M2项下拉框的初始化是不必要的。

改善案：初始页面时将检索部A选择的值对应的M2项值分别存放在几个隐藏域中。当点击M2项时进行数据的

加载。这样用到哪一行的M2项就开始进行加载。需要注意的是：第一次加载后的数据再次点击无需进行加载，

除非检索部A选择的值发生了变化，需要重新将M2项的值设为空。

总结：画面动态加载数据时，能够进行延迟加载的就稍后用到的时候进行加载，避免加载不必要的项浪

费初始化时间。

 

处理细节上应该注意的：

①明细部行数过多时，页面渲染时间会很长。需要合理的设置每页显示的大小。做一个共通分页组件往往是

有效地。

②注意多次重复点击按钮的处理，可以点击一次后出现遮罩层，当出现数据时遮罩层消失。

③对于地址栏访问其回退处理，禁用回退按钮或使回退页面失效。

④对于画面输入框，对其最大输入长度，半角全角进行限制，避免在后期再进行check。对于金额等数字，应该

注意正负等情况。日期等输入时调用日期控件等。能在前台进行处理避免的可在输入时就进行限制。

⑤整个画面的布局，字体，风格保持统一。