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

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

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

 /**
  *
  * @authors Your Name (you@example.org)
  * @date    2017-07-18 15:51:06
  * @version $Id$
  */
 if(document.all&&!document.getElementById()){
     document.getElementById  = function(id){
         return document.all[id];
     }
 };
 if(!String.repeat){
     String.prototype.repeat = function(){
         return new Array(i+1).join(this);
     }
 };
 if(!String.trim){
     String.prototype.trim = function(){
         return this.replace(/^\s+|\s+$/g,'');
     }
 };
 (function(){
     /*创建自己的库，名称为IC*/
     if (!window['IC']) {
         window['IC'] = {};
     }
     function $() {
         /*alert()是JavaScript脚本语言中窗口window对象的一个常用方法；
         其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，
         所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/
         var elements = new Array();
         /*Arguments对象能够模拟重载*/
         for(var i=0;i<arguments.length;i++){
             var element = arguments[i];
             if(typeof element == 'string'){
                 element = document.getElementById(element);
             }
             if(arguments.length==1){
                 return element;
             }
             elements.push(element);
         }
         return element;
     }
     //把$函数注册到 'myNameSpace'命名空间中
     window['IC']['$'] = $;
     /*向Node节点对象添加事件，（后面讲）*/
     function addEvent(node,type,listener){
         if(!(node=$(node))){
             return false
         };
         if(node.addEventListener){
             node.addEventListener(type,listener,false)
             return true
         }else if( node.attachEvent){
                 node['e'+type+listener] = listener;
                 node[type+listener] = function (){node['e'+type+listener](window.event);};
                 node.attachEvent('on'+type,node[type+listener]);
                 return true;
         }
         return false;
     };
     window['IC']['addEvent'] = addEvent;
         /*获取所有指定类名的元素：(所有类型元素，参数1类名，参数2标签名)*/
         /*获取所有指定类名的元素：(所有类型元素，参数1类名，参数2标签名)*/
         function getElementsByClassName(className,tag,parent){
             parent = parent || document;
             if(!(parent = $([parent]))) return false;
             var allTags = (tag == '*' && parent.all)? parent.all : parent.getElementsByTagName(tag);
             var matchingElements = new Array();
             className = className.replace(/\-/g,'\\-');
             var regex = new RegExp("(^|\\s)"+className+"(\\s|$)");
             var element;
             for(var i=0;i<allTags.length;i++){
                 element = allTags[i];
                 if(regex.test(element.className)){
                     matchingElements.push(element)
                 }
             }
             return matchingElements;
         }
         window['IC']['getElementsByClassName' ] = getElementsByClassName;
         function bindFunction(obj,func){
             return function(){
                 /*将方法绑定到对象上*/
                 func.apply(obj,arguments);
             }
         }
         window['IC']['bindFunction'] = bindFunction;
         function getBrowserWindowSize(){
            var de = document.documentElement;
            return {
                     'width'      :(
                              window.innerWidth
                              || (de &&de.chileWidth)
                              || document.body.clientWidth),
                     'height' :(
                              window.innerHeight
                              || (de &&de.clientHeight)
                              ||document.body.clientHeight)
            }
         };
             window['IC']['getBrowserWindowSize'] = getBrowserWindowSize;
 })();

test.js

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

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

mylog.js

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

 /**
  *
  * @authors Your Name (you@example.org)
  * @date    2017-07-20 10:10:13
  * @version $Id$
  */
 function myLogger(id){
     id = id || 'ICLogWindow';
     // 日志窗体的引用
     var logWindow = null;
     //创建日志窗体
     var createWindow = function(){
         //引用节点
         var browserWindowSize = IC.getBrowserWindowSize();
         var top = (browserWindowSize.height-200)/2||0;//=>如果为空则为0
         var left = (browserWindowSize.width-200)/2||0;//=>如果为空则为0
         /*使用UL*/
         logWindow = document.createElement('UL');//=>在页面内创建UL的元素
         /*添加ID进行标识*/
         /*setAttribute() 方法添加指定的属性，并为其赋指定的值。*/
         logWindow.setAttribute('id',id);
         /*对窗体进行样式控制*/
         logWindow.style.position = 'absolute';
         logWindow.style.top = top+'px';
         logWindow.style.left = left+'px';
         logWindow.style.width = '200px';
         logWindow.style.height = '200px';
         logWindow.style.overflow = 'scroll';
         logWindow.style.padding = '0';
         logWindow.style.margin = '0';
         logWindow.style.border = '1px solid #000';
         logWindow.style.backrgoundColor = '#fff';
         logWindow.style.listStyle = 'none';
         logWindow.style.fontSize = '12px';
         document.body.appendChild(logWindow);
     };
     //向窗体添加一行
      //声明特权方法,向日志文件中添加一条记录另一种写法是 myLogger.pro
     this.writeRaw = function(message){//=>特权方法和全局方法作用相同
         //如果初始窗体是不存在的,则生成日志窗体
         if(!logWindow){
             createWindow();
         }
         /*创建Li节点实例*/
         var li = document.createElement('LI');
         //进行CSS样式控制
         li.style.padding = '0';
         li.style.margin = '0';
         li.style.border = '1px solid #ccc';
         li.style.backrgoundColor = '#fff';
         li.style.listStyle = 'none';
         li.style.fontSize = '12px';
         /*验证message信息*/
         if(typeof message == undefined){
             li.appendChild(document.createTextNode('Message is undefined'));
         }else if(typeof li.innerHTML!= undefined){
             li.innerHTML = message;
         }else {
             li.appendChild(document.createTextNode(message))
         }
         logWindow.appendChild(li);
         return true;
     }
 };
 //使用对象自变量的方式声明特权方法
 myLogger.prototype = {
     //=>向窗体添加一行，并进行简单处理
     write : function(message){
         if(typeof message == 'string'&& message.length == 0){
             return this.writeRaw('没有输入信息')
         }
         if(typeof message!='string'){
             if(message.toString){
                 return this.writeRaw(message.toString());
             }else {
                 return this.writeRaw(typeof message);
             }
         };
         //将大于号小于号进行正则转换成HTML标记
         message = message.replace(/</g,"&lt;").replace(/>/g,"&gt;");
         return this.writeRaw(message);
     },
     //=>向窗体添加标题
     header : function(message){
         message = '<span style="color:#000;background-color: #f4f4f4;font-weight: bold；padding:0px 5px;">'+message+'</span>'
         return this.writeRaw(message);
     }
 };
 window['IC']['log'] = new myLogger();

html

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title>实例</title>
 <meta name="description" content="">
 <meta name="keywords" content="">
 <script type="text/javascript" src='IC.js'></script>
 <script type="text/javascript" src='mylog.js'></script>
 <script type="text/javascript" src=' test.js'></script>
 </head>
 <body>
 实例参考地址
 http://www.2cto.com/kf/201312/261990.html
 </body>
 </html>