PageMethod的小技巧讓自己的程式碼更乾淨

2011-01-08

6311
0
jQuery

1. 用變數裝PageMethod的名字

用AJAX當主軸開發網頁

頁面難免不只有一隻PageMethod再跑

這個時候在每一次呼叫的時候都要再重新打一次 url: {PageName}.aspx/{MethodName}

我個人覺得要一直重複打PageName超煩的

而且萬一打錯還要浪費時間去改

所以我個人都習慣在global.js (每一頁都會呼叫到的js)
var getPageName= function () {
        return location.pathname.substring(location.pathname.lastIndexOf('/') + 1) + '/';
};

var pageName = getPageName();

//$.ajax( url: pageName + '{MethodName}' ...
簡單來說就是抓現在的網址, 後面給他補上一個/這樣而已

這樣頁面之後要用到pathName的地方就不用每一頁重打一次頁面名稱

而且在Copy Paste的時候也很方便 - -b

===========================================================================================

2. 給定ajax預設值

有的時候看著每一次呼叫PageMethod的ajax, 都要重複打type: 'POST', contentType: 'application/json; charset=utf-8',

我個人是覺得超煩的啦

所以一樣在global.js加上
$(document).ready(function() {
	$.ajaxSetup({
		type: 'POST',
		contentType: 'application/json; charset=utf-8',
		data: '{}',
		dataType: 'json'
	});
});
這是jQuery提供的ajax預設值選項, 這樣就不用每次都重複指定一樣的東西

配合上面的取得pageName, 所以我們在頁面上呼叫PageMethod的時候可以用
$.ajax({
	url: pageName + 'Method', data: $.toJSON({ obj }), //data可以選填, 
	success: function (data) {
	}
});
變得清爽多了吧

===========================================================================================

3. 讓自己偵錯AJAX更容易

其實jQuery的ajax有提供一個屬性是error,

當ajax發生錯誤的時候會呼叫該error method, 裡面會丟入一些錯誤的訊息讓我們排除

因此我們一樣可以在global.js加上
$(document).ready(function() {
	$.ajaxSetup({
		error: (XMLHttpRequest, textStatus, errorThrown) {
			alert(XMLHttpRequest.responseText);
		}
	});
});
這樣開發階段當錯誤發生的時候我們可以比較容易的debug找出問題出在哪

而當想要看其他資訊, 只要去修改該函數就可以

上線後就把那段mark起來, 這樣使用者也不會看到他不該看到的東西

而發現我們程式出錯了

從頭到尾修改一個地方就搞定

===========================================================================================

4. 不要讓使用者莫名其妙的submit表單

其實這是在用AutoPostBack時代比較容易發生的事情, 輸入完某個Textbox莫名其妙很順手的點enter

接著就PostBack了超開心

要避免這種情形一樣可以加入
$(':text,:password').keypress(function () {
        return !(event && event.keyCode == 13);
});
直接把enter卡死, 什麼事情都不會發生

當然要寫得更User Friendly可以寫成點enter之後自動focus下一個input

不過我通常直接卡死, 省事又方便(挖鼻孔)

===========================================================================================

5. 自動幫自己的Input加上title

一般來說後台我的html習慣會長這樣 <div><h5>姓名 : </h5><input type='text' id='txtName' /> </div>

有的時候我會希望在input裡面有一個title屬性標示說這個input代表的意思是姓名

可是我又很懶得一個一個input去加上那個屬性

所以又寫了一隻程式放在global.js

$('h5').each(function () {
        var $this = $(this);
        var title = $this.text();
        if (title && title.length > 0)
            $this.next('input,select,textarea,div').attr('title', $.trim(title.replace(/[:：]/gi, '')));
    });

當然假如希望判斷嚴謹一點, 可以寫成$('div > h5', '#editArea').each 之類的寫法

不過大致上的功能就是

找出h5, 假如他有值, 找出他後面是不是有input,

假如有, 就把值放進title而已

一般來說寫程式盡量維持Dry原則

Dont Repeat YouSelf,

不過對我來說就是懶人原則, 可以不要重複寫的程式碼就不想重複寫

就分享了幾個我比較常用的global函式

在這高手如雲的點部落

無疑是野人獻曝了

而請前輩指點一番

本文可能有理解錯誤或不盡不實的地方

請路過的前輩不要客氣用力打醒

這會是我們成長的主要養分

回首頁