幾乎所有會寫網頁的人都能夠寫上幾行的javascript,讓按鈕或鏈接按下去之後做點小動作成了網頁設計的基本功。漠哥由於在專案角色上的關係,通常要寫一些公用程式讓大家來使用,而由於物件導向程式寫法的優點,在寫javascript程式時也儘量的使用物件導向方法。由於以往javascript使用物件方法撰寫程式的人並不多,能夠參考的文件非常有限。我也就局限在寫個類別,加點屬性和方法,但是寫出來的程式已經讓很多人看不懂。

最近jQuery突然爆紅,除了它能夠讓我們更容易的撰寫功能更加強大的javascript以外,它更揭示出javascript使用物件導向方法撰寫程式的各種方法,深入研究jQuery的程式寫法或許是提升自身程式設計功力的另一個重要途徑。

要研究jQuery當然首先要下載jQuery函式庫,可以在jQuery官方網站找到最新的版本。不過另外還有更炫的UI函式庫可以使用,請參考以下網址:

由於javascript都是開放原始碼的,在下載了原始碼之後就跟一般使用外部javascript檔案一樣,加入如下的程式碼就可以使用jQuery所帶來的好處。

<head>
    <title></title>
    <script src="jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
</head>

研究jQuery原始碼當然很好,但是它太複雜了,而jQuery UI裏面有個資料夾將個別的物件分開成不同的檔案,相對而言簡單了許多,也比較符合一般開發人員的需求。

首先介紹最基本的javascript物件導向寫法,寫物件導向一開始就是要建立一個類(class),javascript寫起來已經非常詭異,因為它不像別的語言有個class識別字,而是直接使用function來宣告一個類,而它的屬性則是使用this帶頭所宣告的變數,以Datepicker物件為例。

function Datepicker() {
    this.debug = false;
this.ShowYMD = function(objTextID) {....code....}
}

上面這個例子中,它宣告了一個叫Datepicker的類,包含了一個屬性,javascript物件裏屬性的範圍并不像其他語言一樣,它是沒有範圍的,也就是一律是公開屬性或方法。在javascript裏面要增加一個新的方法其實非常簡單,學過物件導向的人都知道,方法只是函數或程序的特例,普通的寫法就跟屬性類似,只是它是個function()。 漠哥以前的javascript的知識就只有到此為止,因為只用到這邊就已經可以做到相當多的功能了,而其他的知識在我學習javascript的時候並沒有很多文件在探討這方面的議題,而且說實在的這樣寫出來的程式就已經很多人看沒有了。

this._defaults = {
    showOn: 'focus',
    showAnim: 'fadeIn', // Name of jQuery animation for popup

上面是一種屬性的特別寫法,就像是C#裏面的結構(structure)或者是子類,可以使用this._defaults.showOn來存取它的內容,這樣的寫法比較簡潔,當然你也可以宣告另外一個類來處理,不過既然有好的方法,當然越簡潔越好了。

this.regional = []; // Available regional settings, indexed by language code
this.regional[''] = { // Default regional settings
    closeText: 'Done', // Display text for close link
    prevText: 'Prev', // Display text for previous month link
    nextText: 'Next', // Display text for next month link
    currentText: 'Today', // Display text for current month link
    monthNames: ['January','February','March','April','May','June',
        'July','August','September','October','November','December'], // Names of months for drop-down and formatting
    monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting
    dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], // For formatting
    dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], // For formatting
    dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'], // Column headings for days starting at Sunday
    weekHeader: 'Wk', // Column header for week of the year
    dateFormat: 'mm/dd/yy', // See format options on parseDate
    firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
    isRTL: false, // True if right-to-left language, false if left-to-right
    showMonthAfterYear: false, // True if the year select precedes month, false for month then year
    yearSuffix: '' // Additional text to append to the year in the month headers
};

上面這個例子是個特別的寫法,它先用this.regional = []的方式宣告regional是一個陣列,用來處理不同國別的日期控件文字,再用this.regional['']的方式宣告一個預設設定,內容值則使用上一個例子的方法做成結構,如果要增加額外的國別只要引入jquery.ui.datepicker-zh-TW.js程式(內容如下)就可以新增加不同的國別,如果透過國別辨識的方法,還可以讓程式自動改成不同的文字。

至於這個程式的怪寫法,又是另一個值得探討的問題。簡單說就是和$(document).ready()一樣只是寫法不同,真的讓人生氣呢,寫法搞這麼多種,不過好像也只有這樣才能使用到$物件吧。也就是說這段程式是在頁面準備好了以後才執行的,而這種公用程式引入的次序應該儘量的早,最好在jQuery引入之後立刻接著引入,這樣就能確保這段程式碼執行時間會很早。

jQuery(function($){
    $.datepicker.regional['zh-TW'] = {
        closeText: '關閉',
        prevText: '&#x3c;上月',
        nextText: '下月&#x3e;',
        currentText: '今天',
        monthNames: ['一月','二月','三月','四月','五月','六月',
        '七月','八月','九月','十月','十一月','十二月'],
        monthNamesShort: ['一','二','三','四','五','六',
        '七','八','九','十','十一','十二'],
        dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
        dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
        dayNamesMin: ['日','一','二','三','四','五','六'],
        weekHeader: '周',
        dateFormat: 'yy/mm/dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年'};
    $.datepicker.setDefaults($.datepicker.regional['zh-TW']);
});

雖然這樣就能宣告出一個類,但是還有一個很重要的知識必須要知道,就是prototype這個很特殊的屬性(或稱為自動附加的子類更合適),在用javascript的prototype來玩繼承這篇文章裏面有詳細的介紹,在此不多贅述。一個重點,在prototype裏面所增加的方法會在第一次被呼叫的時候才建立,因此方法最好都能建立在prototype上面,這樣可以加快物件被建立時的速度。

先寫到這裡有新的心得再繼續。。。。。。。

創作者介紹

人生四十宅開始 二號宅

漠哥 發表在 痞客邦 留言(0) 人氣()