随感协作开发的JS设计模式

星期五, 1月 1st, 2010

从最原始需求出发，我们必须有一个最简单的实现类，这个类必须是可继承的。方便之后不同的业务需要做不同的扩展。我们必须确保这个类的稳定性。

简单实现类的定义：鼠标点击触发某容器，不带任何辅助效果。我们来想想，这么简单的一个类，需要包含哪些方法，搭个骨架出来：

  1. AP.widget.basic = new AP.Class({
  2.   setOptions:function(options){
  3.     //接口设置
  4.   },
  5.   initialize:function(targets,options){
  6.     //初始化方法，目的是建立targets子集元素和某方法的关联 
  7.   },
  8.   getVessel:function(target){
  9.     //获取满足target映射关系的容器 
  10.   },
  11.   bindEvents:function(target,vessel){
  12.     //这里绑定target的触发动作
  13.   },
  14.   action:function(){
  15.     //target绑定的事件触发的执行函数，包含你要执行的逻辑 
  16.   },
  17.   show:function(){
  18.     //显示容器 
  19.   },
  20.   hide:function(){
  21.     //隐藏容器 
  22.   },
  23. })

这是所有满足本文定义的简单实现类所需的基本方法，我们可以将它作为一个基础方法，方便满足简单类定义的交互形式在此基础上扩展，然后我们开始归纳常用的满足简单类定义的交互形式，如：tab切换，气泡提醒，下拉列表，xbox……

查看全文 »

Tags：, , | 评论[10] | 共有1,663次浏览

小议javascript设计模式

星期四, 10月 8th, 2009

最近重新温习了一次《javascript设计模式》，确实是一本好书，每次看都有不同的领悟，每次领悟到的都受益匪浅，无怪古圣人都说学无止镜了，仅以“加油，好吗？”共勉！

记得早前就说过要和大家分享“javascript设计模式”,迟迟没写不是因为我懒，最近确实太忙，忙工作，忙旅游（啊哦？），好不容易这几天空闲了，接下来是兑现之前空口白话的时间了。

在讨论设计模式之前，请确认您已经有一定的脚本编程基础，如果不甚了解，建议可以先查阅本人很久之前写的这篇《浅谈javascript面向对象编程》。

讲到设计模式，不得不先重点着墨于“接口设计”，因为接口设计在设计模式中的意义太大了，大于模式本身。直观起见，先介绍一下接口定义的形式：

  1. var interface = new Interface("interface",[["getName",1],["getAge",1]]);

可以看出接口函数必须包含两个参数，接口方法定义在一个二维数组中。上例中定义了两个接口方法：getName,getAge,这两个方法都带一个参数，下面我们详细看一下Interface函数的实现代码，从而加深大家对接口的理解。

  1. function Interface(name,methods){
  2.     if(arguments.length !=2){
  3.       console.log("参数必须为二个");
  4.     }
  5.     this.name = name;
  6.     this.methods = [];
  7.     if(methods.length<1){
  8.      console.log("第二个参数不能为空数组");
  9.     }
  10.     for(var i=0;len=methods.length,i<len;i++){
  11.       if(typeof methods[i][0] !== 'string'){
  12.           console.log("第一个参数数据类型必须为字符串");
  13.       }
  14.       if(methods[i][1] && typeof methods[i][1] !== 'number'){
  15.          console.log("第二个参数数据类型必须为整数型");
  16.       }
  17.       if(methods[i].length == 1){
  18.           methods[i][1] = 0;
  19.       }
  20.       this.methods.push(methods[i]);
  21.     }
  22.   }

查看全文 »

Tags：, , , , | 评论[11] | 共有2,057次浏览