長島冰茶的工程師筆記

最近開始在研究 JavaScript 的物件導向寫法，發現 JavaScript 實在是太彈性了
很多用法很難以理解，不過卻很好用，看來不做點筆記，會完全記不起來，以下會寫好幾篇來記錄目前研究的心得
--

物件導向寫法的筆記 (一) 直接宣告物件
以下寫法適用於只會建立一次的物件，所以不需要用 new 去產生實體，因為只有一個實體

<script src='jquery.js'></script>
<script>
// 以下範例為組合目前的網址
var content = 
{
    // 宣告變數及預設值
    link  : '',  // 連結
    page  : 1,   // 分頁
    order : '',  // 排序

    // 初始化
    init : function(param)
    {
        if (param.link) this.link = param.link;
        if (param.page) this.page = param.page;        
        if (param.order) this.order = param.order;   

        // 綁定按鈕做換頁的動作
        // 注意第二個參數，我把 this 傳進去
        // 不然因為事件觸發的關係， redirect 的 this 會指向 #fmBtn
        $('#fmBtn').bind('click', this, this.redirect)
    },

    // 取得連結
    getLink : function() 
    {
        return this.link + '?page=' + this.page + '&order=' + this.order
    },

    // 物件處理，注意物件觸發時 this 會指向觸發事件的元素，所以要另外取得物件的值
    // 導向網址
    redirect : function(event)
    {
        // 取得自己
        var _self = (event.data) ? event.data : this;

        // 換頁
        window.location.href = _self.getLink();
    }
};

$(function()
{
    // 初始化物件
    content.init(
    {
        link  : 'http://localhost/',
        page  : 2,
        order : 'account'
    });

    // 呼叫物件的方法
    // 結果為： http://localhost/?page=2&order=account
    console.log(content.getLink());
});
</script>
<!-- 
    這裡會去呼叫 content.redirect 去換頁
    請注意呼叫後 content.redirect 裡的 this 會指向 #fmBtn
 -->
<input id=fmBtn type='button' value='按我換頁'>