ExtJS 设计模式之一(单例模式)

<!-- start node.tpl.php -->

Posted 周日, 03/22/2009 - 23:50 by admin

Extjs 发展至今，传承了YUI的伟大精髓， YUI得到了Douglas Crockford（任职于 Yahoo! 的一名 JavaScript 传道者和架构师，他是全球最有造诣的 JavaScript 语言专家之一，Blog：http://www.crockford.com/) 大师的赞同,而ExtJS也是将YUI的模式脚本编程学习使用的淋漓尽致，并且还给它做了几套华丽的CSS嫁衣…., 而在ExtJS越发耀眼的同时，我等初学者在使用ExtJs的时候也是晕呼其呼。（好在2.0 推出之后，官方的文档，像雨后春笋一样，开始覆盖到方方面面。）

其实，拨开ExtJS华丽的外衣，翻阅其体内精致的代码，不难发现一些我们耳熟能详的设计模式。

在早期1.0，1.1的好多例子中，我们会看到这样风格的代码。

view source

print?

01.var Oo= function(){

02.  var x;

03.  var y;

04.  return{

05.  a:function(){

06.  ...

07.  },

08.  b:function(){

09.  ...

10.  }

11.  }

12.}();

 

咂一看，不是我们能理解的方式， function(){}(), 是何意？。
//()在这里，意味着方法已经执行，并且return里面的已经产生， 这样可能很难理解，那等同与执行 function oo(){}，这样是否好理解些了？
BTW :这里要引入JavaScript的一个高级概念，“闭包”。(具体内容参考《JavaScript The Definitve Guid,5th Eddion》Section 8.8 –Function Scope and Closures ,也是被Douglas Crockford推荐的为数不多的两本书籍之一。), 当然不急着去翻，先把我的废话看完。

好了，看这种使用别扭的使用方式， 而这种方式，在我们的页面，或者其他类中， 调用Oo的a方法的时候，形式如下

 

view source

print?

1.Ext.onReady(Oo.a);

 

对，正是这样的一种JS编程方式，被Douglas Crockford作为JS的一种单例的实现， 大师还把它叫做“Module Pattern”,

好，如果我们不用所谓单例呢？， 就看看传统的对象方式，同学们肯定在Pototype盛行的时代，已经弄的一清二楚。

 

view source

print?

01.0o = function(){

02.  this.x;

03.  this.y;

04.}

05.Oo.prototype = {

06.  a:function(){

07.  this.x = 100;

08.  },

09.  b:function(){

10.  this.y = 200;

11.  }

12.}

13.//调用方式

14.Ext.onReady(function(){

15.  var o = new Oo();

16.  0.a();

17.});

 

再来，假使是个初学者，不知道对象继承，怎么办。更土的写法，人人都会。

 

view source

print?

1.var x,y

2.function a(){

3.  x=100;

4.}

5.function b(){

6.  y=200;

7.}

 

调用方式。
不用说了，只要a(),就会把x设置， 全世界的开发者都公认 ，全局变量是邪恶的，，而且随着你调用的不注意，将会越来越臃肿，导致Memory Lacks 内存泄露。

以上几个简单的举例可以看出， 类 比Java 一样， Oo.a直接调用，好比一个静态类，直接访问。 而prototype需要创建对象后访问其成员。
第一种方式，在任何地方都不需要创建（只创建一次），
而第二种方式，需要在每次调用的时候，创建对象。
第三种老土的代码，希望大家尽量少写，这不是程序员风格的体现。

对于发展到今天，如此庞大的ExtJS2.0，自然也要考虑道自己的运行和调用不要让new 变得太臃肿，在ExtJS中我们发现， 在会被各个组件大量频繁调用到的一些工具类中，单例运用较为频繁。

Ext 源码中，设计使用单利的代码片段。

 

view source

print?

01.//source/core/DomHelper.js

02.Ext.DomHelper= function() {

03.  //private attributes

04.  ..

05.  return{

06.  

07.}

08.}();

09.  

10.//source/core/DomQuery.js

11.Ext.DomQuery =fucntion(){

12.  

13.}();

 

后记： 由于JavaScript，具有prototype,call,apply来实现继承,面向对象来开发，又有闭包等特性来进行函数编程。有函数编程和面向对象的双重性质， 使得JavaScript格外的灵活，难以驽驾， 开发者选择多种风格来进行编码，在一个整体项目会容易会走向凌乱和灭亡。 这就更需要我们从大师的经验总结，以及ExtJS这种优秀的设计中，去体味学习，站在巨人的肩膀上前进…..

另外值得一提出的，ExtJs必须要求你的页面为XHTML，当你在别的浏览器下跑的非常顺畅，而唯独IE下有那么点瑕疵（不是脚本报错的），你应当检查下你是否把你的页面定义成XHTML。

作者:Totodo