模板技术，设计模式和OOP实践心得 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> 模板技术，设计模式和OOP实践心得

模板技术，设计模式和OOP实践心得

浏览:2784次出处信息

提示：在firefox浏览将带给你更好的体验

个性化list它的一个特点是采用后台开放的api接口，通过前台配置参数来提取相应的数据，基于CMS系统，达到快速搭建页面的目的。历时两次改版，从数据分析来看，是非常不错的，目前在主推这个，有点欣慰。

先上效果图： gslist

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

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：一个兼容多种场合的Javascript图片大小自适应function

后一篇：Debugging JavaScript：throw与console >>

文章信息

作者：g_kevin 来源：阿里巴巴（中文站）用户体验设计部博客
标签： OOP 模板
发布时间：2010-03-31 09:25:55

建议继续学习

近3天十大热文