给你的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类库,真正体会到了看别人的类库跟自己写类库的区别。我想园子里肯定有很多像我这样的前端新手,想写类库却不知道从哪儿下手,但愿随着这个类库的不断改进和重构,也能给大家一点提示和帮助。

  在此也真心希望各位有经验的朋友多多指正,分享你们的类库设计经验,指出本类库中的不足。

你可能感兴趣的:(util)