namespace
有效解決了js缺少命名空間，容易產(chǎn)生變量沖突的問題，這一點在portal開發(fā)上特別有用，因為portal頁面是由多個portlet組成的，每個portlet都可以寫自己的js,每個portlet又可能由不同的人開發(fā)
,這很容易造成js變量的命名沖突，有了Ext.namespace方法，就可以在一定程度上避免這樣的命名沖突，當然在開發(fā)規(guī)范里要寫清楚js命名空間的命名規(guī)則。
來自:http://ivanl.javaeye.com/blog/125886
http://programming.javaeye.com/blog/167808
EXT程序規(guī)劃入門
事前準備
本教程假設(shè)你已經(jīng)安裝好ExtJS庫。安裝的目錄是extjs 并位于你程序的上一級目錄。如果安裝在其它地方你必須更改路徑，更改示例文件中script標簽的src的屬性。
需要些什么？
除ExtJS庫本身外，我們還需要兩個文件：
• applayout.html
• applayout.js
先看看一份html文檔，比較精簡。并附有詳細說明：
applayout.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="applayout.js"></script>
<!-- 本地化的腳本引用在這里 -->
<script type="text/javascript">
Ext.onReady(myNameSpace.app.init, myNameSpace.app);
</script>
<title>Application Layout Tutorial</title>
</head>
<body>
</body>
</html>
開頭的兩行聲明了文檔的類型。程序可以不用doctype,但是這樣的話瀏覽器可能默認其為Quirks怪僻類型，會導致處理跨瀏覽器這一問題上出現(xiàn)差異。
我們采用HTML 4.01 Transitional的文檔類型，該類型在主流瀏覽器上支持得不錯。當然，你也可以根據(jù)你的需求采用其它類型的doctype，但是記住別忘了要加上doctype。
接著指定HTML頭部的Content-Type。做這些事情其實很瑣碎，但總是有益處。
然后引入EXT的樣式，適配器和EXTJS本身。有兩種版本的ExtJS：
• ext-all.js - 不能直接閱讀，加載時更快，用于產(chǎn)品發(fā)布
• ext-all-debug.js - 便于閱讀，開發(fā)階段使用,
開發(fā)階段的時候便需要引入debug的版本。
applayout.js這個文件就是我們的程序，緊跟著的是本地化的腳本，這里可以換成Extjs翻譯好的版本
跟著我們開始分配事件句柄(event handler)，使得在文檔全部加載完畢后，程序就可以初始化（運行）。
下面的這一行：
Ext.onReady(myNameSpace.app.init, myNameSpace.app);
可這樣說：當文檔全部加載完畢,就運行myNameSpace.app的init方法,規(guī)定的作用域是myNameSpace.app。
然后是標題，頭部的結(jié)尾，body（當前空）和結(jié)束標簽。
文檔的解說就說到這兒了。
applayout.js
/**
* Application Layout
* by Jozef Sakalos, aka Saki
* http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_(Chinese)
*/
// 填充圖片的本地引用
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
// 創(chuàng)建命名空間
Ext.namespace('myNameSpace');
// 創(chuàng)建應用程序
myNameSpace.app = function() {
// 元素還沒創(chuàng)建,未能訪問
// 私有變量
// 私有函數(shù)
// 公共空間
return {
// 公共的屬性,如,要轉(zhuǎn)換的字符串
// 公共方法
init: function() {
alert('應用程序初始化成功。');
}
};
}(); // 程序底部
// 文件底部
文件最開始的幾行是注釋，說明該文件的主要內(nèi)容，作者，作者相關(guān)的資訊。沒有任何注釋的程序也可以正常的運行，－但請記住：每次寫的程序要容易給
人看得懂的 Always write your application as if you would write it for
another.當你回頭看你幾個月前寫的代碼，發(fā)現(xiàn)你根本不記得自己寫過什么的時候，就會明白這個道理，并養(yǎng)成編碼的好習慣。接著是要指向你服務(wù)器的填
充圖片，如不指定則默認extjs.com。每次運行程序的時候都訪問extjs.com，不推薦這樣，應該先修改這個常量值指向到本地。
現(xiàn)在自定義命名空間。將所有變量和方法都劃分到一個全局對象下管理，這樣的好處是避免了變量名沖突和由不同函數(shù)干擾了全局變量的值。名字（namespace）可按自己的方案選擇。
整段代碼的重點是，我們創(chuàng)建了 myNameSpace對象的屬性app，其值是一個函數(shù)立刻運行之后的返回值。
如果運行我們的代碼：
var o = function() {
return {p1:11, p2:22};
}();
實際上我們創(chuàng)建了一個匿名函數(shù)（沒有名字的函數(shù)），經(jīng)過解釋（預編譯？）之后讓它立刻運行（注意函數(shù)后面的()）。最后將函數(shù)返回的對象（注意此時是一個object變量）分配到變量o。我們的程序便是這種思路去寫的。
你可以把私有變量和私有函數(shù)直接定義在function和return這兩個聲明之間，但是請切記：此時不能訪問任何html頁面中的元素，那會導致錯誤，因為這段代碼在加載時頁面的head中就運行了，而這時候html頁面中的其它元素還沒有被加載進來。
另外一方面，函數(shù)init,是由匿名函數(shù)返回的對象的一個方法而已。它會在文檔全部加載后才運行。換言之整個DOM樹已經(jīng)是可用的了。
一切都還好吧～如果能正確運行http://yourserver.com/applayout/applayout.html，不出現(xiàn)什么錯誤的話將出現(xiàn)一個警告。
接下來是利用這個空白的模板，討論本文的重點。
公開Public、私有Private、特權(quán)的Privileged？
讓我們加入一些有趣內(nèi)容到程序中去吧。在頁面applayout.html的body標簽中加入：
<div id="btn1-ct"></div>
空白的div會當作按鈕的容器來使用。然后在applayout.js加入下來代碼：
/**
* Application Layout
* by Jozef Sakalos, aka Saki
* http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_(Chinese)
*/
// 填充圖片的本地引用
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
// 創(chuàng)建命名空間
Ext.namespace('myNameSpace');
// 創(chuàng)建應用程序
myNameSpace.app = function() {
// 元素還沒創(chuàng)建,未能訪問
// 私有變量
var btn1;
var privVar1 = 11;
// 私有函數(shù)
var btn1Handler = function(button, event) {
alert('privVar1=' + privVar1);
alert('this.btn1Text=' + this.btn1Text);
};
// 公共空間
return {
// 公共的屬性,如,要轉(zhuǎn)譯的字符串
btn1Text: 'Button 1'
// 公共方法
, init: function() {
btn1 = new Ext.Button('btn1-ct', {
text: this.btn1Text
, handler: btn1Handler
});
}
};
}(); //程序底部
// 文件底部
變量btn1 和privVar1 是私有的。 那意味著在程序外部他們是不能夠被訪問的，而且也不可見。私有函數(shù)btn1Handler也是同樣道理。
另外一個方面，btn1Text是公共變量所以可以被程序外部訪問或者是修改（我們稍后將會演示）。
函數(shù)init是特權(quán)的，即是私有變量和公共變量兩者都可以被它訪問到。在本例中，公共變量this.btn1Text和私有函數(shù)btn1Handler都能夠被特權(quán)函數(shù)init所訪問。同時，相對外界來說，它也屬于公共成員的一種。
Ok,運行看看。能看到左上角的按鈕嗎？很好，點擊它。得到一個privVar1=11的警告。這說明私有函數(shù)能訪問私有變量。
但是在第二個警告中遇到了this.btn1Text=undefined的問題，這好像不應該這樣。個中原因是因為位于事件句柄(event
handler)中的變量this沒有正確指向到我們的程序。你需要用scope:this
指明這個作用域（這里的this關(guān)鍵字所指示的scope應該是btn1變量）：
btn1 = new Ext.Button('btn1-ct', {
text: this.btn1Text
, handler: btn1Handler
, scope: this
});
刷新一下，可以了吧？
重寫公共變量
在applayout.js底部加入下列代碼：
Ext.apply(myNameSpace.app, {
btn1Text:'Taste 1'
});
// 文件底部
這代碼是用來干什么的呢？首先它創(chuàng)建了我們的程序?qū)ο笕缓蟾淖儯ㄖ貙懀┕沧兞縝tn1Text的值。運行后將看到按鈕上文字的變化。
把文本都放到公共變量，以便于以后的國際化翻譯工作，而不需要修改程序的內(nèi)部代碼。
當然你也可以將其它的值例如尺寸、樣式、等等的總之是可自定義的選項都放到公共變量中。免于在數(shù)千行代碼之中為查找某個顏色而費勁。
重寫（Overriding）公共函數(shù)
接著更改一下代碼，讓它讀起來是這樣的：
Ext.apply(myNameSpace.app, {
btn1Text:'Taste 1'
, init: function() {
try {
btn1 = new Ext.Button('btn1-ct', {
text: this.btn1Text
, handler: btn1Handler
, scope: this
});
}
catch(e) {
alert('錯誤: "' + e.message + '" 發(fā)生在行： ' + e.lineNumber);
}
}
});
// end of file
我們這里將init重寫了一篇，主要是在原來代碼的基礎(chǔ)上加入異常控制，以便能夠捕獲異常。試運行一下看還有沒有其它的變化？
嗯 是的，出現(xiàn)了btn1Handler
未定義的錯誤。這是因為新的函數(shù)雖然嘗試訪問私有變量但它實際是不允許的。正如所見，原init是特權(quán)函數(shù)可訪問私有空間，但新的init卻不能。之所以
不能訪問私有空間，是因為：禁止外部代碼No code from outside，哪怕是嘗試重寫特權(quán)方法。