javaScript函数封装
本篇封装了一些常用的函数，兼容IE8及以下的浏览器，怪异模式。
按需加载loadScript（）、绑定事件处理函数addEvet()、查看滚动尺寸getScrollOffset()、查看可视区窗口尺寸getViewportOffset()、返回计算样式getStyle()、获取事件源对象getEventScr(e)、判断类型type()、取消冒泡stopBubble()、深度克隆deepClone()、阻止默认事件cancelHandler()、字节长度排序retBytes()、拖拽方块drag()
按需加载loadScript（）
方法一：函数传入一个匿名函数，在该函数参数传入需要执行的参数
function loadScript(url,callback){
var script=document.createElement('script');
script.type='text/javascript';
if(script.readyState){
script.onreadystatechange=function (){
if(script.readyState=='complete'||script.readyState=='loaded'){
callback();
}
}
}else{
script.onload=function (){
callback();
}
}//先启动监听事件后下载
script.src=url;
document.head.appendChild(script);
}
//执行函数需注意
loadScript('demo.js',function(){test()});
方法二：参数传入字符串形式
function loadScript(url,callback){
var script=document.createElement('script');
script.type='text/javascript';
if(script.readyState){
script.onreadystatechange=function (){
if(script.readyState=='complete'||script.readyState=='loaded'){
eval(callback);
}
}
}else{
script.onload=function (){
eval(callback);;
}
}//先启动监听事件后下载
script.src=url;
document.head.appendChild(script);
}
//执行函数需注意参数传入字符串形式
loadScript('demo.js','test()');
方法三：适合传入一个tools工具库，执行工具库中的某个函数
function loadScript(url,callback){
var script=document.createElement('script');
script.type='text/javascript';
if(script.readyState){
script.onreadystatechange=function (){
if(script.readyState=='complete'||script.readyState=='loaded'){
tools[callback]();
}
}
}else{
script.onload=function (){
tools[callback]();
}
}//先启动监听事件后下载
script.src=url;
document.head.appendChild(script);
}
//执行函数需注意参数传入字符串形式
loadScript('demo.js','test');
最后的封装：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body> <script type="text/javascript">
//按需加载 执行js函数
function loadScript(url, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
//ie浏览器监测的方法
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == 'complete' || script.readyState == 'loaded') {
callback();
}
}
} else {
//chrome、Firefox、Safari、Opera浏览器的方法
script.onload = function () {
callback();
}
}
script.src = url;//先绑定监测的事件，再加载URL。假设下载速度比电脑运行还快的情况
document.head.appendChild(script);
}
// 分界线--------------------------------
//执行需注意url是字符串。函数需传一个匿名函数包裹该test()进去，因为代码未加载就解析test会报错 /* loadScript('demo.js',function(){
test();
});
*/
</script> </body> </html>
绑定事件处理函数addEvet()
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body> <div style="width: 100px;height: 100px;background: red;"></div> <script type="text/javascript"> // 给一个dom对象(elem)添加该事件类型(type)的处理函数(handle)
function addEvent(elem, type, handle) {
//兼容非ie9以下浏览器
if (elem.addEventListener) {
elem.addEventListener(type, handle, false);
} else if (elem.attachEvent) {
//兼容ie浏览器
elem.attachEvent('on' + type, function () {
handle.call(elem);
})
} else {
//兼容性很好
elem['on' + type] = handle;
}
} //分界线------------------------------------------------
var div = document.getElementsByTagName('div')[0];
addEvent(div, 'click', test);
function test() {
console.log("a");
} </script> </body> </html>
查看滚动尺寸getScrollOffset()
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- br*100 显示滚动条--> <script type="text/javascript"> function getScrollOffset() {
if (window.pageXOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
} else {
//兼容ie8及ie8以下
return {
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop
}
}
} </script>
</body> </html>
查看可视区窗口尺寸getViewportOffset()
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body> <script type="text/javascript"> function getViewportOffset() {
//兼容非ie浏览器
if (window.innerWidth) {
w: window.innerWidth,
h : window.innerHeight
} else {
//兼容怪异模式
if (document.compatMode == "BackCompat") {
return {
w: document.body.clientWidth,
h: document.body.clientHight
}
} else {
//兼容标准模式 ie浏览器
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHight
}
}
}
} </script> </body> </html>
返回计算样式getStyle()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width: 100px;height:100px;background: red;"></div>
<script type="text/javascript"> function getStyle(elem,prop){
//兼容非ie8及以下浏览器
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop]; //null可以放伪元素 但是这里没有做伪元素兼容
}else{
//兼容ie浏览器
return elem.currentStyle[prop];
}
} </script> </body>
</html>
获取事件源对象getEventScr(e)
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<div style="width: 100px;height: 100px;background: red;"></div>
<script type="text/javascript"> function getEventScr(e) {
var event = e || window.event;//兼容ie
var target = event.target || event.scrEvent;//event.target兼容火狐、event.scrEvent兼容ie。Chrome两兼容
console.log(target);
} //分界线-------------------------------------
var div = document.getElementsByTagName('div')[0];
div.onclick = function (e) {
getEventScr(e);
} </script> </body> </html>
判断类型type()
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body> <script type="text/javascript"> function type(target) {
var template = {
"[object Array]": "array",
"[object Object]": "object",
"[object Number]": "number-object",
"[object Boolean]": "boolean-object",
"[object String]": "string-object"
} //1.分两类 原始值 引用值
//2.区分引用值
if (target == null) {
return null;
}
if (typeof (target) == 'object') {
//数组
//对象
//包装类 Object.prototype.toString
var str = Object.prototype.toString.call(target);//属性名
return template[str];//属性值
} else {
return typeof (target);//原始值 和 function
}
} </script> </body> </html>
取消冒泡stopBubble()
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body> <script type="text/javascript"> function stopBubble(event) {
//兼容非ie9以下浏览器
if (event.stopPropagation) {
event.stopPropagation();
} else {
//兼容ie浏览器
event.cancelBubble = true;
}
} </script> </body> </html>
深度克隆deepClone()
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body> <script type="text/javascript"> function deepClone(origin, target) {
var target = target || {},
toStr = Object.prototype.toString,
arrStr = "[object Array]";
for (var prop in origin) {
if (origin.hasOwnProperty(prop)) {
if (origin[prop] !== "null" && typeof (origin[prop]) == 'object') {
if (toStr.call(origin[prop]) == arrStr) {
target[prop] = [];
} else {
target[prop] = {};
}
deepClone(origin[prop], target[prop]);
} else {
target[prop] = origin[prop]
}
}
}
return target;
}; // 以下为界限
var obj = {
name: "liang",
age: 18,
son: {
name: "hua",
age: 11,
arr: [1, 2, 3]
}
}; </script> </body> </html>
阻止默认事件cancelHandler()
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body> <script type="text/javascript"> function cancelHandler(event) {
// 兼容非ie浏览器
if (event.preventDefault) {
event.preventDefault();
} else {
// 兼容ie浏览器
event.returnValue = false;
}
} //分界线-------------------------------------
document.oncontextmenu = function (e) {
console.log(e);
cancelHandler(e);
} </script> </body> </html>
字节长度排序retBytes()
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body> <script type="text/javascript"> function retBytes(str) {
var num = len = str.length;
for (var i = 0; i < len; i++) {
if (str.charCodeAt(i) > 255) {
num++;
}
}
return num;
}
var arr = ['a邓', 'bbbbden邓哥过', 'ddddnkkjkdjfkffhhaf'];
arr.sort(function (a, b) {
return retBytes(a) - retBytes(b);
}); </script>
</body> </html>
拖拽方块drag()
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body> <div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0;border-radius: 50%"></div> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; function drag(elem) {
elem.onmousedown = function (e) {
var event = e || window.event;
disX = event.pageX - parseInt(elem.style.left);
disY = event.pageY - parseInt(elem.style.top);
document.onmousemove = function (e) {
var event = e || window.event;
elem.style.left = event.pageX - disX + "px";
elem.style.top = event.pageY - disY + "px";
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
} drag(div); </script> </body> </html>
时钟定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input{
border:1px solid rgba(0,0,0,0.8);
text-align: right;
font-size: 18px;
font-weight: bold;
} </style>
</head>
<body> minutes:<input type="text" value="0">
seconds:<input type="text" value="0"> <script type="text/javascript">
var minutesNode=document.getElementsByTagName('input')[0];
var secondsNode=document.getElementsByTagName('input')[1];
var minutes=0,
seconds=0;
var timer=setInterval(function(){
seconds++;
if(seconds==60){
seconds=0;
minutes++;
}
secondsNode.value=seconds;
minutesNode.value=minutes;
if(minutes==3){
clearInterval(timer);
} },10); </script> </body>
</html>
仿新搜索框
<input type="text" style="color: #999;position: relative;" onfocus="if(this.value=='请输入用户名') {this.value=''; this.style.color='#424242'}" onblur="if (this.value=='') {this.value='请输入用户名'; this.style.color='#999'}" value="请输入用户名">
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.inp-txt {
color: #666;
border: #ff8400 solid 1px;
} .submit-second-btn {
background: #ff8400;
border: 0;
}
</style>
</head> <body> <input type="text" maxlength="40" value="请输入关键字" name="SerchKey" class="inp-txt" onfocus="if(this.value=='请输入关键字'){this.value='';this.className='inp-txt inp-txt-active'}"
onblur="if(this.value==''){this.value='请输入关键字';this.className='inp-txt'}" autocomplete="off">
<input type="submit" name="SearchSubButton" class="submit-second-btn" value="搜索" onmouseover="this.className='submit-second-btn submit-second-btn-hover'"
onmouseout="this.className='submit-second-btn'" suda-uatrack="key=index_new_search&value=search_click"> </body> </html>
javaScript函数封装的更多相关文章
- JavaScript函数封装调用
举个列子:我们在写前端页面,经常会使用到Jquery文本框内容,来判断一下输入值是否符合,常见的写法: <script> function test(){ $("#ID" ...
- 总结的一些封装好的javascript函数
平时总结的一些常用javascript函数封装: //获取样式 function getStyle(obj,name){ if(obj.currentStyle){ return obj.curren ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第七节--登录逻辑及abp封装的Javascript函数库
经过前几节,我们已经解决数据库,模型,DTO,控制器和注入等问题.那么再来看一下登录逻辑.这里算是前面几节的一个初次试水. 首先我们数据库已经有的相应的数据. 模型和DTO已经建好,所以我们直接在服务 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第七节--登录逻辑及几种abp封装的Javascript函数库
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 简介 经过前几节,我们已经解决数据库,模型,DTO,控制器和注入等问题.那么再来看一下登录逻辑.这 ...
- Javascript作业—封装type函数，返回较详细的数据类型
Javascript作业—封装type函数,返回较详细的数据类型 思路: 1 取typeof的值,如果是数字.函数等非对象类型,直接取类型 2 如果是object类型,则调用Object.protot ...
- 慕课网JavaScript函数1-20 作业：函数的基础封装
1-20 作业 小伙伴们,掌握了JavaScript的语法.流程控制语句以及函数,接下来让我们运用所学知识完成如gif图所示的效果——计算自己出生那天是该年当中的第几天. gif效果图如下: 任务描述 ...
- Javascript：常用函数封装
//cookie function setCookie(name, value, iDay) { if(iDay!==false) { var oDate=new Date(); oDate.setD ...
- JavaScript 函数(方法)的封装技巧要领及其重要性
作为一枚程序猿,想必没有人不知道函数封装吧.在一个完整的项目开发中,我们会在JS代码中对一些常用(多个地方调用)的操作进行一个函数的封装,这样便于我们调试和重复调用,以致于能够在一定程度上减少代码的冗 ...
- JavaScript节流与防抖函数封装
js节流与防抖函数封装 常见应用场景: window的 resize 和 scroll 事件: 文字输入时的 keyup 事件: 元素拖拽.移动时的 mousemove 事件: 防抖 定义:多次触发事 ...
随机推荐
- iOS内存泄露统计
1.Value stored to 'xxx' during its initialization is never read // 对象声明之后根本就没有使用 只有赋值 2.Value stored ...
- Java & COM
- 路由 vue-router
vue-router官方文档 1.router跳转页面 编程式的导航 this.$router.push('/index'); 2.mode Router构造配置 const router = new ...
- nginx中的location匹配规则
概述: 1. location在nginx配置文件中的作用是根据用户请求的URI来执行不同的应用. 2.URI的定义:标识.定位任何资源的字符串 协议://域名/目录a/目录b/文件c http:// ...
- 人多qiu是好
小组第一次冲刺 团队任务描述: 在确定完分组,并对于敏捷开发做了相应的了解之后,我们团队开始了第一次的冲刺.对于我们团队的第一次的Scrum冲刺,我们团队开展了团队会议.首先,我们明确了我们的目标,对 ...
- Android（java）学习笔记10：同步中的死锁问题以及线程通信问题
1. 同步弊端: (1)效率低 (2)如果出现了同步嵌套,就容易产生死锁问题 死锁问题及其代码 : (1)是指两个或者两个以上的线程在执行的过程中,因争夺资源产生的一种互相等待现象 (2)同步代码块的 ...
- 【[USACO16OPEN]262144】
发现这个数列的范围特别大但是值域的范围特别小 于是可以大胆猜测这道题值域肯定需要开到状态里去 又发现\(262144=2^{18}\)这个暗示非常明显啊,暗示这道题跟二进制有关系 其实也没什么关系 设 ...
- python+requests实现接口测试 - get与post请求使用
简介:Requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,可以节约我们大量的工作,完全满足 ...
- 【洛谷P2324】[SCOI2005]骑士精神
骑士精神 题目链接 #include<iostream> #include<cstdio> using namespace std; int t,MAXD,sx,sy; ][] ...
- Zookeeper watch参照表
Watcher 设置是开发中最常见的,需要搞清楚watcher的一些基本特征,对于exists.getdata.getchild对于节点的不同操 作会收到不同的 watcher信息.对父节点的变更以及 ...