本篇封装了一些常用的函数，兼容IE8及以下的浏览器，怪异模式。

按需加载loadScript（）、绑定事件处理函数addEvet()、查看滚动尺寸getScrollOffset()、查看可视区窗口尺寸getViewportOffset()、返回计算样式getStyle()、获取事件源对象getEventScr(e)、判断类型type()、取消冒泡stopBubble()、深度克隆deepClone()、阻止默认事件cancelHandler()、字节长度排序retBytes()、拖拽方块drag()

按需加载loadScript（）

方法一：函数传入一个匿名函数，在该函数参数传入需要执行的参数 
 1         function loadScript(url,callback){
 2             var script=document.createElement('script');
 3             script.type='text/javascript';
 4             if(script.readyState){
 5                 script.onreadystatechange=function (){
 6                     if(script.readyState=='complete'||script.readyState=='loaded'){
 7                         callback();
 8                     }
 9                 }
10             }else{
11                 script.οnlοad=function (){
12                     callback();
13                 }
14             }//先启动监听事件后下载
15             script.src=url;
16             document.head.appendChild(script);
17         }
18
19
20         //执行函数需注意
21         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');

最后的封装：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8
 9 <body>
10
11     <script type="text/javascript">
12         //按需加载 执行js函数
13         function loadScript(url, callback) {
14             var script = document.createElement('script');
15             script.type = 'text/javascript';
16             //ie浏览器监测的方法
17             if (script.readyState) {
18                 script.onreadystatechange = function () {
19                     if (script.readyState == 'complete' || script.readyState == 'loaded') {
20                         callback();
21                     }
22                 }
23             } else {
24                 //chrome、Firefox、Safari、Opera浏览器的方法
25                 script.onload = function () {
26                     callback();
27                 }
28             }
29             script.src = url;//先绑定监测的事件，再加载URL。假设下载速度比电脑运行还快的情况
30             document.head.appendChild(script);
31         }
32 // 分界线--------------------------------
33 //执行需注意url是字符串。函数需传一个匿名函数包裹该test()进去，因为代码未加载就解析test会报错
34
35 /*        loadScript('demo.js',function(){
36             test();
37         });
38 */
39     </script>
40
41
42 </body>
43
44 </html>

绑定事件处理函数addEvet()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8
 9 <body>
10
11     <div style="width: 100px;height: 100px;background: red;"></div>
12
13     <script type="text/javascript">
14
15         // 给一个dom对象(elem)添加该事件类型(type)的处理函数(handle)
16         function addEvent(elem, type, handle) {
17             //兼容非ie9以下浏览器
18             if (elem.addEventListener) {
19                 elem.addEventListener(type, handle, false);
20             } else if (elem.attachEvent) {
21                 //兼容ie浏览器
22                 elem.attachEvent('on' + type, function () {
23                     handle.call(elem);
24                 })
25             } else {
26                 //兼容性很好
27                 elem['on' + type] = handle;
28             }
29         }
30
31
32
33         //分界线------------------------------------------------
34         var div = document.getElementsByTagName('div')[0];
35         addEvent(div, 'click', test);
36         function test() {
37             console.log("a");
38         }
39
40
41
42     </script>
43
44
45 </body>
46
47 </html>

查看滚动尺寸getScrollOffset()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <!-- br*100 显示滚动条-->
10
11     <script type="text/javascript">
12
13         function getScrollOffset() {
14             if (window.pageXOffset) {
15                 return {
16                     x: window.pageXOffset,
17                     y: window.pageYOffset
18                 }
19             } else {
20                 //兼容ie8及ie8以下
21                 return {
22                     x: document.body.scrollLeft + document.documentElement.scrollLeft,
23                     y: document.body.scrollTop + document.documentElement.scrollTop
24                 }
25             }
26         }
27
28     </script>
29 </body>
30
31 </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)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8
 9 <body>
10     <div style="width: 100px;height: 100px;background: red;"></div>
11     <script type="text/javascript">
12
13         function getEventScr(e) {
14             var event = e || window.event;//兼容ie
15             var target = event.target || event.scrEvent;//event.target兼容火狐、event.scrEvent兼容ie。Chrome两兼容
16             console.log(target);
17         }
18
19
20         //分界线-------------------------------------
21         var div = document.getElementsByTagName('div')[0];
22         div.onclick = function (e) {
23             getEventScr(e);
24         }
25
26     </script>
27
28
29 </body>
30
31 </html>

判断类型type()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8
 9 <body>
10
11     <script type="text/javascript">
12
13         function type(target) {
14             var template = {
15                 "[object Array]": "array",
16                 "[object Object]": "object",
17                 "[object Number]": "number-object",
18                 "[object Boolean]": "boolean-object",
19                 "[object String]": "string-object"
20             }
21
22             //1.分两类 原始值 引用值
23             //2.区分引用值
24             if (target == null) {
25                 return null;
26             }
27             if (typeof (target) == 'object') {
28                 //数组
29                 //对象
30                 //包装类 Object.prototype.toString
31                 var str = Object.prototype.toString.call(target);//属性名
32                 return template[str];//属性值
33             } else {
34                 return typeof (target);//原始值 和 function
35             }
36         }
37
38
39     </script>
40
41
42
43 </body>
44
45 </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()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8
 9 <body>
10
11     <script type="text/javascript">
12
13         function deepClone(origin, target) {
14             var target = target || {},
15                 toStr = Object.prototype.toString,
16                 arrStr = "[object Array]";
17             for (var prop in origin) {
18                 if (origin.hasOwnProperty(prop)) {
19                     if (origin[prop] !== "null" && typeof (origin[prop]) == 'object') {
20                         if (toStr.call(origin[prop]) == arrStr) {
21                             target[prop] = [];
22                         } else {
23                             target[prop] = {};
24                         }
25                         deepClone(origin[prop], target[prop]);
26                     } else {
27                         target[prop] = origin[prop]
28                     }
29                 }
30             }
31             return target;
32         };
33
34
35         // 以下为界限
36         var obj = {
37             name: "liang",
38             age: 18,
39             son: {
40                 name: "hua",
41                 age: 11,
42                 arr: [1, 2, 3]
43             }
44         };
45
46
47     </script>
48
49
50 </body>
51
52 </html>

阻止默认事件cancelHandler()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8
 9 <body>
10
11     <script type="text/javascript">
12
13         function cancelHandler(event) {
14             // 兼容非ie浏览器
15             if (event.preventDefault) {
16                 event.preventDefault();
17             } else {
18                 // 兼容ie浏览器
19                 event.returnValue = false;
20             }
21         }
22
23         //分界线-------------------------------------
24         document.oncontextmenu = function (e) {
25             console.log(e);
26             cancelHandler(e);
27         }
28
29     </script>
30
31
32
33 </body>
34
35 </html>

字节长度排序retBytes()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8
 9 <body>
10
11     <script type="text/javascript">
12
13         function retBytes(str) {
14             var num = len = str.length;
15             for (var i = 0; i < len; i++) {
16                 if (str.charCodeAt(i) > 255) {
17                     num++;
18                 }
19             }
20             return num;
21         }
22         var arr = ['a邓', 'bbbbden邓哥过', 'ddddnkkjkdjfkffhhaf'];
23         arr.sort(function (a, b) {
24             return retBytes(a) - retBytes(b);
25         });
26
27     </script>
28 </body>
29
30 </html>

拖拽方块drag()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8
 9 <body>
10
11     <div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0;border-radius: 50%"></div>
12
13     <script type="text/javascript">
14
15         var div = document.getElementsByTagName('div')[0];
16
17         function drag(elem) {
18             elem.onmousedown = function (e) {
19                 var event = e || window.event;
20                 disX = event.pageX - parseInt(elem.style.left);
21                 disY = event.pageY - parseInt(elem.style.top);
22                 document.onmousemove = function (e) {
23                     var event = e || window.event;
24                     elem.style.left = event.pageX - disX + "px";
25                     elem.style.top = event.pageY - disY + "px";
26                 }
27                 document.onmouseup = function () {
28                     document.onmousemove = null;
29                 }
30             }
31         }
32
33
34         drag(div);
35
36     </script>
37
38 </body>
39
40 </html>

时钟定时器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         input{ 8             border:1px solid rgba(0,0,0,0.8);
 9             text-align: right;
10             font-size: 18px;
11             font-weight: bold;
12         }
13
14     </style>
15 </head>
16 <body>
17
18     minutes:<input type="text" value="0">
19     seconds:<input type="text" value="0">
20
21 <script type="text/javascript">
22     var minutesNode=document.getElementsByTagName('input')[0];
23     var secondsNode=document.getElementsByTagName('input')[1];
24     var    minutes=0,
25         seconds=0;
26     var timer=setInterval(function(){
27         seconds++;
28         if(seconds==60){
29             seconds=0;
30             minutes++;
31         }
32         secondsNode.value=seconds;
33         minutesNode.value=minutes;
34         if(minutes==3){
35             clearInterval(timer);
36         }
37
38     },10);
39
40 </script>
41
42
43 </body>
44 </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&amp;value=search_click"></body></html>

转载于:https://www.cnblogs.com/qingyang-0-0/p/9410871.html

javaScript函数封装相关推荐

  1. JavaScript函数封装，js对象

    1.函数:是封装了一段可以被重复执行调用的 一次声明,多次调用,封装就是打包 一:声明函数(1)function 声明函数的关键字,全部小写 (2)函数是做某件事情,函数名一般是动词 getSum ( ...

  2. 33个前端常用的JavaScript函数封装方法

    星标公众号 前端开发博客,回复"交流" 加入我们一起学习,天天进步 这是我在实际开发中常用的一些js函数方法,总结一下,以后可以,有需要的小伙伴可以参考下百度就完事了,不不不!我亲 ...

  3. 【学习笔记16】JavaScript函数封装习题

    笔记初发 1.书写一个函数, 求任意两个数字的和, 把结果以弹窗的形式展示 书写一个函数 需要参数吗?            -->需要 需要几个参数?         ->两个 函数要做 ...

  4. JavaScript函数封装随机颜色验证码

    数字或者字母或者数字字母混合的n位验证码带随机的颜色.下面是完整的代码,需要的自取哈! ​ function verify(a = 6,b = "num"){//定义三个随机验证码 ...

  5. JavaScript之封装Math函数

    JavaScript之封装Math函数 Math 对象属性 Math 对象方法 Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin( ...

  6. javascript深拷贝函数封装

    在javascript,python这种带引用类型的高级程序设计语言中,很容易出现浅拷贝而导致错误. 本篇文章,我浅述一下我对js中深拷贝函数封装的思考. 思路很简单,封装一个递归函数,终止条件是'不 ...

  7. JavaScript 之 网页特效篇（offset系列、client系列、scroll系列、动画函数封装、常见网页特效）

    网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置 可以获取 ...

  8. JavaScript 函数(方法)的封装技巧要领及其重要性

    作为一枚程序猿,想必没有人不知道函数封装吧.在一个完整的项目开发中,我们会在JS代码中对一些常用(多个地方调用)的操作进行一个函数的封装,这样便于我们调试和重复调用,以致于能够在一定程度上减少代码的冗 ...

  9. 主页面调用iframe里面匿名Javascript函数的问题

    2019独角兽企业重金招聘Python工程师标准>>> 这个问题出现已经几天了,今天终于解决了,特此记录下来. 问题的出现始于我在HTML5下采用Reveal.js来播放PPT和使用 ...

  10. 第一百零二节，JavaScript函数

    JavaScript函数 学习要点: 1.函数声明 2.return返回值 3.arguments对象 函数是定义一次但却可以调用或执行任意多次的一段JS代码.函数有时会有参数,即函数被调用时指定了值 ...

最新文章

  1. 零基础学习Java培训有什么攻略
  2. Java基础学习总结（18）——网络编程
  3. 【C++ 语言】pthread_mutex_t 互斥锁
  4. 使用Mapping实现的以太坊智能合约的代码
  5. 我决定重新开始搞机器学习啦
  6. 大数据统计分析平台之一、Kafka单机搭建
  7. vue-cli的初步使用
  8. c++分治法求最大最小值实现_程序员：算法导论，分治法、归并排序，伪代码和Java实现...
  9. Java：出生日期转年龄
  10. Guava事件处理组件Eventbus使用入门
  11. hibernate关联关系笔记
  12. 优秀架构师是怎么炼成的？
  13. MATLAB矩阵计算大全
  14. 计算机思维在英语专业的应用,英语专业在计算机科学中的重要性
  15. codeforces 158B
  16. ecshop 模版写php,ecshop 模板直接使用运算符
  17. 海量的超赞 Linux 软件 （转载）
  18. 小武学fpgastep7
  19. 基于Springboot+mybatis+mysql+html教育培训中心教学系统
  20. 混合算法（SA+TS）解决TSP问题——lua实现(Microcity)

热门文章

  1. The pom for XXX is missing,no dependency information available
  2. webpack路径问题总结
  3. hdu--1181--变形课
  4. LeetCode Repeated DNA Sequences
  5. winsock编程宝典
  6. 小程序-涂鸦画笔(案例-集福)
  7. jsp+servlet实现最基本的注册登陆功能
  8. Jquery-easyUI-datagrid参数之 queryParams
  9. drivers/mfd/Mfd-core.c
  10. 安装部署shipyard