提示：在firefox浏览将带给你更好的体验
个性化list它的一个特点是采用后台开放的api接口，通过前台配置参数来提取相应的数据，基于CMS系统，达到快速搭建页面的目的。历时两次改版，从数据分析来看，是非常不错的，目前在主推这个，有点欣慰。
先上效果图：
http://view.china.alibaba.com/cms/search/wandie.html
抛出商业层面上不说，来谈点技术性的东西，或许才是大家比较敢兴趣的。D2归来，提到模板技术，平时也看了较多关于设计模式，OOP相关的书，这次项目很好实践了这些技术以及设计思想。细心的朋友看页面的源码，会发现，页面就只有如下这样的代码，但是主数据区集成了很多功能。
-
-
var page_config={
-
id:'search-result',
-
type:4,
-
params:{
-
'displayCatIds':'1032712',
-
'keywords':'',
-
'pagesize':'30',
-
'recommended':'A'
-
}
-
}
-
FYE.onDOMReady(function(){
-
changeRegion(YAHOO.util.Dom.get("province_slt"));
-
YAHOO.IList.init(page_config);
-
});
很好的实现行为与表现分离，只要你代码组织的好，使用一些合适的设计模式，对于后期的维护以及改版也非常方便，这一点体会在项目体会很深。
综述想看来发中的细节点：
1.初始化管理，良好的初始化顺利并结合一些技巧，能够达到事半功倍的目的，不管是可读性，还是后续的问题定位。
-
var _this = this;
-
var initFunctionsQueue =[
-
{
-
fn:this.initFirstSearchData,
-
info:'渲染接口数据'
-
},
-
{
-
fn: this.selectMutiPic,
-
info:'多图筛选'
-
},
-
{
-
fn:this.orderSelect,
-
info:'相关排序'
-
},
-
{
-
fn:this.purchaseListTabInit,
-
info:'购物车'
-
},
-
{
-
fn:this.pageEventHandle,
-
info:'翻页'
-
},
-
{
-
fn:this.selectWangWangOnline,
-
info:'旺旺在线筛选'
-
}
-
];
-
for (var i = 0, len = initFunctionsQueue.length; i < len; i++) {
-
try{
-
initFunctionsQueue[i].fn(config,_this);
-
}catch(e){
-
YAHOO.functions.log('Error info:' + initFunctionsQueue[i].info + '; ' + e.name + ':' + e.message);
-
}finally{
-
continue;
-
};
-
}
为此还专门开发了一个执行器，可以很方便的调用(点此查看)
-
YAHOO.Actuator.add(this.getPurchaseListOfferByMemberId,this,'初始化进货单的已有offer列表');
-
YAHOO.Actuator.fire();
2.在中大型的项目中，我们会抽离很多脱离于业务逻辑的方法，那我也不例外，可能还有些细微的差别
-
YAHOO.namespace('functions');
-
$L.augmentObject(YAHOO.functions,{
-
log:function(){}
-
});
-
$L.augmentObject(YAHOO.functions,YAHOO.lang);//请关注这里
而不是如下这样：
-
YAHOO.namespace('functions');
-
YAHOO.functions={
-
log:function(){}
-
};
从代码层面上，成本多了几行的代码，但是后续可以很方便的扩展。
3.模板技术应用
晒下核心代码：
-
function doFormat(str,arg){
-
var _str = str;
-
var A = Array.prototype.slice.call(arguments, 1);
-
return str.replace(/\{(\d+)\}/g|>, function (C, D) {return A[D];});
-
}
-
function getPurchaseFailureTemplate(){
-
var purchaseFailureTemplate = '
-
<div class="pl-pannel-wrap"><a class="pl-close" onmousedown="YAHOO.functions.hiddenPurchasePannel(\'PL_{0}\')" href="javascript:void(0)" target="_self"></a>'
-
+ '
-
<h3>您的进货单已经货品数已达上限</h3>
-
共<strong>{2}</strong>种货品 合计：<strong>{1}</strong>元
-
-
<a class="view-pl" onmousedown="YAHOO.functions.hiddenPurchasePannel(\'PL_{3}\')" href="'+YAHOO.IApi.config.viewPurchaseListURL+'" target="_blank">查看进货单</a></div>
-
';
-
return purchaseFailureTemplate;
-
}
-
function doRenderPurchaseFailureTemplate(offerid,total,quantity){
-
var s = doFormat(getPurchaseFailureTemplate(),offerid,total,quantity,offerid);
-
return s;
-
}
doFormat可以算是模板引擎，但目前的功能还是比较弱的，但基于这个已经满足我的大部分要求，这里只是给大家展示其中的一个小的应用，如果结合到项目，涉及到很多节点的创建，是非常方便的。
4.设计模式和OOP，太熟悉的名字，我觉得在项目中应用才是价值的最大体现。在本次项目中，主要用到到代理模式，MVC模式，具体怎么应用，三言两语很难说的清楚，可以看下整个项目的前端设计：
(1)全局配置文件IApi
(2)公用函数集合functions;
(3)业务功能集合IList;
(4)页面有很多筛选项，需要监听，故抽离一个筛选监听器FilterListener;
(5)管理搜索数据接口的IAction
(6)管理搜索数据渲染的IView
(7)管理进货单接口的MAction
(8)管理进货单数据的MView
源码地址：http://style.china.alibaba.com/js/pages/search/ilist091207.js
这里只分享到一些技术层面上的东西，其实我更看中的是程序的设计，是否有很好的可读性，可维护性，可扩展性，还有是否适合团队开发。
很少在博客晒下自己的想法，欢迎拍砖，我的旺旺Id：alixiecg