總要來個前言
============================================
因為工作是寫網站的關係，常常需要寫一些驗證或判斷的 js
但是有些常用的功能每次都要重寫一遍很浪費時間，所以打算打包成一個js
然後這陣子有看了 "Javascript 設計模式" 這本書
所以就用了一些裡面教的方法打包了，順便當作練習一下
如果有人要用的話......(檔案那麼小，其實很好用的喔)
namespace 預設是 MyFun 可以自己改自己想要的名稱
(我是換成了公司名稱，以顯示我對公司的忠貞不二)
改程式碼第1、2行就可以了
裡面都沒有用到 jQuery，所以沒有版本的問題
之後會再陸續增加常用功能
下載位置：https://dl.dropboxusercontent.com/u/28037914/js/myfun.js (4k)
下載位置：https://dl.dropboxusercontent.com/u/28037914/js/myfun_mini.js (2k)
(有增加的話會一直更新這兩個檔)
這個工具包裡面的功能有下面這三種類型：
MyFun.Validate
MyFun.String
MyFun.Web
使用範例：
a.驗證類型 (MyFun.Validate)
1.判斷EMail格式
MyFun.Validate.isEmail('eason@nnn.com'); // true
MyFun.Validate.isEmail('eason@nnn'); // false
2.判斷日期格式
MyFun.Validate.isDate('2013/1/1'); // true
MyFun.Validate.isDate('2013/2/31'); // false
3.判斷帳號規則 (必須為英數或底線組成，且必須為4碼以上)
MyFun.Validate.chkAccount('eason_yu'); // true
MyFun.Validate.chkAccount('123'); // false
MyFun.Validate.chkAccount('eason_yu@@'); // false
4.判斷密碼規則 (必須包含一個小寫字母、一個大寫字母、一個數字和至少6個字元)
MyFun.Validate.chkPassword('Aa111111'); // true
MyFun.Validate.chkPassword('11111111'); // false
MyFun.Validate.chkPassword('_a11sadfsfas'); // false
5.判斷URL格式
MyFun.Validate.chkURL('http://www.aaa.com.tw') //true
b.字串處理 (MyFun.String)
1.移除字串兩端特定字元
MyFun.String.trimSymbol(',hello,', ','); // hello
這個可能要解釋一下，因為有時候在用迴圈串字串，例如下面:
for (i = 1; i < 5; i++) {
str += "," + i;
}
結果會是 ,1,2,3,4
MyFun.String.trimSymbol(str, ','); //就會返回 1,2,3,4
c.網路 (MyFun.Web)
1.接收網址列 query string
例如網址:http://localhost:49565/Test.aspx?id=5&pwd=1
MyFun.Web.request('id'); // 5
MyFun.Web.request('pwd'); // 1
2.回傳使用者的瀏覽器名稱
MyFun.Web.browser // chrome
3.回傳瀏覽器版本號
MyFun.Web.browserVersion // 32.0.1700.72
========================================
嘛.....如果你要一直使用這物件，當然也可以這樣寫
var Fun = MyFun.Web;
document.write(Fun. browser);
document.write(Fun. browserVersion);
唉呦....就是namespace 嘛
如果你是用Visual Studio 開發的話
只要打個開頭名稱或 MyFun.就會自己帶出方法名稱跟屬性了，所以也不太需要記
原始檔：
| /* | |
| MyFun.Validate | |
| isEmail:email格式檢查 return true、false | |
| isDate:日期格式檢查 return true、false | |
| chkAccount:檢查帳號必須為英數或底線組成，且必須為4碼以上 | |
| chkPassword:6～12個字元，需包含數字及英文，勿使用特殊字元或符號 | |
| ---------------------------------------------------------------- | |
| MyFun.String | |
| trimSymbol:去除字串左右兩邊的指定符號 | |
| ex: MyFun.String.trimSymbol(',test,', ","); // test | |
| ---------------------------------------------------------------- | |
| MyFun.Web | |
| request:取得網址列參數 | |
| browser:取得使用的瀏覽器 | |
| browserVersion:取得瀏覽器版本 (包含IE11) | |
| ---------------------------------------------------------------- | |
| 2014/1/13 by eason_yu | |
| */ | |
| var MyFun = MyFun || {}; | |
| MyFun = { | |
| Validate: { | |
| isEmail: function (para) { | |
| return para == '' ? false : !(!/^[^\s]+@[^\s]+\.[^\s]{2,3}$/.test(para)); | |
| }, isDate: function (para) { | |
| try { | |
| var D, d = para.split(/\D+/); | |
| d[0] *= 1; | |
| d[1] -= 1; | |
| d[2] *= 1; | |
| D = new Date(d[0], d[1], d[2]); | |
| return (D.getFullYear() == d[0] && D.getMonth() == d[1] && D.getDate() == d[2]) ? true : false; | |
| } | |
| catch (er) { | |
| return false; | |
| } | |
| }, chkAccount: function (para) { | |
| return para == '' ? false : /^[0-9a-zA-Z_]{4,}$/.test(para); | |
| }, chkPassword: function (para) { | |
| return para == '' ? false : /(?=^.{6,12}$)(?=.*[a-zA-Z])(?=.*[0-9])(?!.*\s).*$/.test(para); | |
| } | |
| }, String: { | |
| trimSymbol: function (para, symbol) { | |
| return (para == '' || symbol == '') ? '' : (function () { | |
| para = para.substr(0, 1) == symbol ? para.substr(1, para.length - 1) : para; | |
| para = para.substr(para.length - 1, 1) == symbol ? para.substr(0, para.length - 1) : para; | |
| return para; | |
| })(para); | |
| } | |
| }, Web: { | |
| request: function (para) { | |
| var q = location.search; | |
| q = q == "" ? "" : q.substr(1, q.length); | |
| para = para.toLowerCase(); | |
| return (q == "" || para == '') ? "" : (function (q, para) { | |
| var arr = []; | |
| var result = q.split('&'); | |
| for (i = 0; i < result.length; i++) { | |
| var tmp = result[i].split('='); | |
| if (tmp[0] == para) { return tmp[1]; } | |
| } | |
| return ""; | |
| })(q, para); | |
| }, browser: (function () { | |
| var N = navigator.appName, ua = navigator.userAgent, tem; | |
| var M = ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i); | |
| if (M && (tem = ua.match(/version\/([\.\d]+)/i)) != null) M[2] = tem[1]; | |
| M = M ? [M[1], M[2]] : [N, navigator.appVersion, '-?']; | |
| if (navigator.userAgent.toLowerCase().search(/(msie\s|trident.*rv:)([\w.]+)/) != -1) { | |
| return "msie"; | |
| } else { | |
| return M[0].toLowerCase(); | |
| } | |
| })(), browserVersion: (function () { | |
| var N = navigator.appName, ua = navigator.userAgent, tem; | |
| var M = ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i); | |
| if (M && (tem = ua.match(/version\/([\.\d]+)/i)) != null) M[2] = tem[1]; | |
| M = M ? [M[1], M[2]] : [N, navigator.appVersion, '-?']; | |
| return M[1]; | |
| })() | |
| } | |
| } |
廢話心得：
因為jQuery 已經不支援 $.browser 了，所以判斷瀏覽器變得很麻煩
再加上 IE11 很機車 user-agent 也改了，不是以前的 MSIE
每次要判斷瀏覽器要找的頭破血流，所以就把這功能包進去了
然後jQuery 還有一些在網站開發也是會常用的東西，因為沒停止支援
所以還是繼續用jQuery吧
ex :
1. 判斷數字 $.isNumeric
https://api.jquery.com/jQuery.isNumeric/
2. 去除字串左右兩邊空格 $.trim
http://api.jquery.com/jquery.trim/
3. 判斷物件型態 $.type
http://api.jquery.com/jquery.type/
4. 判斷是否為陣列 $.isArray
http://api.jquery.com/jQuery.isArray/
然後這個工具包用到了那本書裡面的幾個觀念.....
1.命名空間模式
2.物件實字
3.立即函數
4.簡化 if....else 改成 (1=1) ? true : false;
本來想測試 javascript 的記憶模式，但還是有點霧颯颯不知要什麼時機使用
留言列表
CSS、Responsive Web Design (2)