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>

巴特西

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

最新文章

热门文章