// 判断是否是一个数组
function isArray(arr) {
return Object.prototype.toString.call(arr) === '[object Array]';
}
// 判断fn是否为一个函数，返回一个bool值
function isFunction(fn) {
return Object.prototype.toString.call(fn) === '[object Function]';
}
// 使用递归来实现一个深度克隆，可以复制一个目标对象，返回一个完整拷贝
// 被复制的对象类型会被限制为数字、字符串、布尔、日期、数组、Object对象。不会包含函数、正则对象等
function cloneObject(src) {
var o = src instanceof Array ? [] : {};
//空数组或对象容器
for (var k in src)
o[k] = typeof src[k] === Object ? cloneObject(src[k]) : src[k];
return o;
}
// 测试用例：
var srcObj = {
a: 1,
b: {
b1: ["hello", "hi"],
b2: "JavaScript"
}
};
var abObj = srcObj;
var tarObj = cloneObject(srcObj);
srcObj.a = 2;
srcObj.b.b1[0] = "Hello";
abObj.a;
abObj.b.b1[0];
tarObj.a; // 1
tarObj.b.b1[0]; // "hello"
// 对数组进行去重操作，只考虑数组中元素为数字或字符串，返回一个去重后的数组
function uniqArray(arr) {
var o = {};
var newarray = [];
for (var i = 0; i < arr.length; i++) {
if (!o[arr[i]]) {
newarray.push(arr[i]);
o[arr[i]] = true;
}
}
return newarray;
}
// 使用示例
var a = [1, 3, 5, 7, 5, 3];
var b = uniqArray(a);
b // [1, 3, 5, 7]
// 对字符串头尾进行空格字符的去除、包括全角半角空格、Tab等，返回一个字符串
// 尝试使用一行简洁的正则表达式完成该题目
function trim(str) {
return str.replace(/\s*/g, '');
}
// 使用示例
var str = ' hi! ';
str = trim(str);
str; // 'hi!'
// 实现一个遍历数组的方法，针对数组中每一个元素执行fn函数，并将数组索引和元素作为参数传递
function each(arr, fn) {
var x;
for (var i = 0; i < arr.length; i++) {
x = arr[i];
(function(x, i) {
fn.call(this, x, i);
})(x, i);
}
}
function each(arr, fn) {
for (var i in arr) {
fn(arr[i], i);
}
}
// 其中fn函数可以接受两个参数：item和index
// 使用示例
var arr = ['java', 'c', 'php', 'html'];
function output(item) {
console.log(item);
}
each(arr, output); // java, c, php, html
// 使用示例
var arr = ['java', 'c', 'php', 'html'];
function output(item, index) {
console.log(index + ': ' + item);
}
each(arr, output); // 0:java, 1:c, 2:php, 3:html
// 获取一个对象里面第一层元素的数量，返回一个整数
function getObjectLength(obj) {
var arr = [];
for (var i in obj) {
arr.push(i);
}
return arr.length;
}
// 获取一个对象里面第一层元素的数量，返回一个整数
function getObjectLength(obj) {
var num = 0;
for (var i in obj) {
if (obj.hasOwnProperty(i)) { // 不去遍历继承来的对象的属性
num++;
}
}
return num;
}
var obj = {
a: 1,
b: 2,
c: {
c1: 3,
c2: 4
}
};
getObjectLength(obj);
// 使用示例
var obj = {
a: 1,
b: 2,
c: {
c1: 3,
c2: 4
}
};
console.log(getObjectLength(obj)); // 3
// 判断是否为邮箱地址
function isEmail(emailStr) {
return /^([\w\d_-])+@([\w\d_-])+((\.[\w\d_-]{2,3}){1,2})$/.test(emailStr);
}
isEmail('test11@test11.com');
// 判断是否为手机号
function isMobilePhone(phone) {
return /1[3|5|7|8|][0-9]{9}/.test(phone);
}
isMobilePhone(18611111111);
// DOM
// 判断元素是否有类名
function hasclass(element, className) {
classNamesList = element.className.split(" ");
if (classNamesList.indexOf(className) === -1) {
return false;
} else {
return true;
}
}
// 为element增加一个样式名为newClassName的新样式
function addClass(element, newClassName) {
if (!hasclass(element, newClassName)) {
element.className += ' ' + newClassName;
}
}
// 移除element中的样式oldClassName
function removeClass(element, oldClassName) {
if (hasclass(element, oldClassName)) {
element.className = element.className.replace(oldClassName, '');
}
}
// 判断siblingNode和element是否为同一个父元素下的同一级的元素，返回bool值
function isSiblingNode(element, siblingNode) {
return element.parentNode === siblingNode.parentNode;
}
// 获取element相对于浏览器窗口的位置，返回一个对象{x, y}
function getPosition(element) {
var actualLeft = element.offsetLeft;
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null) {
actualLeft += current.offsetLeft;
actualTop += current.offsetTop;
current = current.offsetParent;
}
if (document.compatMode == "BackCompat") {
var elementScrollLeft = document.body.scrollLeft;
var elementScrollTop = document.body.scrollTop;
} else {
var elementScrollLeft = document.documentElement.scrollLeft;
var elementScrollTop = document.documentElement.scrollTop;
}
actualLeft -= elementScrollLeft;
actualTop -= elementScrollTop;
return {
x: actualLeft,
y: actualTop
}
}
// 实现一个简单的Query
function $(selector) {
return document.querySelector(selector);
}
// 可以通过id获取DOM对象，通过#标示，例如
$("#adom"); // 返回id为adom的DOM对象
// 可以通过tagName获取DOM对象，例如
$("a"); // 返回第一个<a>对象
// 可以通过样式名称获取DOM对象，例如
$(".classa"); // 返回第一个样式定义包含classa的对象
// 可以通过attribute匹配获取DOM对象，例如
$("[data-log]"); // 返回第一个包含属性data-log的对象
// $("[data-time=2015]");
// 返回第一个包含属性data-time且值为2015的对象
// 可以通过简单的组合提高查询便利性，例如
// $("#adom .classa"); // 返回id为adom的DOM所包含的所有子节点中，第一个样式定义包含classa的对象
// 事件
// 给一个element绑定一个针对event事件的响应，响应函数为listener
function addEvent(element, event, listener) {
element['on' + event] = listener;
}
// 移除element对象对于event事件发生时执行listener的响应
function removeEvent(element, event, listener) {
element['on' + event] = null;
}
// 实现对click事件的绑定
function addClickEvent(element, listener) {
element['onclick'] = listener;
}
// 实现对于按Enter键时的事件绑定
function addEnterEvent(element, listener) {
element.onkeydown = function(e) {
e = e || window.event;
if (e.keyCode === 13) {
listener();
}
}
}
// 事件代理
function delegateEvent(element, tag, eventName, listener) {
element['on' + eventName] = function(e) {
var e = e || window.event;
var target = e.srcElement ? e.srcElement : e.target;
var tname = target.nodeName.toLowerCase();
if (tname === tag) {
target['on' + eventName] = listener;
}
}
}
// BOM
// 判断是否为IE浏览器，返回-1或者版本号
function isIE() {
var ua = navigator.userAgent.toLowerCase();
var ie = ua.match(/rv:([\d.]+)/) || ua.match(/msie ([\d.]+)/);
if (ie) {
return ie[1];
} else {
return -1;
}
}
// 判断浏览器及版本号
function whichBrower() {
var Sys = {};
var s;
var ua = navigator.userAgent.toLowerCase();
(s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1]:
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
if (Sys.ie) {
return 'IE' + Sys.ie;
} else if (Sys.firefox) {
return 'FireFox' + Sys.firefox;
} else if (Sys.chrome) {
return 'Chrome' + Sys.chrome;
} else if (Sys.opera) {
return 'Opera' + Sys.opera;
} else if (Sys.safari) {
return 'Safari' + Sys.safari;
} else {
return false;
}
}
// 设置cookie
/*\
|*|
|*| :: cookies.js ::
|*|
|*| A complete cookies reader/writer framework with full unicode support.
|*|
|*| https://developer.mozilla.org/en-US/docs/DOM/document.cookie
|*|
|*| This framework is released under the GNU Public License, version 3 or later.
|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
|*| Syntaxes:
|*|
|*| * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
|*| * docCookies.getItem(name)
|*| * docCookies.removeItem(name[, path], domain)
|*| * docCookies.hasItem(name)
|*| * docCookies.keys()
|*|
\*/
var docCookies = {
getItem: function(sKey) {
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
setItem: function(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) {
return false;
}
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
removeItem: function(sKey, sPath, sDomain) {
if (!sKey || !this.hasItem(sKey)) {
return false;
}
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
return true;
},
hasItem: function(sKey) {
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
},
keys: /* optional method: you can safely remove it! */ function() {
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (var nIdx = 0; nIdx < aKeys.length; nIdx++) {
aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]);
}
return aKeys;
}
};
// 学习Ajax，并尝试自己封装一个Ajax方法。
function ajax(url, options) {
// 创建对象
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
// 处理data
if (options.data) {
var dataarr = [];
for (var item in options.data) {
dataarr.push(item + '=' + options.data[item]);
}
var data = dataarr.join('&');
}
// 处理type
if (!options.type) {
options.type = 'GET';
}
options.type = options.type.toUpperCase();
// 发送请求
if (options.type === 'GET') {
var myURL = '';
if (options.data) {
myURL = url + '?' + data;
} else {
myURL = url;
}
xmlhttp.open('GET', myURL, true);
xmlhttp.send();
} else if (options.type === 'POST') {
xmlhttp.open('POST', url, true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(data);
}
// readyState
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4) {
if (xmlhttp.status === 200) {
if (options.onsuccess) {
options.onsuccess(xmlhttp.responseText, xmlhttp.responseXML);
}
} else {
if (options.onfail) {
options.onfail();
}
}
}
}
}
function ajax(obj) {
var xhr = (function() {
/*创建XMLHttpRequest对象*/
if (XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
} else if (ActiveXObject) {
// code for IE6, IE5
var version = [
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp'
];
for (var i = 0; version.length; i++) {
try {
return new ActiveXObject(version[i]);
} catch (e) {
//跳过
}
}
} else {
throw new Error('您的系统或浏览器不支持XHR对象！');
}
})();
// url加随机参数，防止缓存
obj.url = obj.url + '?rand=' + Math.random();
// 请求参数格式化，encodeURIComponent编码参数可以出现&
obj.data = (function(data) {
var arr = [];
for (var i in data) {
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
})(obj.data);
if (obj.method === 'get')
obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
if (obj.async === true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
callback();
}
};
}
xhr.open(obj.method, obj.url, obj.async);
if (obj.method === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data);
} else {
xhr.send(null);
}
if (obj.async === false) {
callback();
}
function callback() {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
obj.success(xhr.responseText); // 回调传递参数
} else {
alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);
}
}
}
util 常用工具方法
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- ArrayUtils.isEmpty(strs) : 判断数组是否为空 , 不为空返回false,为空true A...
- 以下是自己在开发中，比较常用的方法，而且可以避免普通字符串方法的null异常1、StringUtils.isEmp...
