ExtJS学习笔记（一）：ExtJS程序的结构及如何定义js的private, public属性、方法

一般编写一个ExtJS程序需要包含下面四个类型的文件：

1、html文件，引入样式表，js文件，并标明html元素；

2、html同名js文件，用来创建组件，并动态替换DOM中的元素；

3、组件js文件

4、组件对应的css文件

 

对于html同名的js, Ext推荐的写法是这样的：

1. Ext.namespace('ux');
2. ux.app = function(){
3.  //private properties
4.  //private methods
5.  //public area
6.  return {
7.   someProperty : 'propValues',
8.   init : function(){
9.    ......
10.   }
11.  }
12. }();

在html文件中会执行下面代码。

1. Ext.onReady(ux.app.init, ux.app)

上面的写法，初看上去是比较怪异的，不过认真分析一下，还是可以看出一些门道。

 

从 ux.app = function(){...} 可以看出，这时app是一个函数，但是，注意在最后还加了一个"()"，一个函数名加上"()"的含义不就是执行这个函数吗？因此，上面的ux.app的值就是定义函数的返回值，根据定义，是一个匿名对象。

而在函数定义中看到了return {....}，因此，ux.app实际的值就是那个返回的对象。故而我们可以用另外一种方法来定义，达到相同的效果。

1. Ext.namespace('ux');
2. ux.app = {
3.  someProperty : 'propValues',
4.  init : function(){
5.   ......
6.  }
7. };

应该后者更容易理解一些，但是为什么ExtJS还推荐用上面的写法呢？

 

个人觉得是因为第一种方法提供了私有属性、私有方法的定义方式。

 

在第一种方式中，注释部分定义的属性、方法，可以被return回的对象所引用，但是ux.app之外却不能再引用这些属性和方法，因此就相当于私有的，而后者就没有这个特性。

 

记得在看一个dojochina上关于Ext的一个视频时，主讲也提到了javascript中private, public的区分问题，按照他的观点是：区分完全取决于程序员的自觉，因为两者实质上是一样的。

 

当时就觉得怪怪的，不可能这么弱智，估计就是在这个问题上没有弄清楚。（也可能是我没有搞清楚，欢迎拍砖）

 

-------------------------

后来发现一篇文章，介绍的比较清楚：

http://www.dustindiaz.com/javascript-private-public-privileged/

 

除了上面说的关于private, public的区分之外，确实还有一种标明private的方式，那就是在实现继承时:

 

1. Ext.extend(child, parent, {
3.     methodA : ...,
5.     methodB : ...,
7.     methodC :....
9. });

 

如果methodA是在parent中定义的，那么methodA就是public的，如果methodB在parent中没有定义，这里只是为了辅助实现methodA的逻辑而定义的方法，显然就是private的。（注意：此时从外面也可以调用methodB，但是没有任何意义，而且可能会出错。这可能才是那位讲师的本意。）