本系列文章旨在记录一些实用的javascript技巧，既可以作为一个知识的积累，又可以作为闲暇时打发时间写写代码的记录。同时也方便日后翻阅~
// 判断某个对象是否有指定的className
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
// 给指定对象添加className
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
// 删除className
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
// 正则：
/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/
// 结果格式：
Array
[scheme] => http
[host] => quchao.com
[user] => user
[pass] => pass
[path] => /about-me
[query] => t=100102
[fragment] => hash
)
// demo:
'http://user:pass@xuanfenge.com:80/category/?s=css3#first'
.match(/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/);
// 结果
["http://user:pass@xuanfenge.com:80/category/?s=css3#first", "http", "user", "pass", "xuanfenge.com", "80", "/category/", "s=css3", "first"]
function parseUrl(url) {
// 找到url中的第一个?号
var parse = url.substring(url.indexOf("?") + 1),
params = parse.split("&"),
len = params.length,
item = [],
param = {};
for (var i = 0; i < len; i++) {
item = params[i].split("=");
param[item[0]] = item[1];
}
return param;
}
// demo:
parseUrl("www.xuanfengge.com/js?name=xuanfeng&age=21&page=2")
// 结果
{name: "xuanfeng", age: "21", page: "2"}
/**
* @description 将传入的url参数对象解析组装成字符串做为queryString中的一部分
* @param {Object} params 请求参数的数组
* @param {string} cgi 请求串
* @return {String} queryString部分字符串
* @example ： param1=value1¶m2=value2¶m3=value3......
*/
function convert_params(params, cgi){
var paramsArray = [];
for (var name in params) {
if (paramsArray.length == 0) {
cgi && cgi.indexOf('?') != -1 ? paramsArray.push("&") : paramsArray.push("?");
}
else {
paramsArray.push("&");
}
paramsArray.push(name);
paramsArray.push("=");
paramsArray.push(params[name]);
}
return paramsArray.join("");
}
console.log(convert_params({"param": "value1", "param2": "value2"}, "/cgi-bin/"));
// ?param=value1¶m2=value2
console.log(convert_params({"param": "value1", "param2": "value2"}, "/cgi-bin/?page=1"));
// ¶m=value1¶m2=value2
function isEmptyObj(obj){
for(var name in obj) {
return false;
}
return true;
}
console.log(isEmptyObj({})); //true
console.log(isEmptyObj({name: "ivan"})); //false
/**
* @description 解析url
* @param {String} 请求url串
* @return
* @type Object
* @example parse_url('http://www.xuanfengge.com/index?app_id=110000011')
*/
function parse_url(url){
var host, path, search, hash, param = {};
if(url === undefined) {
var loc = window.location;
host = loc.host;
path = loc.pathname;
search = loc.search.substr(1);
hash = loc.hash;
} else {
var ret = url.match(/\w+:\/\/((?:[\w-]+\.)+\w+)(?:\:\d+)?(\/[^\?\\\"\'\|\:<>]*)?(?:\?([^\'\"\\<>#]*))?(?:#(\w+))?/i) || [];
host = ret[1];
path = ret[2];
search = ret[3];
hash = ret[4];
}
search && function() {
var arr = search.split('&');
for(var i = 0, l = arr.length; i < l; i++) {
//var p=arr[i].split('=');
//param[p[0]]=p[1];
if(arr[i].indexOf('=') != -1) {
var pos = arr[i].indexOf('=');
var k = arr[i].slice(0, pos);
var v = arr[i].slice(pos + 1);
param[k] = v;
}
}
}();
return {
host : host,
path : path,
search : search,
hash : hash,
param : param
}
}
console.log(JSON.stringify(parse_url("http://www.xuanfengge.com/index?app_id=110000011")));
// {"host":"www.xuanfengge.com","path":"/index","search":"app_id=110000011","param":{"app_id":"110000011"}}
var cookie = {
getTopDomain : function() {
var top = window.location.host, list = {
'com.cn' : 1,
'net.cn' : 1,
'gov.cn' : 1,
'com.hk' : 1
}, arr = top.split('.');
//配置最常用的地区域名名单
arr.length > 2 && function() {
top = (list[arr.slice(-2).join('.')] ? arr.slice(-3) : arr.slice(-2)).join('.');
}();
return top;
},
get : function(key) {
var ret = document.cookie.match(new RegExp("(?:^|;\\s)" + key + "=(.*?)(?:;\\s|$)"));
return ret ? ret[1] : "";
},
save : function(key, value, expires) {
document.cookie = key + "=" + value + ";path=/;domain=" + this.getTopDomain() + ( expires ? ";expires=" + expires : '');
}
}
var userAgent = navigator.userAgent.toLowerCase();
$.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
var Converter = {
toInt: function(val){
return result = isNaN(val)? 0 : parseInt(val);
},
toFloat: function(val){
return result = isNaN(val)? 0 : parseFloat(val);
},
toDate: function(strDate){
var sDate = strDate.replace(/(^\s+|\s+$)/g,''); //去两边空格;
if(sDate==''){
return null;
}
var s = sDate.replace(/[\d]{4,4}[\-/]{1}[\d]{1,2}[\-/]{1}[\d]{1,2}/g, '');
if (s == '')
{
var t=new Date(sDate.replace(/\-/g,'/'));
var ar = sDate.split(/[-/:]/);
if(ar[0] == t.getFullYear() && ar[1] == t.getMonth() + 1 && ar[2] == t.getDate())
{
return t; //返回转化成功的日期对象
}
}
return null;
}
};
console.log(Converter.toInt("12.3"));
// 12
console.log(Converter.toFloat("12.36"));
// 12.36
console.log(Converter.toDate("2014/9/2"));
console.log(Converter.toDate("2014-9-2"));
console.log(Converter.toDate("2014-09-02"));
// Tue Sep 02 2014 00:00:00 GMT+0800 (中国标准时间)
/**
* @description 全屏遮罩层管理器
* @example mask.create();
*/
var mask = {
self : '',
isIE6 : $.browser.msie && $.browser.version < 7,
create : function() {
if(this.self && this.self.parent().length) {
return;
}
$(window).bind('resize.overlay', this.resize);
return (this.self = (this.self || $('<div></div>').css({
height : '100%',
left : 0,
position : 'absolute',
top : 0,
width : '100%',
background : '#000',
'opacity' : 0.3,
'z-index' : 2001
})).appendTo('body').css({
width : this.width(),
height : this.height()
}));
},
destroy : function() {
if(this.self && !this.self.parent().length) {
return;
}
$([document, window]).unbind('resize.overlay');
this.self.animate({
opacity : 'hide'
}, function() {
$(this).remove().show();
});
},
resize: function() {
var _mask = mask;
_mask.self.css({
width: 0,height: 0
}).css({
width: _mask.width(),height: _mask.height()
});
},
height : function() {
var scrollHeight, offsetHeight;
if(this.isIE6) {
scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
if(scrollHeight < offsetHeight) {
return $(window).height() + 'px';
} else {
return scrollHeight + 'px';
}
} else {
return $(document).height() + 'px';
}
},
width : function() {
var scrollWidth, offsetWidth;
if(this.isIE6) {
scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);
if(scrollWidth < offsetWidth) {
return $(window).width() + 'px';
} else {
return scrollWidth + 'px';
}
} else {
return $(document).width() + 'px';
}
}
}
// demo
mask.create();
setTimeout(function(){
mask.destroy()
}, 1000);查看更多本系列文章：JS手记