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

本文链接：https://blog.youkuaiyun.com/smilingleo/article/details/3704776

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

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

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

3、组件js文件

4、组件对应的css文件

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

 
 Ext.namespace('ux');
ux.app = function(){
 //private properties 
 //private methods 
 //public area 
 return {
  someProperty : 'propValues',
  init : function(){
   ......
  }
 }
}();
 

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

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

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

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

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

 
 Ext.namespace('ux');
ux.app = {
 someProperty : 'propValues',
 init : function(){
  ......
 }
};
 

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

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

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

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

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

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

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

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

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

 
 Ext.extend(child, parent, {
    methodA : ...,
    methodB : ...,
    methodC :....
});
 

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