给你的JS类库加上命名空间和扩展方法：jutil第一次重构
重构前的话
上一篇发布一个JavaScript工具类库jutil，欢迎使用，欢迎补充，欢迎挑错！发布后有幸得到了大部分朋友的肯定，在这里多谢各位的支持鼓励。
在上一篇评论中，也有园友指出了存在的问题，主要有建议增加数组过滤方法，HTMLEncode和HTMLDecode方法不安全，数组去重方法的问题等，没有命名空间，扩展不太方便。本次重构主要解决的就是上面这些问题。
本次重构具体的就是增加了数组过滤方法，划分了一下命名空间，增加了用于扩展的方法。对于HTMLEncode和HTMLDecode方法不安全的问题，本次重构没有处理，如果需要安全的HTMLEncode和HTMLDecode建议使用http://www.strictly-software.com/scripts/downloads/encoder.js这个JS库。数组去重的问题我测试了一下，当数组中存在true、false等bool值时会出问题，因此改为园友（jamcode）提供的方法。
如何给类库添加命名空间
让类库拥有命名空间的方法很多，我这里用的是：
jutil.html = jutil.html ? jutil.html : {//code}
这种方式，这里html就是二级命名空间。如之前的HTML相关的两个方法可以写成这样：
(function () { var document = window.document; var jutil = jutil ? jutil : { }; jutil.html = jutil.html ? jutil.html : { encode: function (sHtml) { var div = document.createElement("div"), text = document.createTextNode(sHtml); div.appendChild(text); return div.innerHTML; }, decode: function (sHtml) { var div = document.createElement("div"); div.innerHTML = sHtml; return div.innerText || div.textContent; } }; if (!window.jutil) { window.jutil = jutil; } })();
本次重构就采用了这种方法。
如何让类库方便扩展
这个直接参考了kit.js中的方案，就是提供了两个用于扩展的方法：
merge : function() { var a = arguments; if(a.length < 2) { return; } if(a[0] != null) { for(var i = 1; i < a.length; i++) { for(var r in a[i]) { a[0][r] = a[i][r]; } } } return a[0]; }, mergeIfNotExist : function() { var a = arguments; if(a.length < 2) { return; } for(var i = 1; i < a.length; i++) { for(var r in a[i]) { if(a[0][r] == null) { a[0][r] = a[i][r]; } } } return a[0]; }
这两个方法都比较简单，就不多解释了。
重构后jutil代码
(function () { var document = window.document; var jutil = jutil ? jutil : { merge : function() { var a = arguments; if(a.length < 2) { return; } if(a[0] != null) { for(var i = 1; i < a.length; i++) { for(var r in a[i]) { a[0][r] = a[i][r]; } } } return a[0]; }, mergeIfNotExist : function() { var a = arguments; if(a.length < 2) { return; } for(var i = 1; i < a.length; i++) { for(var r in a[i]) { if(a[0][r] == null) { a[0][r] = a[i][r]; } } } return a[0]; } }; jutil.array = jutil.array ? jutil.array : { distinct: function unique(arr) { var i = 0, gid = '_' + (+new Date) + Math.random(), objs = [], hash = { 'string': {}, 'boolean': {}, 'number': {} }, p, l = arr.length, ret = []; for (; i < l; i++) { p = arr[i]; if (p == null) continue; tp = typeof p; if (tp in hash) { if (!(p in hash[tp])) { hash[tp][p] = 1; ret.push(p); } } else { if (p[gid]) continue; p[gid] = 1; objs.push(p); ret.push(p); } } for (i = 0, l = objs.length; i < l; i++) { p = objs[i]; p[gid] = undefined; delete p[gid]; } return ret; }, indexOf: function (arr, obj, iStart) { if (Array.prototype.indexOf) { return arr.indexOf(obj, (iStart || 0)); } else { for (var i = (iStart || 0), j = arr.length; i < j; i++) { if (arr[i] === obj) { return i; } } return -1; } }, filter: function (arr, callback) { var result = []; for (var i = 0, j = arr.length; i < j; i++) { if (callback.call(arr[i], i, arr[i])) { result.push(arr[i]); } } return result; } }; jutil.html = jutil.html ? jutil.html : { encode: function (sHtml) { var div = document.createElement("div"), text = document.createTextNode(sHtml); div.appendChild(text); return div.innerHTML; }, decode: function (sHtml) { var div = document.createElement("div"); div.innerHTML = sHtml; return div.innerText || div.textContent; } }; jutil.storage = jutil.storage ? jutil.storage : { getCookie: function (sKey) { if (!sKey) return ""; if (document.cookie.length > 0) { var startIndex = document.cookie.indexOf(sKey + "=") if (startIndex != -1) { startIndex = startIndex + sKey.length + 1 var endIndex = document.cookie.indexOf(";", startIndex) if (endIndex == -1) { endIndex = document.cookie.length; } return decodeURIComponent(document.cookie.substring(startIndex, endIndex)); } } return "" }, setCookie: function (sKey, sValue, iExpireSeconds) { if (!sKey) return; var expireDate = new Date(); expireDate.setTime(expireDate.getTime() + iExpireSeconds * 1000); document.cookie = sKey + "=" + encodeURIComponent(sValue) + ";expires=" + expireDate.toGMTString() + ";"; }, deleteCookie: function (sKey) { if (!sKey) return; document.cookie = sKey + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'; }, getStorage: function (sKey) { if (!sKey) return; if (window.localStorage) { return decodeURIComponent(localStorage.getItem(sKey)); } else { return this.getCookie(sKey); } }, setStorage: function (sKey, sValue, iExpireSeconds) { if (!sKey) return; if (window.localStorage) { localStorage.setItem(sKey, encodeURIComponent(sValue)); } else { this.setCookie(sKey, sValue, iExpireSeconds); } }, deleteStorage: function (sKey) { if (!sKey) return; if (window.localStorage) { localStorage.removeItem(sKey); } else { this.deleteCookie(sKey); } } }; jutil.date = jutil.date ? jutil.date : { daysInFebruary: function (obj) { var year = 0; if (obj instanceof Date) { year = obj.getFullYear(); } else if (typeof obj === "number") { year = obj; } else { return 0; } if (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)) { return 29; } return 28; }, daysInYear: function (obj) { var year = 0; if (obj instanceof Date) { year = obj.getFullYear(); } else if (typeof obj === "number") { year = obj; } else { return 0; } if (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)) { return 366; } return 365; }, format: function (date, sFormat, sLanguage) { var time = {}; time.Year = date.getFullYear(); time.TYear = ("" + time.Year).substr(2); time.Month = date.getMonth() + 1; time.TMonth = time.Month < 10 ? "0" + time.Month : time.Month; time.Day = date.getDate(); time.TDay = time.Day < 10 ? "0" + time.Day : time.Day; time.Hour = date.getHours(); time.THour = time.Hour < 10 ? "0" + time.Hour : time.Hour; time.hour = time.Hour < 13 ? time.Hour : time.Hour - 12; time.Thour = time.hour < 10 ? "0" + time.hour : time.hour; time.Minute = date.getMinutes(); time.TMinute = time.Minute < 10 ? "0" + time.Minute : time.Minute; time.Second = date.getSeconds(); time.TSecond = time.Second < 10 ? "0" + time.Second : time.Second; time.Millisecond = date.getMilliseconds(); time.Week = date.getDay(); var MMMArrEn = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], MMMArr = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], WeekArrEn = ["Sun", "Mon", "Tue", "Web", "Thu", "Fri", "Sat"], WeekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], oNumber = time.Millisecond / 1000; if (sFormat != undefined && sFormat.replace(/\s/g, "").length > 0) { if (sLanguage != undefined && sLanguage === "en") { MMMArr = MMMArrEn.slice(0); WeekArr = WeekArrEn.slice(0); } sFormat = sFormat.replace(/yyyy/ig, time.Year) .replace(/yyy/ig, time.Year) .replace(/yy/ig, time.TYear) .replace(/y/ig, time.TYear) .replace(/MMM/g, MMMArr[time.Month - 1]) .replace(/MM/g, time.TMonth) .replace(/M/g, time.Month) .replace(/dd/ig, time.TDay) .replace(/d/ig, time.Day) .replace(/HH/g, time.THour) .replace(/H/g, time.Hour) .replace(/hh/g, time.Thour) .replace(/h/g, time.hour) .replace(/mm/g, time.TMinute) .replace(/m/g, time.Minute) .replace(/ss/ig, time.TSecond) .replace(/s/ig, time.Second) .replace(/fff/ig, time.Millisecond) .replace(/ff/ig, oNumber.toFixed(2) * 100) .replace(/f/ig, oNumber.toFixed(1) * 10) .replace(/EEE/g, WeekArr[time.Week]); } else { sFormat = time.Year + "-" + time.Month + "-" + time.Day + " " + time.Hour + ":" + time.Minute + ":" + time.Second; } return sFormat; }, diff: function (biggerDate, smallerDate) { var intervalSeconds = parseInt((biggerDate - smallerDate) / 1000); if (intervalSeconds < 60) { return intervalSeconds + "秒"; } else if (intervalSeconds < 60 * 60) { return Math.floor(intervalSeconds / 60) + "分钟"; } else if (intervalSeconds < 60 * 60 * 24) { return Math.floor(intervalSeconds / (60 * 60)) + "小时"; } else if (intervalSeconds < 60 * 60 * 24 * 7) { return Math.floor(intervalSeconds / (60 * 60 * 24)) + "天"; } else if (intervalSeconds < 60 * 60 * 24 * 31) { return Math.floor(intervalSeconds / (60 * 60 * 24 * 7)) + "周"; } else if (intervalSeconds < 60 * 60 * 24 * 365) { return Math.floor(intervalSeconds / (60 * 60 * 24 * 30)) + "月"; } else if (intervalSeconds < 60 * 60 * 24 * 365 * 1000) { return Math.floor(intervalSeconds / (60 * 60 * 24 * 365)) + "年"; } else { return Math.floor(intervalSeconds / (60 * 60 * 24)) + "天"; } }, interval: function (biggerDate, smallerDate) { var intervalSeconds = parseInt((biggerDate - smallerDate) / 1000), day = Math.floor(intervalSeconds / (60 * 60 * 24)), hour = Math.floor((intervalSeconds - day * 24 * 60 * 60) / 3600), minute = Math.floor((intervalSeconds - day * 24 * 60 * 60 - hour * 3600) / 60), second = Math.floor(intervalSeconds - day * 24 * 60 * 60 - hour * 3600 - minute * 60); return day + "天:" + hour + "小时:" + minute + "分钟:" + second + "秒"; } }; jutil.string = jutil.string ? jutil.string : { replaceURLWithHTMLLinks: function (sText, bBlank) { var pattern = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig; if (bBlank) { sText = sText.replace(pattern, "<a target='_blank' href='$1'>$1</a>"); } else { sText = sText.replace(pattern, "<a href='$1'>$1</a>"); } return sText; }, getLength: function (sVal, bChineseDouble) { var chineseRegex = /[\u4e00-\u9fa5]/g; if (bChineseDouble != undefined && bChineseDouble === false) { return sVal.length; } else { if (chineseRegex.test(sVal)) { return sVal.replace(chineseRegex, "zz").length; } return sVal.length; } } }; if (!window.jutil) { window.jutil = jutil; } })();
其中的merge和mergeIfNotExist方法参考了园子里JS牛人薛端阳的kit.js的设计。在这里也推荐一下kit.js，这是一个很优秀的JS库。
注意：本次重构由于加了命名空间，并且少部分方法名称有所更改，所以上一篇博文中的示例代码不能运行。
如何扩展
如何用上面增加的merge方法扩展呢，这里提供一个示例。这里我们增加一个去掉数组中值为空的项：
;(function(jutil){ jutil.array=jutil.array?jutil.array:{}; jutil.merge(jutil.array,{ deleteEmpty:function(arr){ for(var i=0,j=arr.length;i<j;){ if(arr[i]==""||arr[i]==null){ arr.splice(i,1); j=arr.lehgth; } else{ i++; } } return arr; } }); })(jutil);
个人感觉还是挺方便，挺简单的。
小结
这是我第一次真正动手写JS类库，真正体会到了看别人的类库跟自己写类库的区别。我想园子里肯定有很多像我这样的前端新手，想写类库却不知道从哪儿下手，但愿随着这个类库的不断改进和重构，也能给大家一点提示和帮助。
在此也真心希望各位有经验的朋友多多指正，分享你们的类库设计经验，指出本类库中的不足。
