原生JS兼容性工具库

(function (window) {
"use strict";
var $ = eventUtil = {};
//添加事件
eventUtil.addHander = function (element, type, hander) {
if (element.addEventListener) {
element.addEventListener(type, hander, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, hander);
} else {
element[‘on‘ + type] = hander;
}
},

//删除事件
eventUtil.removeHander = function (element, type, hander) {
if (element.removeEventListener) {
element.removeEventListener(type, hander, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, hander);
} else {
element[‘on‘ + type] = null;
}
},

//获取事件
eventUtil.getEvent = function (event) {
return event ? e : window.event;
},

//获取事件类型
eventUtil.getType = function (event) {
return event.type;
},

//获取事件目标
eventUtil.getElement = function (event) {
return event.target || event.srcElement;
},

//阻止事件的默认行为
eventUtil.preventDefault = function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},

//阻止事件冒泡
eventUtil.stopPropagation = function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},

//跨浏览器取得窗口左边和上边的位置
eventUtil.getPos=function(leftPos,rightPos){
leftPos=(typeof window.screenLeft==‘number‘)?window.screenLeft:window.screenX;
rightPos=(typeof window.screenTop==‘number‘)?window.screenTop:window.screenY;
},

//取得页面视口的大小
eventUtil.getRange=function(pageWidth,pageHeight){
var range={
pageWidth:window.innerWidth,
pageHeight:window.innerHeight,
};

if(typeof range.pageWidth!="number"){
//document.compatMode检查页面模式是否是标准模式
if(document.compatMode=="CSS1Compat"){
range.pageWidth=document.documentElement.clientWidth;
range.pageHeight=document.documentElement.clientHeight;
}else{
range.pageWidth=document.body.clientWidth;
range.pageHeight=document.body.clientHeight;
}
}
// //将arguments转换成数组,返回
// var argsArray = Array.prototype.slice.call(arguments);
// return argsArray;
//创建对象返回对象
return range;
}

//寄生组合式继承
eventUtil.inheritPrototype=function(subType,superType){
var prototype=Object.create(superType.prototype);
prototype.constractor=subType;
subType.prototype=prototype;
}

//将nodeList转换成一个数组
eventUtil.convertToArray=function(nodes){
var array=null;
try{
array=Array.prototype.slice.call(nodes,0);//针对非IE浏览器
}catch(ex){
array=new Array();
for(var i=0,len=nodes.length;i<len;i++){
array.push(nodes[i]);
}
}
return array;
}

//动态将外部JS脚本添加到<head>中
eventUtil.loadScript=function(url){
var script=document.createElement("script");
script.type="text/javascript";
script.src=url;
document.body.appendChild(script);
}

//将行内JS脚本添加到<head>中
eventUtil.loadScriptString=function(code){
var script=document.createElement("script");
script.type="text/javascript";
try{
script.appendChild(document.createTextNode("node"));
}catch(ex){
script.text="code";
}
document.body.appendChild(script);
}
//调用方式:loadScriptString("function sayhi(){alert(‘hi);}")

//将外部CSS文件添加到<head>中
eventUtil.loadStyle=function(url){
var link=document.createElement("link");
link.rel="stylesheet";
link.type="text/css";
link.href=url;
var head=document.getElementsByTagName("head")[0];
head.appendChild(link);
}

//将行内CSS文件添加到<head>中
eventUtil.loadStyleString=function(css){
var style=document.createElement("style");
script.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText=css;
}
var head=document.getElementsByTagName("head")[0];
head.appendChild(style);
}
//调用方式:loadStyleString("body{background-color:red;}")

eventUtil.matchesSelector=function(element,selector){
if(element.matchesSelector){
return element.matchesSelector(selector);
}else if(element.msMatchesSelecor){
return element.msMatchesSelecor(selector);
}else if(element.mozMatchesSelecor){
return element.mozMatchesSelecor(selector);
}else if(element.webkitMatchesSelecor){
return element.webkitMatchesSelecor(selector);
}else{
throw new Error("Not supported.");
}
}
//调用方式:if(eventUtil.matchesSelector(document.body,"body.page1")){//执行操作}

//获取head元素
eventUtil.getHead=function(h){
h=document.head||document.getElementsByTagName("head")[0];
return h;
}

//跨浏览器判断一个节点是不是另一个节点的后代
eventUtil.contains=function(refNode,otherNode){
if(typeof refNode.contains=="function"&&!(client.engine.webkit||client.engine.webkit>=52)){
return refNode.contains(otherNode);
}else if(typeof refNode.compareDocumentPosition=="function"){
return !!(typeof refNode.compareDocumentPosition(otherNode)&16);
}else{
var node=otherNode.parentNode;
do{
if(node==refNode){
return true;
}else{
node=node.parentNode;
}
}while(node!=null);
return false;
}
}

//跨浏览器插入文本节点
eventUtil.getInnerText=function(element,text){
if(typeof element.textContent=="string"){
element.textContent=text;
}else{
element.innerText=text;
}
}

//跨浏览器获取样式表对象
eventUtil.getStyleSheet=function(element){
return element.sheet||element.styleSheets;
}

//跨浏览器向样式表中添加规则
eventUtil.insertRule=function(sheet,selectorText,cssText,position){
if(sheet.insertRule){
sheet.insertRule(selectorText+"{"+cssText+"}",position);
}else if(sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
}
//调用实例:insertRule(document.styleSheets[0],"body","background-color:silver",0);

//跨浏览器删除样式规则
eventUtil.delectRule=function(sheet,index){
if(sheet.delectRule){
sheet.delectRule(index);
}else if(sheet.removeRule){
sheet.removeRule(index);
}
}

//取得元素的左偏移量
eventUtil.getElementLeft=function(element){
var actualLeft=element.offsetLeft;
var current=element.offsetParent;

while(current!==null){
actualLeft+=current.offsetLeft;
current=current.offsetParent;
}
return actualLeft;
}

//取得元素的上偏移量
eventUtil.getElementTop=function(element){
var actualTop=element.offsetTop;
var current=element.offsetParent;

while(current!==null){
actualTop+=current.offsetTop;
current=current.offsetParent;
}
return actualTop;
}

//跨浏览器取得文档的总的宽高
eventUtil.getWidthHeight=function(docHeight,docWidth){
var WH={
docHeight:Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight),
docWidth:Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth),
};
return WH;
}

//跨浏览器取得元素的宽高及位置等信息
eventUtil.getBoundingClientRect=function(element){
var scrollTop=document.documentElement.scrollTop;
var scrollLeft=document.documentElement.scrollLeft;

if(element.getBoundingClientRect){
if(typeof arguments.callee.offset!="number"){
var temp=document.createElement("div");
temp.style.cssText="position:absolute;left:0;top:0;";
document.body.appendChild(temp);
arguments.callee.offset=-temp.getBoundingClientRect().top=scrollTop;
document.body.removeChild(temp);
temp=null;
}

var rect=element.getBoundingClientRect();
var offset=arguments.callee.offset;

return {
left:rect.left+offset,
right:rect.right+offset,
top:rect.top+offset,
bottom:rect.bottom+offset,
};
}else{
var actualLeft=getElementLeft(element); //getElementLeft()取得元素的左偏移量
var actualTop=getElementTop(element);//getElementTop()取得元素的上偏移量

return {
left:actualLeft-scrollLeft,
right:actualLeft+element.offsetWidth-scrollLeft,
top:actualTop-scrollTop,
bottom:actualTop+element.offsetHeight-scrollTop,
}
}
}

//兼容低版本创建XMLHttpRequest对象(XHR)
eventUtil.createXHR=function(){
if(typeof XMLHttpRequest!="undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject!="undefined"){
if(typeof arguments.callee.activeXString!="string"){
var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
i,len;
for(i=0,len=versions.length;i<len;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString=versions[i];
break;
}catch(ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR object available.");
}
}

//兼容requestAnimationFrame()
eventUtil.requestNextAnimationFrame = (function () {
var originalWebkitRequestAnimationFrame = undefined,
wrapper = undefined,
callback = undefined,
geckoVersion = 0,
userAgent = navigator.userAgent,
index = 0,
self = this;

// Workaround for Chrome 10 bug where Chrome
// does not pass the time to the animation function

if (window.webkitRequestAnimationFrame) {
// Define the wrapper

wrapper = function (time) {
if (time === undefined) {
time = +new Date();
}
self.callback(time);
};

// Make the switch

originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;

window.webkitRequestAnimationFrame = function (callback, element) {
self.callback = callback;

// Browser calls the wrapper and wrapper calls the callback

originalWebkitRequestAnimationFrame(wrapper, element);
}
}

// Workaround for Gecko 2.0, which has a bug in
// mozRequestAnimationFrame() that restricts animations
// to 30-40 fps.

if (window.mozRequestAnimationFrame) {
// Check the Gecko version. Gecko is used by browsers
// other than Firefox. Gecko 2.0 corresponds to
// Firefox 4.0.

index = userAgent.indexOf(‘rv:‘);

if (userAgent.indexOf(‘Gecko‘) != -1) {
geckoVersion = userAgent.substr(index + 3, 3);

if (geckoVersion === ‘2.0‘) {
// Forces the return statement to fall through
// to the setTimeout() function.

window.mozRequestAnimationFrame = undefined;
}
}
}

return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||

function (callback, element) {
var start,
finish;

window.setTimeout(function () {
start = +new Date();
callback(start);
finish = +new Date();

self.timeout = 1000 / 60 - (finish - start);

}, self.timeout);
};
}());

window.cancelNextRequestAnimationFrame = window.cancelRequestAnimationFrame
|| window.webkitCancelAnimationFrame
|| window.webkitCancelRequestAnimationFrame
|| window.mozCancelRequestAnimationFrame
|| window.oCancelRequestAnimationFrame
|| window.msCancelRequestAnimationFrame
|| clearTimeout;

window.$ = $;
})(window)
时间: 2024-10-21 22:00:43

原生JS兼容性工具库的相关文章

js常用工具库XCLJsTool v1.0发布

最近有空,整了一个js的工具库,还没有正式用于项目中,自己也没有时间写测试用例,想了一下,还是贴出来给大家看看,如果有问题,请留言,非常感谢!项目我放在了github上面,会经常更新的,过段时间会发布一版! /** * 欢迎使用本程序,您可以任意修改.复制.分享本程序所有代码,只需要保留本注释即可,谢谢! * 项目地址:<span style="color:#ff0000;">https://github.com/xucongli1989/XCLJsTool</spa

lodash (js实用工具库)

是什么? 它提供了一整套函数式编程的实用功能, 并且支持模块化, 比underscore更优秀. 文档? http://lodashjs.com/docs/ 引用? <script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script> ;

我用的一些Node.js开发工具、开发包、框架等总结

开发工具 1.WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢. 2.做些小型项目用Sublime Text. 3.Browserify:将你的nodejs模块应用到浏览器中 4.nvm:nodejs版本管理工具,你可能会用到多个nodejs版本(如v0.11.x支持generator的nodejs和stable的v0.10.x版本),用它可以方便切换 测试&自动化 1.mocha:一个简单.灵活有趣的 JavaScript

封装自己的Common.js工具库

Code/** * Created by LT on 2013/6/16. * Common.js * 对原生JS对象的扩展 * Object.Array.String.Date.Ajax.Cookie */ ;(function(){ Object.extend =function(targetObj,fnJson){ for(var fnName in fnJson){ targetObj[fnName]=fnJson[fnName]; } return targetObj; }; /**

原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题

原生js方法“document.getElementsByClassName”在ie8及其以下浏览器中,不能使用. 修改:加入兼容性判断,在需要用到该方法的位置修改为getClassNames方法. 代码如下: 原来方法: document.getElementsByClassName('tabs_div'): 这里的调用方法为:getClassNames('tabs_div' , 'div'): var divs = getClassNames('tabs_div' , 'div'); fun

JS工具库之Lodash

破狼 JavaScript工具库之Lodash 2015-04-11 16:08 by 破狼, 235 阅读, 2 评论, 收藏, 编辑 你还在为JavaScript中的数据转换.匹配.查找等烦恼吗?一堆看似简单的foreach,却冗长无趣,可仍还在不停的repeat it!也许你已经用上了Underscore.js,不错,你已经进步很大一步了.然而今天我希望你能更进一步,利用lodash替换掉Underscore. lodash一开始是Underscore.js库的一个fork,因为和其他(U

CSV.js – 用于 CSV 解析和编码的 JS 工具库

逗号分隔值(CSV )文件用于以以纯文本的形式存储表格化数据(数字和文本). CSV 文件包含任意数量的记录,通过某种换行符分隔,每条记录由字段,其他一些字符或字符串分隔,最常用的是文字逗号或制表符.CSV.js 是一个简单,超快的用于 CSV 解析和编码的 JavaScript 工具库,兼容浏览器,AMD 和 NodeJS 环境. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[附源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12款经典的白富美型 jQuery 图片

js基础和工具库

1 /* 2 * 3 * 2015/4/18 4 * js 基础 和 工具库 5 * 6 * 7 * */ 8 //获取对象样式 9 function hGetStyle(obj , attr){ 10 return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj ,null )[attr]; 11 } 12 13 //移动函数 14 function hDoMove(obj , attr ,s ,target ,

原生js格式化json工具

json格式化小工具,原生js编写,直接上代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>原生js格式化json的方法</title> 6 <script> 7 //格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好 8 var formatJson =