丰富自己的javascript类库

Posted 2020-07-27 骆宏

丰富自己的javascript类库

        每个优秀的开发者都会形成自己的类库，作为一个java开发者，我们也会写一大堆的工具类，用于简化我们的开发工作。但是作为一个全站攻城狮，不仅仅只是懂的形成java的类库，javascript的类库也同样重要。好啦，这篇文章不多说废话，下面对的代码提供了一些非常方便的工具类，或者是对javascript已有对象的扩展，比如字符串的扩展，日期对象的扩展，数组的扩展等。同样的，也提供了一个StringBuffer对象，该对象的用法基本也与java.lang.StringBuffer一样...

/**
 * 该文件包含了一些模拟java常用类的相关javascript类
 * 这里面主要包含了java.lang,java.util包中一些常用的类
 * 
 * 为了更加容易操作字符串，这里面也对字符串进行了赠强
 * 对数组，日期也进行了增强
 * 
 * 比如：StringBuffer,List,Map,Set等
 * @author:luohong
 * @date:2015-10-21 13:40 pm
 * @email [email protected]
 */
//========================================实现一个StringBuffer====================================//
/**
 * 模拟StringBuffer
 * 使用过程基本上和java.lang.StringBuffer一样，但是在toString中可以插入风格符，默认分隔符为','
 * */
function StringBuffer(){
	this.strs = [];  //用数组来缓存所有的内容

	if(typeof StringBuffer._initialized == "undefined"){
		StringBuffer._initalized = true;  //已经初始化过了，不需要重复初始化

		StringBuffer.prototype.append = function(str){
			this.strs.push(str);
			return this;
		};

		StringBuffer.prototype.toString = function(seperator){
			if(!seperator){
				seperator = "";
			}
			return this.strs.join(seperator);
		};
	}
}
//========================================实现一个StringBuffer====================================//


//====================================增强字符串=============================================//
/**
 * 判断字符串是否为空。
 * 
 * @returns {Boolean}
 */
String.prototype.isEmpty = function() {
	return (this == null || this == undefined || this == '');
};

/**
 * 功能：移除首尾空格
 */
String.prototype.trim = function() {
	return this.replace(/(^[ \t\n\r]+)|([ \t\n\r]+$)/g, '');
};

/**
 * 功能:移除左边空格
 */
String.prototype.lTrim = function() {
	return this.replace(/(^\s*)/g, "");
};

/**
 * 功能:移除右边空格
 */
String.prototype.rTrim = function() {
	return this.replace(/(\s*$)/g, "");
};

/**
 * 判断结束是否相等
 * 
 * @param str
 * @param isCasesensitive
 * @returns {Boolean}
 */
String.prototype.endWith = function(str, isCasesensitive) {
	if (str == null || str == "" || this.length == 0
			|| str.length > this.length)
		return false;
	var tmp = this.substring(this.length - str.length);
	if (isCasesensitive == undefined || isCasesensitive) {
		return tmp == str;
	} else {
		return tmp.toLowerCase() == str.toLowerCase();
	}
};

/**
 * 判断开始是否相等
 * 
 * @param str
 * @param isCasesensitive
 * @returns {Boolean}
 */
String.prototype.startWith = function(str, isCasesensitive) {
	if (str == null || str == "" || this.length == 0
			|| str.length > this.length)
		return false;
	var tmp = this.substr(0, str.length);
	if (isCasesensitive == undefined || isCasesensitive) {
		return tmp == str;
	} else {
		return tmp.toLowerCase() == str.toLowerCase();
	}
};

/**
 * 在字符串左边补齐指定数量的字符
 * 
 * @param c
 *            指定的字符
 * @param count
 *            补齐的次数 使用方法： var str="999"; str=str.leftPad("0",3); str将输出 "000999"
 * @returns
 */
String.prototype.leftPad = function(c, count) {
	if (!isNaN(count)) {
		var a = "";
		for ( var i = this.length; i < count; i++) {
			a = a.concat(c);
		}
		a = a.concat(this);
		return a;
	}
	return null;
};

/**
 * 在字符串右边补齐指定数量的字符
 * 
 * @param c
 *            指定的字符
 * @param count
 *            补齐的次数 使用方法： var str="999"; str=str.rightPad("0",3); str将输出
 *            "999000"
 * @returns
 */
String.prototype.rightPad = function(c, count) {
	if (!isNaN(count)) {
		var a = this;
		for ( var i = this.length; i < count; i++) {
			a = a.concat(c);
		}
		return a;
	}
	return null;
};

/**
 * 对html字符进行编码 用法： str=str.htmlEncode();
 * 
 * @returns
 */
String.prototype.htmlEncode = function() {
	return this.replace(/&/g, "&").replace(/</g, "<").replace(/>/g,
			">").replace(/\"/g, """).replace(/\'/g, "'");
};

/**
 * 对html字符串解码 用法： str=str.htmlDecode();
 * 
 * @returns
 */
String.prototype.htmlDecode = function() {
	return this.replace(/\&\;/g, '\&').replace(/\>\;/g, '\>').replace(
			/\<\;/g, '\<').replace(/\"\;/g, '\'').replace(/\&\#39\;/g,
			'\'');
};

/**
 * 对json中的特殊字符进行转义
 */
String.prototype.jsonEscape = function() {
	return this.replace(/\"/g, """).replace(/\n/g, "&nuot;");
};

/**
 * 对json中的特殊字符进行转义
 */
String.prototype.jsonUnescape = function() {
	return this.replace(/"/g, "\"").replace(/&nuot;/g, "\n");
};

/**
 * 字符串替换
 * 
 * @param s1
 *            需要替换的字符
 * @param s2
 *            替换的字符。
 * @returns
 */
String.prototype.replaceAll = function(s1, s2) {
	return this.replace(new RegExp(s1, "gm"), s2);
};

/**
 * 获取url参数
 * 
 * @returns {object}
 */
String.prototype.getArgs = function() {
	var args = {};
	if (this.indexOf("?") > -1) {
		var argStr = this.split("?")[1], argAry = argStr.split("&");

		for ( var i = 0, c; c = argAry[i++];) {
			var pos = c.indexOf("=");
			if (pos == -1)
				continue;
			var argName = c.substring(0, pos), argVal = c.substring(pos + 1);
			argVal = decodeURIComponent(argVal);
			args[argName] = argVal;
		}
	}
	return args;
};

/**
 * var str=String.format("姓名:{0},性别:{1}","ray","男"); alert(str);
 * 
 * @returns
 */
String.prototype.format = function() {
	var template = arguments[0];
	var args = arguments;
	var str = template.replace(/\{(\d+)\}/g, function(m, i) {
		var k = parseInt(i) + 1;
		return args[k];
	});
	return str;
};
//====================================增强字符串=============================================//

//====================================增强数组==============================================//
/**
 * 移除数组中指定对象
 */
Array.prototype.remove = function(val) {
	for ( var i = 0; i < this.length; i++) {
		if (this[i] === val) {
			this.splice(i, 1);
			i--;
		}
	}
	return this;
};

//插入元素
Array.prototype.insert = function(index, item) {
	this.splice(index, 0, item);
	return this;
};

/**
 * 去除数组中的重复项
 * 
 * @function [method]
 *           判断对象是否相同的方法(可选参数，默认实现是深度匹配两个对象是否相同)，示例：function(x,y){if(x.id===y.id)return
 *           true;}
 */
Array.prototype.unique = function(method) {
	if (!angular.isArray(this))
		return this;
	var sameObj = method || function(a, b) {
		var tag = true;
		for ( var x in a) {
			if (!b[x])
				return false;
			if (typeof (a[x]) === 'object') {
				tag = sameObj(a[x], b[x]);
			} else {
				if (a[x] !== b[x])
					return false;
			}
		}
		return tag;
	}
	
	var flag, that = this.slice(0);
	this.length = 0;
	for ( var i = 0; i < that.length; i++) {
		var x = that[i];
		flag = true;
		for ( var j = 0; j < this.length; j++) {
			y = this[j];
			if (sameObj(x, y)) {
				flag = false;
				break;
			}
		}
		if (flag)
			this[this.length] = x;
	}
	return this;
}
//====================================增强数组==============================================//


//=====================================增强date，获取xxxx-MM-yy hh:mm:ss格式日期==========================================//
/**
 * 返回当前时间，格式如下：2016-06-06 12:12:12
 */
Date.prototype.current = function(){
	var year = this.getFullYear();
	var month = (this.getMonth() + 1) < 10 ? (0 + "" + (this.getMonth() + 1)) : (this.getDate() + 1);
	var date = this.getDate() < 10 ? (0 + "" + this.getDate()) : this.getDate();
	var hours = this.getHours()  < 10 ? (0 + "" + this.getHours()) : this.getHours();
	var minutes = this.getMinutes() < 10 ? (0 + "" + this.getMinutes()) : this.getMinutes();
	var seconds = this.getSeconds() < 10 ? (0 + "" + this.getSeconds()) : this.getSeconds();
	return year + "-" + month + "-" + date + 
						" " + hours + ":" + minutes + ":" + seconds;			
};

/**
 * 返回当前日期，格式如下：2016-06-06
 */
Date.prototype.currentDate = function(){
	var year = this.getFullYear();
	var month = this.getMonth() + 1;
	if(month < 10){
		month = "0" + month;
	}
	var date = this.getDate() < 10 ? (0 + "" + this.getDate()) : this.getDate();
	return year + "-" + month + "-" + date;
};
//=====================================增强date，获取xxxx-MM-yy hh:mm:ss格式日期==========================================//

上面的代码，提供了一些在java中常用的方法，是的javascript的开发与java的开发非常的相似，嘿嘿，javascript一样可以写的跟java一样的6。比如

var sb = new StringBuffer();
sb.append('hello').append(new Date().getTime()).append();

var date = new Date();
date.current();
date.currentDate();

var str = "";
str.isEmpty();            //true
str.startWith('aaaa');    // false

var array = [1,2,2,3];    //[1,2,3]
array.<span style="font-family: Arial, Helvetica, sans-serif;">unique</span>();

        当然，上面的代码，我们是直接通过原型对象扩展了javascript基础对象，下面提供一个日期工具类，用于操作日期的相关操作：比较时间，获取当前月份的第一天和最后一天，格式化日期等

/**
 * date工具类
 * 目前只有格式化的功能
 * 
 * @author 沈少钦
 * @date 2016-04-20 11:19
 */
var DateUtils = {
    /**
     *
     * @param  {[Date]} date [日期对象] , if no, then use new Date(). that is current computer date
     * @param  {[Date]} pattern [格式规则], if no, then use  DateUtils.DEFAULT_DATE_TIME_PATTERN
     * @return {[string]}      [格式化的日期字符串]
     */
    format: function(date /*optional*/ , pattern /*optional*/ ) {
         function deal(date, format) {
            var map = {
                "M": date.getMonth() + 1, //月份 
                "d": date.getDate(), //日 
                "H": date.getHours(), //小时 
                "m": date.getMinutes(), //分 
                "s": date.getSeconds(), //秒 
                "q": Math.floor((date.getMonth() + 3) / 3), //季度 
                "S": date.getMilliseconds() //毫秒 
            };
            format = format.replace(/([yMdHmsqS])+/g, function(all, t) {
                var v = map[t];
                if (v !== undefined) {
                    if (all.length > 1) {
                        v = '0' + v;
                        v = v.substr(v.length - 2);
                    }
                    return v;
                } else if (t === 'y') {
                    return (date.getFullYear() + '').substr(4 - all.length);
                }
                return all;
            });
            return format;
        }
        switch (arguments.length) {
            case 0:
                return deal(new Date(), DateUtils._CONS_.DEFAULT_DATE_TIME_PATTERN);
            case 1:
                if (arguments[0] instanceof Date) {
                    return deal(arguments[0], DateUtils._CONS_.DEFAULT_DATE_TIME_PATTERN);
                } else {
                    return deal(DateUtils._CONS_.DEFAULT_DATE_TIME_PATTERN, arguments[0]);
                }
            case 2:
                return deal(arguments[0], arguments[1]);
        }       
    },

    getChineseWeeks: function(date) {
        if (date === null || date === undefined) {
            date = new Date();
        }
        var value = date.getDay()-1;
        var result = '星期';
        switch (value) {
            case 0:
                result += "一";
                break;
            case 1:
                result += "二";
                break;
            case 2:
                result += "三";
                break;
            case 3:
                result += "四";
                break;
            case 4:
                result += "五";
                break;
            case 5:
                result += "六";
                break;
            case 6:
                result += "日";
                break;
        }
        return result;
    },
    
    getEnglishWeeks: function(date) {
        if (date === null || date === undefined) {
            date = new Date();
        }
        var value = date.getDay()-1;
        switch (value) {
            case 0:
                return "Monday";
            case 1:
                return "Tuesday";
            case 2:
                return "Wensday";
            case 3:
                return "Thursday";
            case 4:
                return "Friday";
            case 5:
                return "Saturday";
            case 6:
                return "Sunday";
        }
    },

    /**
     * 计算时间差
     * @param  startTime 开始时间
     * @param  endTime 结束时间
     * @param  diffType 时间差类型，second,minute,hour,day
     * @return 返回时间差，整数类型
     *
     * 使用例子：
     * var result = DateUtils.getDateDiff("2010-02-26 16:00:00", "2011-07-02 21:48:40", "second");
     * var result = DateUtils.getDateDiff("2010-02-26 16:00:00", "2011-07-02 21:48:40", "minute");
     * var result = DateUtils.getDateDiff("2010-02-26 16:00:00", "2011-07-02 21:48:40", "hour");
     * var result = DateUtils.getDateDiff("2010-02-26 16:00:00", "2011-07-02 21:48:40", "day");
     */
    getDateDiff: function(startTime, endTime, diffType) {
        //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式 
        startTime = startTime.replace(/\-/g, "/");
        endTime = endTime.replace(/\-/g, "/");
        
        //将计算间隔类性字符转换为小写
        diffType = diffType.toLowerCase();
        var sTime = new Date(startTime);      //开始时间
        var eTime = new Date(endTime);  //结束时间
        var divNum = 1;
        switch (diffType) {
            case "second":
                divNum = 1000;
                break;
            case "minute":
                divNum = 1000 * 60;
                break;
            case "hour":
                divNum = 1000 * 3600;
                break;
            case "day":
                divNum = 1000 * 3600 * 24;
                break;
            default:
                break;
        }
        return parseInt((eTime.getTime() - sTime.getTime()) / parseInt(divNum));
    },

    /**
     *  将秒格式化为： x小时z分钟y秒
     * @param  {int} seconds 秒
     */
    toChineseTime: function(seconds){
        var hour = "";
        var minute = parseInt(seconds / 60);
        seconds = parseInt(seconds % 60);
        if(minute >= 60){
            hour = parseInt(minute / 60);
            minute = parseInt(minute % 60);
        }
        var result = seconds + "秒";
        if(minute){
            result = minute + "分" + result;
        }    
        if(hour){
            result = hour + "小时" + result;
        }
        return result;
    },
    
    /**
     * 获取当前日期的前几天日期
     * @param n 间隔天数
     * @param startDate 起始日期，默认为当天
     * 使用例子：DateUtils.getBeforeDate(5), DateUtils.getBeforeDate(5, '2016-05-06')
     * 返回格式如：yyyy-mm-dd
     */
    getBeforeDate: function(n, startDate){
        var n = n;
        
        var d = null;
        if(!startDate){
            d = new Date();
        }else{
            var strs = startDate.split('-');
            d = new Date();
            d.setYear(strs[0]);
            d.setMonth(strs[1] - 1);
            d.setDate(strs[2]);
        }
        var year = d.getFullYear();
        var mon=d.getMonth()+1;
        var day=d.getDate();
        d.setTime(d.getTime() - n * 1000 * 60 * 60 * 24);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);
        return s;
    },

    /**
     * 获取当前日期的后几天日期
     * @param n 间隔天数
     * @param startDate 起始日期，默认为当天
     * 使用例子：DateUtils.getAfterDate(5), DateUtils.getAfterDate(5, '2016-05-06')
     * 返回格式如：yyyy-mm-dd
     */
    getAfterDate: function(n, startDate){
        var n = n;
        
        var d = null;
        if(!startDate){
            d = new Date();
        }else{
            var strs = startDate.split('-');
            d = new Date();
            d.setYear(strs[0]);
            d.setMonth(strs[1] - 1);
            d.setDate(strs[2]);
        }

        d.setTime(d.getTime() + n * 1000 * 60 * 60 * 24);  //更新时间
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);
        return s;
    },

    /**
     * 获取当前月第一天
     * @returns {Date}
     */
    getCurrentMonthFirst: function(){
		var date=new Date();
		date.setDate(1);
		return date;
	},
	
	/**
	 * 获取当前月最后一天
	 * @returns {Date}
	 */
	getCurrentMonthLast: function(){
		var date=new Date();
		var currentMonth=date.getMonth();
		var nextMonth=++currentMonth;
		var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
		var oneDay=1000*60*60*24;
		return new Date(nextMonthFirstDay-oneDay);
	}
}

DateUtils._CONS_ = {
    DEFAULT_DATE_PATTERN: "yyyy-MM-dd", //默认的 年月日模式
    DEFAULT_DATE_TIME_PATTERN: "yyyy-MM-dd HH:mm:ss", //默认的 完全模式
    DEFAULT_TIME_PATTERN: "HH:mm:ss", //默认的 时分秒模式
    DEFAULT_MON_DAY_HOU_MIN_PATTERN: "MM-dd HH:mm", //默认的 月日时分模式
    DEFAULT_MON_DAY_PATTERN: "MM-dd", //默认的 月日模式
    DEFAULT_HOU_MIN_PATTERN: "HH:mm" //默认的 时分模式
};

总结

        有了上面的例子，我们就可以将javascript一些常用的组件封装起来，形成我们自己的开发类库，以后开发新的项目，直接将这些js类库搬移过去，可以极大的简化我们寻找代码的时间，不必要依赖过多的google，然后copy的过程。