JavaScript-创建日志调试对象(面向对象实例)

参考自http://www.2cto.com/kf/201312/261990.html

IC.js文件　　自己封装的js类库

  1 /**
  2  *
  3  * @authors Your Name (you@example.org)
  4  * @date    2017-07-18 15:51:06
  5  * @version $Id$
  6  */
  7 if(document.all&&!document.getElementById()){
  8     document.getElementById  = function(id){
  9         return document.all[id];
 10     }
 11 };
 12 if(!String.repeat){
 13     String.prototype.repeat = function(){
 14         return new Array(i+1).join(this);
 15     }
 16 };
 17 if(!String.trim){
 18     String.prototype.trim = function(){
 19         return this.replace(/^\s+|\s+$/g,'');
 20     }
 21 };
 22 (function(){
 23     /*创建自己的库，名称为IC*/
 24     if (!window['IC']) {
 25         window['IC'] = {};
 26     }
 27     function $() {
 28         /*alert()是JavaScript脚本语言中窗口window对象的一个常用方法；
 29         其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，
 30         所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/
 31         var elements = new Array();
 32         /*Arguments对象能够模拟重载*/
 33         for(var i=0;i<arguments.length;i++){
 34             var element = arguments[i];
 35             if(typeof element == 'string'){
 36                 element = document.getElementById(element);
 37             }
 38             if(arguments.length==1){
 39                 return element;
 40             }
 41             elements.push(element);
 42         }
 43         return element;
 44     }
 45     //把$函数注册到 'myNameSpace'命名空间中
 46     window['IC']['$'] = $;
 47     /*向Node节点对象添加事件，（后面讲）*/
 48     function addEvent(node,type,listener){
 49         if(!(node=$(node))){
 50             return false
 51         };
 52         if(node.addEventListener){
 53             node.addEventListener(type,listener,false)
 54             return true
 55         }else if( node.attachEvent){
 56                 node['e'+type+listener] = listener;
 57                 node[type+listener] = function (){node['e'+type+listener](window.event);};
 58                 node.attachEvent('on'+type,node[type+listener]);
 59                 return true;
 60         }
 61         return false;
 62     };
 63     window['IC']['addEvent'] = addEvent;
 64         /*获取所有指定类名的元素：(所有类型元素，参数1类名，参数2标签名)*/
 65         /*获取所有指定类名的元素：(所有类型元素，参数1类名，参数2标签名)*/
 66         function getElementsByClassName(className,tag,parent){
 67             parent = parent || document;
 68             if(!(parent = $([parent]))) return false;
 69             var allTags = (tag == '*' && parent.all)? parent.all : parent.getElementsByTagName(tag);
 70             var matchingElements = new Array();
 71             className = className.replace(/\-/g,'\\-');
 72             var regex = new RegExp("(^|\\s)"+className+"(\\s|$)");
 73             var element;
 74             for(var i=0;i<allTags.length;i++){
 75                 element = allTags[i];
 76                 if(regex.test(element.className)){
 77                     matchingElements.push(element)
 78                 }
 79             }
 80             return matchingElements;
 81         }
 82         window['IC']['getElementsByClassName' ] = getElementsByClassName;
 83         function bindFunction(obj,func){
 84             return function(){
 85                 /*将方法绑定到对象上*/
 86                 func.apply(obj,arguments);
 87             }
 88         }
 89         window['IC']['bindFunction'] = bindFunction;
 90         function getBrowserWindowSize(){
 91            var de = document.documentElement;
 92            return {
 93                     'width'      :(
 94                              window.innerWidth
 95                              || (de &&de.chileWidth)
 96                              || document.body.clientWidth),
 97                     'height' :(
 98                              window.innerHeight
 99                              || (de &&de.clientHeight)
100                              ||document.body.clientHeight)
101            }
102         };
103             window['IC']['getBrowserWindowSize'] = getBrowserWindowSize;
104 })();

test.js

作用：向window对象里面添加一个load事件。

 1 /**
 2  *
 3  * @authors Your Name (you@example.org)
 4  * @date    2017-07-20 11:15:35
 5  * @version $Id$
 6  */
 7  /* test.js中代码的主要作用是向window对象里面添加一个load事件。*/
 8 IC.addEvent(window,'load',function(){
 9     IC.log.writeRaw('This is Raw');
10     IC.log.writeRaw('<strong>This is bold</strong>');
11     IC.log.header('With a header');
12     //遍历整个 document
13     for(i in document){
14         IC.log.write(i);
15     };
16 })

mylog.js

涉及到 myLogger函数，此函数还包含构造函数，createWindow函数，writeRaw函数。这些函数将在test.js文件中的到验证

 1 /**
 2  *
 3  * @authors Your Name (you@example.org)
 4  * @date    2017-07-20 10:10:13
 5  * @version $Id$
 6  */
 7 function myLogger(id){
 8     id = id || 'ICLogWindow';
 9     // 日志窗体的引用
10     var logWindow = null;
11     //创建日志窗体
12     var createWindow = function(){
13         //引用节点
14         var browserWindowSize = IC.getBrowserWindowSize();
15         var top = (browserWindowSize.height-200)/2||0;//=>如果为空则为0
16         var left = (browserWindowSize.width-200)/2||0;//=>如果为空则为0
17         /*使用UL*/
18         logWindow = document.createElement('UL');//=>在页面内创建UL的元素
19         /*添加ID进行标识*/
20         /*setAttribute() 方法添加指定的属性，并为其赋指定的值。*/
21         logWindow.setAttribute('id',id);
22         /*对窗体进行样式控制*/
23         logWindow.style.position = 'absolute';
24         logWindow.style.top = top+'px';
25         logWindow.style.left = left+'px';
26         logWindow.style.width = '200px';
27         logWindow.style.height = '200px';
28         logWindow.style.overflow = 'scroll';
29         logWindow.style.padding = '0';
30         logWindow.style.margin = '0';
31         logWindow.style.border = '1px solid #000';
32         logWindow.style.backrgoundColor = '#fff';
33         logWindow.style.listStyle = 'none';
34         logWindow.style.fontSize = '12px';
35         document.body.appendChild(logWindow);
36     };
37     //向窗体添加一行
38      //声明特权方法,向日志文件中添加一条记录另一种写法是 myLogger.pro
39     this.writeRaw = function(message){//=>特权方法和全局方法作用相同
40         //如果初始窗体是不存在的,则生成日志窗体
41         if(!logWindow){
42             createWindow();
43         }
44         /*创建Li节点实例*/
45         var li = document.createElement('LI');
46         //进行CSS样式控制
47         li.style.padding = '0';
48         li.style.margin = '0';
49         li.style.border = '1px solid #ccc';
50         li.style.backrgoundColor = '#fff';
51         li.style.listStyle = 'none';
52         li.style.fontSize = '12px';
53         /*验证message信息*/
54         if(typeof message == undefined){
55             li.appendChild(document.createTextNode('Message is undefined'));
56         }else if(typeof li.innerHTML!= undefined){
57             li.innerHTML = message;
58         }else {
59             li.appendChild(document.createTextNode(message))
60         }
61         logWindow.appendChild(li);
62         return true;
63     }
64 };
65 //使用对象自变量的方式声明特权方法
66 myLogger.prototype = {
67     //=>向窗体添加一行，并进行简单处理
68     write : function(message){
69         if(typeof message == 'string'&& message.length == 0){
70             return this.writeRaw('没有输入信息')
71         }
72         if(typeof message!='string'){
73             if(message.toString){
74                 return this.writeRaw(message.toString());
75             }else {
76                 return this.writeRaw(typeof message);
77             }
78         };
79         //将大于号小于号进行正则转换成HTML标记
80         message = message.replace(/</g,"&lt;").replace(/>/g,"&gt;");
81         return this.writeRaw(message);
82     },
83     //=>向窗体添加标题
84     header : function(message){
85         message = '<span style="color:#000;background-color: #f4f4f4;font-weight: bold；padding:0px 5px;">'+message+'</span>'
86         return this.writeRaw(message);
87     }
88 };
89 window['IC']['log'] = new myLogger();

html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>实例</title>
 7 <meta name="description" content="">
 8 <meta name="keywords" content="">
 9 <script type="text/javascript" src='IC.js'></script>
10 <script type="text/javascript" src='mylog.js'></script>
11 <script type="text/javascript" src=' test.js'></script>
12 </head>
13 <body>
14 实例参考地址
15 http://www.2cto.com/kf/201312/261990.html
16 </body>
17 </html>

 

posted @ 2017-07-20 13:40  =DLSS=webZT  阅读(331)  评论(0)  编辑  收藏  举报