一般編寫一個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,但是沒有任何意義,而且可能會出錯。這可能纔是那位講師的本意。)