再议构建前端UI组件的新思路

星期三, 6月 2nd, 2010

近日，看了玉伯写的《构建前端UI组件的新思路》一文，让我追忆起去年自己分享的一篇P文《随感协同开发的JS设计模式》，有几分共鸣……

话说去年支付宝新版收银台项目中，我就小试了一把这种组件编码模式，点滴心得，这里和大家做一个交流：

回顾一下之前说到的抽象类，对设计模式有所了解的同学可能会觉得有些眼熟，没错，初一看，觉得它很像一个抽象工厂，但是结合下面的基础类来看，你会发觉我并没有在各基础类中，重写getVessel,show,hide等方法，而是直接继承了抽象类中的这些方法。一定会有人不解为什么要这么做，无他，就因为他是JS,而非JAVA。一定的偶合度换来足够的灵活在我看来一点都不过分，更何况这个抽象类是必须确保绝对稳定的，他在成形后不允许被随意修改那是必须的。

  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.   setInterface:function(){
  24.     //设置各组件共用接口 
  25.   }
  26. })

查看全文 »

Tags：, , | 评论[9] | 共有1,053次浏览

随感协作开发的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,675次浏览

小议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,071次浏览

浅谈javascript面向对象编程

星期五, 2月 27th, 2009

这周心血来潮，翻看了现在比较流行的几个JS脚本框架的底层代码，虽然是走马观花，但也受益良多，感叹先人们的伟大……

感叹是为了缓解严肃的气氛并引出今天要讲的话题，”javascript面向对象编程”，接下来，我们围绕面向对象的几大关键字：封装，继承，多态，展开。

封装：javascript中创建对象的模式中，个人认为通过闭包才算的上是真正意义上的封装，所以首先我们先来简单介绍一下闭包，看下面这个例子：

  1. <script type="text/javascript">
  2.   function myInfo(){
  3.     var name ="老鱼",age =27;
  4.     var myInfo = "my name is" + name + "i am" + age +"years old";
  5.     function showInfo(){
  6.       alert(myInfo);
  7.     }
  8.     return showInfo;
  9.   }
  10.   var oldFish = myInfo();
  11.   oldFish();
  12. </script>

是不是很眼熟呢？没错了，这其实就是一个简单的闭包应用了。简单解释一下：上面的函数myInfo中定义的变量，在它的内嵌函数showInfo中是可访问的（这个很好理解），但是当我们把这个内嵌函数的返回引用赋值给一个变量oldFish，这个时候函数showInfo是在myInfo函数体外被调用，但是同样可以访问到定义在函数体内的变量。oh yeah!

查看全文 »

Tags：, , , , | 评论[21] | 共有2,639次浏览