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, {
  2.     methodA : ...,
  3.     methodB : ...,
  4.     methodC :....
  5. });

 

如果methodA是在parent中定義的,那麼methodA就是public的,如果methodB在parent中沒有定義,這裏只是爲了輔助實現methodA的邏輯而定義的方法,顯然就是private的。(注意:此時從外面也可以調用methodB,但是沒有任何意義,而且可能會出錯。這可能纔是那位講師的本意。)

發佈了112 篇原創文章 · 獲贊 10 · 訪問量 52萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章