最近事太多，很久没有更新了，让大家久等了。不闲扯了，进入主题，接着上一篇继续往下交流，今天，我们说一说信息修改。

　　一、网站信息修改流程

　　最常见的网站信息修改流程如下：在一个页面里进行，例如：editinfo.php，在页面内设计相应控件，然后在一个形如list.php的信息列表页面写上到editinfo.php的链接，例如：<a href="editinfo.php?id=3">修改信息</a>，这样需要修改信息时，点击相应链接将跳转至editinfo.php页面。然后我们可以在后台获取传递进来的url参数id的值，根据此值执行数据库查询操作，把相应记录的字段值赋给控件，即先执行页面初始化，把数据库中相应记录的值赋给控件，最后用户修改控件里的值，单击页面的“保存”按钮（可能会有其它名字），后台在“保存”按钮的事件处理函数内执行保存数据到数据库的操作（可以在editinfo.php页面内处理，也可以以ajax方式将控件的值传递给另外一个页面处理）。

　　好了，常见的网站信息修改流程介绍完了，下面我们思考一下，看可不可以将这个过程抽象为一个通用的过程，也就是说要修改的信息与页面无关。

　　二、功能抽象

　　我们要实现的功能是：用一个页面（实际实现时用的是<div>弹层模拟窗口）修改网站所有的信息，即，可以用同一个页面修改类型不同的数据项，例如：可以修改字符、修改图片等；可以用同一个页面修改数目不固定的数据项，例如：可以修改3个数据、也可以修改5个数据等。

　　这样讲太抽象了，举个例子，例如，一个招聘网站，有需要修改公司信息的功能，有需要修改求职者信息的功能，因为这两项信息（公司信息、求职者信息）包含的数据类型及数据数目都不一样，用传统的信息修改方法很好处理，写两个页面，一个负责修改公司信息，一个负责修改求职者信息……这样做的优缺点我们后面再比较。现在，我们想用一个页面（<div>弹层模拟窗口）来实现公司信息和求职者信息的修改，换句话说——信息修改页面能够按需要初始化相应的控件类型及控件数目。

　　再说具体一点，假设公司信息包括：审核情况（选择框），联系人（编辑框），营业执照（图片选择控件），联系电话（编辑框），公司名称（编辑框），那么，当修改公司信息时，修改信息页面（<div>弹层模拟窗口）可以创建相应控件（类型及数量符合公司信息要求），同理，当修改求职者信息时，修改信息页面（<div>弹层模拟窗口）也可以创建相应控件（类型及数量符合求职者信息要求）。

　　三、实现过程

　　看起来很难实现，但简单来说就下面三步：

　　1、list页面添加到信息修改窗口的链接，例如：<a href="javascript:g_oUI.sEDW({……})">修改</a>

　　2、用户点击链接将打开一个<div>弹层，用此弹层显示要修改的数据

　　3、用户修改相应数据并保存

　　下面具体介绍实现以上步骤的代码

　　四、代码实现

　　1、list页面链接到信息修改窗口的代码，见下图

　　g_oUI.sEDW({……})函数参数为一对象，t表示窗口标题，ldu表示从哪个页面加载数据，sdu表示修改后的数据发给哪个页面保存，最为关键的是aCDI，根据此值来初始化<div>弹层（创建相应控件）

　　下面看看此值getInfoWinConfig('AdminEditCompany')返回什么？

　　根据一字符串返回一变量，再看看g_iwcAdminEditCompany有什么内容？

　　很明显，这个数组跟公司信息修改息息相关，信息修改<div>弹层正是根据这个数组来初始化相应控件，如果要修改求职者信息，依葫芦画瓢构建一个形如g_iwcAdminEditPerson的数组即可。下面看看如何初始化信息修改<div>弹层。

　　2、信息修改<div>弹层初始化

　　看起来很复杂，实现起来很简单，根据aCDI（g_iwcAdminEditCompany的值）拼接一个包含控件的字符串，再append到相应DOM节点即可。

　　是不是很简单，嗯，看一个具体的实现函数

　　3、数据检验及保存

　　aCDI（g_iwcAdminEditCompany的值）内有数据检验的正则式（rge:"……"），用户保存数据的时候会依次根据每个控件对应的rge正则式验证控件的值是否满足条件，如都满足条件则将控件值以ajax方式post到sdu指定的页面，在这个指定的页面内执行数据校验及保存工作。由于此系统文章是关于前端的，所以这里就不给出后台相应的代码，以后介绍后台编程时再说了。

　　看到这里，你可能会问，那个图片修改控件你是怎么实现的？这里我简单说说，我用了一个标准html文件上传控件，将其设为透明，再在它上面覆盖一个<div>，并给此<div>绑定单击事件，事件中检查文件大小及类型，用FileReader读取，将其转化为base64格式显示。这里不展开讲了，相关代码可以上网搜索。下图为保存数据时的截图

　　五、性能分析

　　先说说传统的用网站页面修改信息的优缺点：优点是，实现简单，代码维护方便。缺点是，代码重用率不高，网站维护麻烦，性能不如通用信息修改窗。再说说通用信息修改窗的优缺点：优点是，信息修改与页面无关，无须加载修改信息页面（<div>弹层实现信息修改），比传统方法少一次页面请求（假设信息修改页面是静态html页面，并以ajax方式加载、保存数据），性能较优。缺点是，实现复杂，代码量较大。