丰富自己的javascript类库

丰富自己的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的过程。

时间: 2024-07-28 14:57:13

丰富自己的javascript类库的相关文章

javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库

预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScript 停止了包装,不外这些框架的开山祖师 YUI 照样坚持用自己的 JavaScript 类库. jQuery 是今朝用的最多的前端 JavaScript 类库,据初步统计,今朝 jQuery 的占有率曾经跨越 46%,它算是比拟轻量级的类库,对 DOM 的操纵也比拟便利到位,支撑的后果和控件也许

封装自己的JavaScript类库(一)

一.动机背景 作为一个有五年多的.net后端开发人员,为什么会突然想写自己的JavaScript类库? 首先是想提高自己的前端水平(受到刺激),其次是项目需求,再次是为了弄明白某些前端的写法和. 刺激来自于去年2-4月份在A公司做的一个项目,这个项目分三个子系统:PC端Web站点,PC端后台管理平台,微信端(说是后期还有APP).业务是问卷设计.问卷调查以及统计分析等.我直接进入开发阶段,并且还是主责开发人员,加上一个前端开发(只写静态页面,不负责调用数据以及前端的框架搭建),公司这边也没有任何

编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章

这些年主要关注于项目管理方面的工作,编码就比较少了.这几天比较空闲,就想把原来的经验沉淀下来,一个是做好记录,以后如果忘记了还能尽快找回来,第二个是写写博文,算是练练手笔吧. 言归正传,这次写的是Javascript类库.大家都知道,Javacript是一种很有意思的语言.虽然它是前端语言,但是它能做的事情远远超出我们的想象.Javascript同样是一种面向对象的语言,使用它,同样可以自定义对象,同样也具备对象的一些特性,即封装,继承,多态性.同时,Javascript同样也有设计模式,同样能

5款帮助简化的HTML5 Audio开发的Javascript类库

HTML5的audio标签提供了我们方便控制声音的功能,但是使用原生的HTML5来开发声音或者音乐相关的项目仍旧非常的麻烦,在今天这篇文章中,我们将介绍5款帮助你简化开发的javascript audio类库,相信合理的使用能够帮助你高效的开发基于html5 audio的应用和项目,希望大家觉得有帮助! SoundManager 2 soundmanager2绝对是一个产品级别的javascript audio解决方案,支持HTML5并且兼容老的flash.帮助大家使用一套统一API来实现跨平台

Highcharts是一个制作图表的纯Javascript类库

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用户完全免费: 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP.Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTool

jQ禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突

1. 禁止右键点击 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 代码如下: $(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($

基于rollup搭建JavaScript类库开发环境

平时开发过程中,积累了不少的经验和技巧都应用到项目中,而下次用到的时候却又开始到处翻. 有时也想自己搭建个类库或工具包什么的来积累自己的经验技巧,又没有专门的时间去搭建各种 环境,像rollup或者webpack这样的打包工具.ES6转码工具Babel.Eslint.Jest测试工具等等. 这里就特意做了一个起始项目,将rollup.ES6转码.Eslint.Jest都集成起来,平时用的时候只需要 积累模块和方法即可. 本文参考:基于Webpack和ES6打造Javascript类库 http:

一个格式化日期和时间的JavaScript类库

原文地址:http://www.cnblogs.com/zhangpengshou/archive/2012/07/19/2599053.html 结合meizz的代码做了适当调整. Date.prototype.Format = function (fmt) { var that = this; var postfix = false; var o = { "M+": this.getMonth() + 1, //month "d+": this.getDate(

JavaScript类库---JQuery(二)

接上: 6.Ajax:  一个基础底层函数:jQuery.ajax();  //高级工具函数都会调用此函数:  一个高级工具方法:load() ;  四个高级工具函数:jQuery.getScript().jQuery.getJSON().$.get() . $.post(); load():是一个方法,向它传入一个URL,它会异步加载该URL的内容,然后将内容插入到选中的元素中,去替换已存在的内容:形如:$("#status").load('status.html'); 如果只想显示