技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 模板技术,设计模式和OOP实践心得

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

浏览:2773次  出处信息

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

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

先上效果图:gslist

http://view.china.alibaba.com/cms/search/wandie.html

抛出商业层面上不说,来谈点技术性的东西,或许才是大家比较敢兴趣的。D2归来,提到模板技术,平时也看了较多关于设计模式,OOP相关的书,这次项目很好实践了这些技术以及设计思想。细心的朋友看页面的源码,会发现,页面就只有如下这样的代码,但是主数据区集成了很多功能。

  1.  
  2. var page_config={
  3. id:'search-result',
  4. type:4,
  5. params:{
  6. 'displayCatIds':'1032712',
  7. 'keywords':'',
  8. 'pagesize':'30',
  9. 'recommended':'A'
  10. }
  11. }
  12. FYE.onDOMReady(function(){
  13. changeRegion(YAHOO.util.Dom.get("province_slt"));
  14. YAHOO.IList.init(page_config);
  15. });

很好的实现行为与表现分离,只要你代码组织的好,使用一些合适的设计模式,对于后期的维护以及改版也非常方便,这一点体会在项目体会很深。

综述想看来发中的细节点:
1.初始化管理,良好的初始化顺利并结合一些技巧,能够达到事半功倍的目的,不管是可读性,还是后续的问题定位。

  1. var _this = this;
  2.    var initFunctionsQueue =[
  3.     {
  4.      fn:this.initFirstSearchData,
  5.      info:'渲染接口数据'
  6.     },
  7.     {
  8.      fn: this.selectMutiPic,
  9.      info:'多图筛选'
  10.     },
  11.     {
  12.      fn:this.orderSelect,
  13.      info:'相关排序'
  14.     },
  15.     {
  16.      fn:this.purchaseListTabInit,
  17.      info:'购物车'
  18.     },
  19.     {
  20.      fn:this.pageEventHandle,
  21.      info:'翻页'
  22.     },
  23.     {
  24.      fn:this.selectWangWangOnline,
  25.      info:'旺旺在线筛选'
  26.     }
  27.    ];
  28.    for (var i = 0, len = initFunctionsQueue.length; i < len; i++) {
  29.     try{
  30.      initFunctionsQueue[i].fn(config,_this);
  31.     }catch(e){
  32.      YAHOO.functions.log('Error info:' + initFunctionsQueue[i].info + '; ' + e.name + ':' + e.message);
  33.     }finally{
  34.      continue;
  35.     };
  36.    }

为此还专门开发了一个执行器,可以很方便的调用(点此查看)

  1. YAHOO.Actuator.add(this.getPurchaseListOfferByMemberId,this,'初始化进货单的已有offer列表');
  2. YAHOO.Actuator.fire();

2.在中大型的项目中,我们会抽离很多脱离于业务逻辑的方法,那我也不例外,可能还有些细微的差别

  1. YAHOO.namespace('functions');
  2.  $L.augmentObject(YAHOO.functions,{
  3. log:function(){}
  4. });
  5. $L.augmentObject(YAHOO.functions,YAHOO.lang);//请关注这里

而不是如下这样:

  1. YAHOO.namespace('functions');
  2. YAHOO.functions={
  3. log:function(){}
  4. };

从代码层面上,成本多了几行的代码,但是后续可以很方便的扩展。
3.模板技术应用
晒下核心代码:

  1. function doFormat(str,arg){
  2.  var _str = str;
  3.  var A = Array.prototype.slice.call(arguments, 1);
  4.  return str.replace(/\{(\d+)\}/g|>, function (C, D) {return A[D];});
  5. }
  6. function getPurchaseFailureTemplate(){
  7.    var purchaseFailureTemplate = '
  8. <div class="pl-pannel-wrap"><a class="pl-close" onmousedown="YAHOO.functions.hiddenPurchasePannel(\'PL_{0}\')" href="javascript:void(0)" target="_self"></a>'
  9.       + '
  10. <h3>您的进货单已经货品数已达上限</h3>
  11. 共<strong>{2}</strong>种货品 合计:<strong>{1}</strong>元
  12.  
  13. <a class="view-pl" onmousedown="YAHOO.functions.hiddenPurchasePannel(\'PL_{3}\')" href="'+YAHOO.IApi.config.viewPurchaseListURL+'" target="_blank">查看进货单</a></div>
  14. ';
  15.    return purchaseFailureTemplate;
  16.   }
  17. function doRenderPurchaseFailureTemplate(offerid,total,quantity){
  18.  var s = doFormat(getPurchaseFailureTemplate(),offerid,total,quantity,offerid);
  19.  return s;
  20. }

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

建议继续学习:

  1. [Perl] Template::Toolkit 模板技术.    (阅读:5369)
  2. 前端模板引擎    (阅读:3779)
  3. perl的HTML::Template模板技术    (阅读:2735)
  4. 将小型、现代的产品主页由psd转换成XHTML/CSS模板    (阅读:2615)
  5. 10 款可打印的免费线框网页模板    (阅读:2114)
  6. 公用样式模板的设计制作    (阅读:1526)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1