模板技术,设计模式和OOP实践心得
提示:在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
建议继续学习:
- [Perl] Template::Toolkit 模板技术. (阅读:5361)
- 前端模板引擎 (阅读:3775)
- perl的HTML::Template模板技术 (阅读:2729)
- 将小型、现代的产品主页由psd转换成XHTML/CSS模板 (阅读:2598)
- 10 款可打印的免费线框网页模板 (阅读:2097)
- 公用样式模板的设计制作 (阅读:1522)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:g_kevin 来源: 阿里巴巴(中文站)用户体验设计部博客
- 标签: OOP 模板
- 发布时间:2010-03-31 09:25:55
- [70] Go Reflect 性能
- [68] 如何拿下简短的域名
- [65] Oracle MTS模式下 进程地址与会话信
- [63] 图书馆的世界纪录
- [62] IOS安全–浅谈关于IOS加固的几种方法
- [61] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [54] 视觉调整-设计师 vs. 逻辑
- [49] 界面设计速成
- [48] 读书笔记-壹百度:百度十年千倍的29条法则