关系最早的版本对分组的设计很粗糙，功能的实现是直接在好友分组管理中完成的，后来在其他地方也想使用“设置分组”的功能，而这段功能的实现逻辑和页面绑定的如此紧密，完全copy出来这样的功能很费力，也不科学。而从设计的角度来讲，这种交互“内聚”型的功能组件必须作成模块，才能提高代码重用率，也有利于提高产品开发速度。
在sns这样前端交互设计比较多的项目中，“模块化”是提高整站风格统一的有效方法，之前我整理sns的前端框架的时候，希望按照YUI的设计思路重写sns的前端结构，即按照YUI->sns core->sns base modules->sns custom modules->pagelogic的思路走，实际上，对sns base modules和sns custom modules的抽离是一个力气活，不仅要保证越底层的模块的稳固，又要保证高层模块较强的定制性和丰富的表现，这些工作都在和有限的时间做斗争，不管怎样，模块化的道路，很长久也很艰巨，毕竟，模块化是下一步对sns作性能优化的基础。
本期模块化的组件是“设置分组”，基本功能是这样，对某个好友设置分组，需要得到目前该好友所在的分组，在分组操作的浮层中将其选中，浮层中可以进行购选分组、创建分组、删除创建分组的操作，点击确定提交新修改的分组。从功能上看，该模块是典型的custom module，这里用到了弹出框，成功/错误消息提示、数据中心模块、和tipInput（就是那个新建组的输入框）模块。
模块中所有的交互都在弹出层中完成，数据中心模块担任数据引擎的作用，其他的工作无非是弹出层的渲染和事件的绑定。因此模块的结构可以初步作成这个样子：
YAHOO.CN.sns.modules.catBox.prototype = {
init:function(){},//初始化
render:function(){},//渲染浮层
delCat:function(){},//删除组
createCat:function(){}创建组
};其中它应当有的一些成员参数应该有：
YAHOO.CN.sns.modules.catBox.init(){
this.editLi = null;
this.newInput = null;
this.data = {
title:null,//层标题
delcat:null //是否默认删除组
}
};架子搭好后再看输入输出：因为是设置分组，必须输入的应当是需要设置分组的好友id，然后是一些配置参数，包括层标题和是否默认删除组。因为浮层是一个交互的模块，点击确定提交修改并得到了返回结果则认为是模块流程结束。
此外需要注意的地方：模块带有自己的css，需要在模块初始化的时引入进来，因此，基本的流程应当是这样：
YAHOO.namespace("YAHOO.CN.sns.modules.catBox");//命名空间
YAHOO.CN.sns.modules.catBox = function(){//开始构造
var fd = this;
var _arguments = arguments;
var moduleloader = new YAHOO.util.YUILoader();//定义YUILoader
moduleloader.addModule({//定义css
name:'userCss',
type:'css',
fullpath:'http://cn.yimg.com/i/sns/css/friendselector_1_0_0.css'
});
moduleloader.require(['userCss']);//load css
moduleloader.onSuccess = function(){
fd.init.apply(fd,_arguments);//css load完毕开始初始化
};
moduleloader.insert();
};
在初始化过程中，首先读入参数，然后开始渲染：
YAHOO.CN.sns.modules.catBox.prototype.init = function(){
//读参数code
this.render()//开始渲染
};在render中，生成分组列表，绑定删除和创建分组的事件，并在创建分组的时候给输入框绑定提交事件，包括回车和释放交点。
至此，设置分组的模块基本作完，使用起来也很简单，只需要一句即可：
new YAHOO.CN.sns.modules.catBox({contactid:'10372',deleteCat:true});[ view entry ] ( 508 views ) | permalink |
( 3 / 248 )
