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