Util.js

发表于   |   分类于 ，   |     |   阅读次数

Util.js

JavaScript基础工具类，针对不同版本浏览器内核兼容性提供方便的API

下载

  1. Fork到你的Git仓库，然后检出到你本地即可。
  2. 点击这里，下载ZIP压缩版.

使用

1
2
3
4
5
6
<script type="text/javascript" src="scripts/Util.js"></script>
<script>
	util.event.addHandler(window,'scroll',function(){
		// code.....
	});
</script>

or

1
2
3
4
var util = require('Util.js');
util.event.addHandler(window,'scroll',function(){
	// code.....
});

基础工具类APIs

event(事件)

该对象中包括了对于JS事件操作的相关APIs，兼容DOM0级，DOM1级，DOM3级事件规范。

addHandler(element,type,handler)

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 添加事件监听
 * @param element[Element]             待添加事件监听的element对象
 * @param type[String]                 DOM事件规范中的事件类型
 * @param handler[Function]            回掉函数
 * @return [Element]                   待添加事件监听的element对象
 **/
function addHandler(element,type,handler){}
eg:
	util.event.addHandler(window,'scroll',function(){
		// code.....
	});

removeHandler(element,type,handler)

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 移除事件监听
 * @param element[Element]             待移除事件监听的element对象
 * @param type[String]                 DOM事件规范中的事件类型
 * @param handler[Function]            回掉函数
 * @return [Element]                   待移除事件监听的element对象
 **/
function removeHandler(element,type,handler){}
eg:
	util.event.removeHandler(window,'scroll',function(){
		// code.....
	});

getEvent(event)

1
2
3
4
5
6
7
8
9
10
11
/**
 * 获取事件event对象
 * @param event[event]             事件监听回调函数中的event对象
 * @return [event]                 event的对象
 **/
function getEvent(event){}
eg:
	util.event.addHandler(window,'scroll',function(e){
		e = util.event.getEvent(e);
	});

getTarget(event)

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 获取事件target对象
 * @param event[event]             事件监听回调函数中的event对象
 * @return [target]                target的对象
 **/
function getTarget(event){}
eg:
	util.event.addHandler(window,'scroll',function(e){
		e = util.event.getEvent(e);
		var target = util.event.getTarget(e);
	});

preventDafult(event)

1
2
3
4
5
6
7
8
9
10
11
/**
 * 阻止默认事件
 * @param event[event]             事件监听回调函数中的event对象
 **/
function preventDafult(event){}
eg:
	util.event.addHandler(window,'scroll',function(e){
		e = util.event.getEvent(e);
		preventDafult(e);
	});

stopPropagation(event)

1
2
3
4
5
6
7
8
9
10
11
/**
 * 阻止事件冒泡
 * @param event[event]             事件监听回调函数中的event对象
 **/
function stopPropagation(event){}
eg:
	util.event.addHandler(window,'scroll',function(e){
		e = util.event.getEvent(e);
		stopPropagation(e);
	});

getMouseButton(event)

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 获取鼠标按键键值
 * @param event[event]    事件监听回调函数中的event对象
 * @return [Number]       0:左键、1：滑轮键、3：右键
 **/
function getMouseButton(event){}
eg:
	util.event.addHandler(window,'scroll',function(e){
		e = util.event.getEvent(e);
		if(getMouseButton(e) == 1){
			//code...
	});

getWheelDelta(event)

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 鼠标滚轮事件的wheelDelta属性
 * @param event[event]    事件监听回调函数中的event对象
 * @return [Number]       
 **/
function getWheelDelta(event){}
eg:
	util.event.addHandler(window,'scroll',function(e){
		e = util.event.getEvent(e);
		if(getWheelDelta(e) == 120){
			//code...
	});

说明

  • 当鼠标向前滚动时，wheelDelta是120的倍数；
  • 当鼠标向后滚动时，wheelDelta是-120的倍数；

getCharCode(event)

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 获取键盘键值
 * @param event[event]    事件监听回调函数中的event对象
 * @return [Number]       键盘键值
 **/
function getCharCode(event){}
eg:
	util.event.addHandler(window,'scroll',function(e){
		e = util.event.getEvent(e);
		if(getCharCode(e) == 13){
			//code...
	});

getPageX(event)

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 获取键盘键值
 * @param event[event]    事件监听回调函数中的event对象
 * @return [Number]       
 **/
function getPageX(event){}
eg:
	util.event.addHandler(window,'scroll',function(e){
		e = util.event.getEvent(e);
		if(getPageX(e) == 500){
			//code...
	});

getPageY(event)

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 获取键盘键值
 * @param event[event]    事件监听回调函数中的event对象
 * @return [Number]       
 **/
function getPageY(event){}
eg:
	util.event.addHandler(window,'scroll',function(e){
		e = util.event.getEvent(e);
		if(getPageY(e) == 1000){
			//code...
	});
  • IE8及以前的浏览器的event不支持pageX属性，此方法为了箭筒IE8-。
  • pageX/Y与clientX/Y的区别就是，pageX/Y包含滚轮卷进去的部分。

dom

该对象中包括了对于JS DOM对象操作的相关APIs，兼容DOM0级，DOM1级，DOM3级事件规范。

getFirstChild(node)

1
2
3
4
5
6
7
8
9
10
/**
    * 获取DOM节点第一个子节点
    * @param  node[Object]      节点对象
    * @return [Object]          第一个子节点
    */
function getFirstChild(node){}
eg:
	var node = document.querySelector('body');
	util.dom.getFirstChild(node);

getLastChild(node)

1
2
3
4
5
6
7
8
9
10
/**
    * 获取DOM节点最后一个子节点
    * @param  node[Object]      节点对象
    * @return [Object]          最后一个子节点
    */
function getLastChild(node){}
eg:
	var node = document.querySelector('body');
	util.dom.getLastChild();

getNextSibling(node)

1
2
3
4
5
6
7
8
9
10
/**
    * 获取DOM节点下一个兄弟节点
    * @param  node[Object]      节点对象
    * @return [Object]          下一个兄弟节点
    */
function getNextSibling(node){}
eg:
	var node = document.querySelector('.container');
	util.dom.getNextSibling(node);

getPreviousSibling(node)

1
2
3
4
5
6
7
8
9
10
/**
    * 获取DOM节点下一个兄弟节点
    * @param  node[Object]      节点对象
    * @return [Object]          下一个兄弟节点
    */
function getPreviousSibling(node){}
eg:
	var node = document.querySelector('.container');
	util.dom.getPreviousSibling(node);

getChildNodes(node)

1
2
3
4
5
6
7
8
9
10
/**
    * 获取DOM节点获取所有子节点
    * @param  node[Object]      节点对象
    * @return [Array]           返回子节点数组
    */
function getChildNodes(node){}
eg:
	var node = document.querySelector('.container');
	util.dom.getChildNodes(node);

getChildNodes2(node)

1
2
3
4
5
6
7
8
9
10
/**
    * 实现去除childNodes的空白节点的实现
    * @param  node[Object]      节点对象
    * @return [Array]           返回子节点数组
    */
function getChildNodes2(node){}
eg:
	var node = document.querySelector('.container');
	util.dom.getChildNodes2(node);

nodeListToArray(node)

1
2
3
4
5
6
7
8
9
10
/**
    * NodeList类数组转为Array
    * @param  nodeList[NodeList]      类数组
    * @return [Array]             返回数组
    */
function nodeListToArray(nodeList){}
eg:
	var nodeList = document.querySelectorAll('div');
	util.dom.nodeListToArray(nodeList);

getStyle(node,attr)

1
2
3
4
5
6
7
8
9
10
11
/**
    * 获取css样式
    * @param  node[Object]        节点对象
    * @param  attr[String]        css属性名
    * @return                     css属性值
    */
function getStyle(node,attr){}
eg:
	var node = document.querySelector('div');
	util.dom.getStyle(node,'background-color');

bom

该对象中包括了对于JS BOM对象兼容操作的相关APIs

getScreenLeft()

1
2
3
4
5
6
7
8
/**
    * 获取浏览器窗口距离屏幕左边缘的距离
    * @return [Number]          
    */
function getScreenLeft(){}
eg:
	util.bom.getScreenLeft();

getScreenTop()

1
2
3
4
5
6
7
8
/**
    * 获取浏览器窗口距离屏幕上边缘的距离
    * @return [Number]          
    */
function getScreenTop(){}
eg:
	util.bom.getScreenTop();

getPageWidth()

1
2
3
4
5
6
7
8
/**
    * 获取浏览器窗口宽度
    * @return [Number]          
    */
function getPageWidth(){}
eg:
	util.bom.getPageWidth();

getPageHeight()

1
2
3
4
5
6
7
8
/**
    * 获取浏览器窗口高度
    * @return [Number]          
    */
function getPageHeight(){}
eg:
	util.bom.getPageHeight();

getScrollTop()

1
2
3
4
5
6
7
8
/**
    * 获取滚动条距离页面顶端的距离
    * @return [Number]          
    */
function getScrollTop(){}
eg:
	util.bom.getScrollTop();

getScrollLeft()

1
2
3
4
5
6
7
8
/**
    * 获取滚动条距离页面左边的距离
    * @return [Number]          
    */
function getScrollLeft(){}
eg:
	util.bom.getScrollLeft();

该对象中包括了对于本地cookie操作的相关APIs

addCookie(name,value,days)

1
2
3
4
5
6
7
8
9
10
11
/**
    * 插入一条数据到cookie
    * @param name[String]    待插入cookie中的数据key值
    * @param value[All]      待插入cookie中的数据value值
    * @param days[Number]    待插入cookie中的数据保存时间（天）
    * @return [Boolean]          
    */
function addCookie(name,value,days){}
eg:
	util.cookie.addCookie('myCookie',data,3);

removeCookie(name)

1
2
3
4
5
6
7
8
9
/**
    * 从cookie中删除一条数据
    * @param name[String]    待删除cookie中的数据key值
    * @return [Boolean]          
    */
function removeCookie(name){}
eg:
	util.cookie.removeCookie('myCookie');

getCookie(name)

1
2
3
4
5
6
7
8
9
/**
    * 从cookie中获取一条cookie
    * @param name[String]    待获取cookie中的数据key值
    * @return         
    */
function getCookie(name){}
eg:
	util.cookie.getCookie('myCookie');

random

该对象中包括了一个产生随机数的方法

getRandom(num1,num2)

1
2
3
4
5
6
7
8
9
10
/**
    * 产生一个包括边界的随机数
    * @param num1[Number]    
    * @param num2[Number]    
    * @return [Number]          
    */
function getRandom(num1,num2){}
eg:
	util.random.getRandom(1,20);

ajax

该对象中包括ajax相关的APIs

getXHR()

1
2
3
4
5
6
7
8
/**
    * 获取XMLHttpRequest对象 
    * @return [Object]       XMLHttpRequest对象    
    */
function getXHR(){}
eg:
	util.ajax.getXHR();

getAjaxJsonData(data)

1
2
3
4
5
6
7
8
/**
    * 对ajax返回的JSON字符串数据转为JSON格式的JS对象
    * @return [Object]       XMLHttpRequest对象    
    */
function getAjaxJsonData(data){}
eg:
	util.ajax.getAjaxJsonData(data);
测试功能而已，你非要赏点我就没办法了...