<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    Java學(xué)習(xí)

    java,spring,structs,hibernate,jsf,ireport,jfreechart,jasperreport,tomcat,jboss -----本博客已經(jīng)搬家了,新的地址是 http://www.javaly.cn 如果有對(duì)文章有任何疑問(wèn)或者有任何不懂的地方,歡迎到www.javaly.cn (Java樂(lè)園)指出,我會(huì)盡力幫助解決。一起進(jìn)步

     

    ext namespace

    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)頭的兩行聲明了文檔的類型。程序可以不用doctype,但是這樣的話瀏覽器可能默認(rèn)其為Quirks怪僻類型,會(huì)導(dǎo)致處理跨瀏覽器這一問(wèn)題上出現(xiàn)差異。

    我們采用HTML 4.01 Transitional的文檔類型,該類型在主流瀏覽器上支持得不錯(cuò)。當(dāng)然,你也可以根據(jù)你的需求采用其它類型的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)始的幾行是注釋,說(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ò)解釋(預(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)方法。

    posted on 2009-07-09 08:57 找個(gè)美女做老婆 閱讀(2693) 評(píng)論(0)  編輯  收藏


    只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


    網(wǎng)站導(dǎo)航:
     

    導(dǎo)航

    統(tǒng)計(jì)

    公告

    本blog已經(jīng)搬到新家了, 新家:www.javaly.cn
     http://www.javaly.cn

    常用鏈接

    留言簿(6)

    隨筆檔案

    文章檔案

    搜索

    最新評(píng)論

    閱讀排行榜

    評(píng)論排行榜

    主站蜘蛛池模板: 亚洲天堂免费在线| 亚洲精品伦理熟女国产一区二区 | 亚洲最大AV网站在线观看| 久久成人18免费网站| 亚洲最大黄色网站| 又爽又黄无遮挡高清免费视频| 国产精品免费视频观看拍拍| 亚洲精品国产专区91在线| 国产精品久久香蕉免费播放| 九九综合VA免费看| 亚洲神级电影国语版| 亚洲欧洲久久久精品| 5g影院5g天天爽永久免费影院| 鲁死你资源站亚洲av| 亚洲精品成人av在线| 国产精品国产免费无码专区不卡| 99在线视频免费观看| 亚洲一级毛片在线观| 亚洲真人无码永久在线| 波多野结衣免费在线| 国产精品视频全国免费观看| 亚洲精品综合在线影院| 亚洲av无码不卡一区二区三区| 蜜桃精品免费久久久久影院 | 国产一级淫片免费播放| 2020因为爱你带字幕免费观看全集 | 黄网站在线播放视频免费观看| 久久av无码专区亚洲av桃花岛| 免费国产a国产片高清| 精品女同一区二区三区免费站| a一级毛片免费高清在线| 亚洲人成777在线播放| 亚洲欧洲一区二区| 亚洲中文无韩国r级电影| 成人男女网18免费视频| 亚洲毛片在线免费观看| a级毛片毛片免费观看久潮| 色吊丝免费观看网站| 亚洲精品无码国产片| 亚洲国产av一区二区三区丶| 亚洲狠狠久久综合一区77777|