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>