我在项目中常用的一些技js方法(因为是我自己用的所以某些方法不是很严谨 见谅 另外就是提供个参考)
1.阻止事件
//阻止事件冒泡
function stopBubble(e) {
var evt = e ? e : window.event;
//如果提供了事件对象,则这是一个非IE浏览器
if (evt.stopPropagation)
//因此它支持W3C的stopPropagation()方法
evt.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
evt.cancelBubble = true;
}
//阻止浏览器的默认行为
function stopDefault(e) {
var evt = e ? e : window.event;
//阻止默认浏览器动作(W3C)
if (evt.preventDefault )
evt.preventDefault();
//IE中阻止函数器默认动作的方式
else
evt.returnValue = false;
return false;
}
2.获取地址栏参数
/**
* 获取地址栏参数
* @param{string} name参数名称
*/
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
};
3.地址栏参数拼接(添加)
/**
* 地址参数拼接
* @param{string} url 链接
* @param{string} name 参数key
* @param{string} value 参数value
*/
function urlUpdateParams(url, name, value) {
var r = url;
if(r != null && r != 'undefined' && r != "") {
value = encodeURIComponent(value);
var reg = new RegExp("(^|)" + name + "=([^&]*)(|$)");
var tmp = name + "=" + value;
if(url.match(reg) != null) {
r = url.replace(eval(reg), tmp);
} else {
if(url.match("[\?]")) {
r = url + "&" + tmp;
} else {
r = url + "?" + tmp;
};
};
};
return r;
};
//eval(reg)这个方法可能不太符合规范 不过我现在一直在用 没发现什么问题
4.获取元素data属性
/**
* 获取元素data属性 并转换成json格式返回
* @param{string} elem js的element
*/
function parseDataAttr(elem) {
var options = {};
for(var opt in elem.dataset) {
if(elem.dataset.hasOwnProperty(opt)) {
try {
options[opt] = JSON.parse(elem.dataset[opt]);
} catch(_) {
options[opt] = elem.dataset[opt];
}
}
}
return options;
}
5.上传图片获取图片路径预览功能
//方法一
function getObjectURL(file) {
var url = null;
if(window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if(window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
};
return url;
};
//调用
function readFile(elem) {
var fileList = elem.files;
var imgSrc = getObjectURL(fileList[0]);
//如果需要展示当前选中的图片:
document.getElementsByTagName('img')[0].setAttribute('src',imgSrc)
}
//方法二
function readFile(obj) {
var _this = $(obj);
var fileList = obj.files;
if(!fileList[0])
return
var reader = new FileReader();
reader.readAsDataURL(fileList[0]);
reader.onload = function(e) {
//do something
document.getElementsByTagName('img')[0].setAttribute('src',imgSrc)
}
}
6.合并json数据(js方法)
//简单方法
var a = {a:1};
var b = {b:2};
var c = Object.assign(a,b); // 原对象改变
var d = Object.assign({},a,b); // 原对象不改变
//自己写个方法 很简陋 因为需求不高所以就没有些太复杂的
function extend(json1, json2) {
for(var p in json2) {
if(json2.hasOwnProperty(p))
json1[p] = json2[p];
}
return json1
}
7.数字保留两位小数
/**
* 保留两位小数 (不是很严谨)保留小数长度可更改
* @param{number} val 需要保留长度的数字
* @param{element} el 当前输入框元素
* @param{number} leave 保留小数的长度不传默认为2
*/
function leaveTwinNum(val, el, leave) {
var num = 2
if(leave && myPack.verify.numberVer(leave)) {
num = leave;
};
if(isNaN(val)) {
el.val("");
return;
};
var str = val.toString().split(".")[1];
if(str) {
if(str.length > num) {
var be = val.toString().split(".")[0];
el.val(be + '.' + str.substring(0, num));
};
};
};
8.移除数组中的某个值
/**
* 移除数组中的某个值
* @param{object} array 数组
* @param{number||str} tag需要移除的目标
*/
function remove_array(array, tag) {
for(var i = 0; i < array.length; i++) {
var temp = array[i];
if(!isNaN(tag)) {
temp = i;
};
if(temp == tag) {
for(var j = i; j < array.length; j++) {
array[j] = array[j + 1];
};
array.length = array.length - 1;
};
};
}
9.判断数组中是否存在某个值
/**
* 判断数组中是否存在某个值
* @param{object} array 数组
* @param{number||str} tag 需要判断的目标
*/
function in_array(array, tag) {
for(var i = 0; i < array.length; i++) {
if(array[i] == tag) {
return true;
};
};
return false;
};
10封装localStorage和sessionStorage
//封装storage
var Storage = {
getStorage: function(key) {
var value = localStorage.getItem(key);
if(value) {
try {
var value_json = JSON.parse(value);
if(typeof value_json === 'object') {
return value_json;
} else if(typeof value_json === 'number') {
return value_json;
}
} catch(e) {
return value;
}
} else {
return false;
}
},
setStorage: function(key, value) {
localStorage.setItem(key, value);
},
removeStorage: function(key) {
localStorage.removeItem(key);
},
clearStorage: function() {
localStorage.clear();
},
getSession: function(key) {
var value = sessionStorage.getItem(key);
if(value) {
try {
var value_json = JSON.parse(value);
if(typeof value_json === 'object') {
return value_json;
} else if(typeof value_json === 'number') {
return value_json;
}
} catch(e) {
return value;
}
} else {
return false;
}
},
setSession: function(key, value) {
sessionStorage.setItem(key, value);
},
removeSession: function(key) {
sessionStorage.removeItem(key);
},
clearSession: function() {
sessionStorage.clear();
}
};