JavaScriptDOM高级程序设计myLogger.js

最近早上有空，不想des，想找本书看看，js王者归来伤透我心，悟透js就没信心了，还是回归国外大师们的作品比较保险，javascript dom 高级程序设计，这是李松峰与人民邮电的第一次合作，十分值得纪念。里边的内容可圈可点，虽然是2008年左右出的书，一点也不感觉过时，搞不懂好多人不知道什么原因忽略了这本书。还记得参加webrebuild时龙刚推荐过此书，想想已经快两年过去了。时光为流水，一去不复返，今，正风华正茂，逆流而上，方显英雄本色。莫蹉跎了年华，辜负了佳人，遗恨终生。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>myLooger</title>
</head>
<body>
<script type="text/javascript">
    /**
     * Created by jikey.
     * Link: jikeytang@gmail.com
     * Date: 12-2-10
     * Time: 上午9:44
     * Info:
     */
    function myLogger(id){
        id = id || 'ADSLogWindow';
        // 私有属性
        var logWindow = null;
        // 私有方法，受保护
        // 创建日志窗口
        var createWindow = function(){
            // 新窗口在浏览器中，默认居中放置
            var browserWindowSize = ADS.getBrowserWindowSize(),
                    top = ((browserWindowSize.height - 200) / 2) || 0,
                    left = ((browserWindowSize.width - 200) / 2) || 0;
            // 创建日志窗口的DOM节点，使用私有属性
            logWindow = document.createElement('ul');
            logWindow.id = id;
            logWindow.style.cssText = 'position:absolute;top:' + top + 'px;left:' + left + 'px;200px;height:200px;overflow:scroll;margin:0;padding:0 0 0 5px;border:1px solid #ccc;background:#f0f0f0;font:12px/23px arial;';
            document.body.appendChild(logWindow); // 将其添加到主文档中
        };
        /**
         * 特权方法(公有方法)
         * 创建消息列表
         * @param message 消息内容
         */
        this.writeRaw = function(message){
            // 当初始窗口不存在时，创建他
            if(!logWindow){ createWindow(); }
            // 创建列表项
            var li = document.createElement('li');
            li.style.cssText = 'padding:2px;border:0;border-bottom:1px solid #ccc;margin:0;color:#333;';
            // 为节点添加信息
            if(typeof message == 'undefined'){
                li.appendChild(document.createTextNode('Message was no undefined.'));
            } else if(typeof li.innerHTML != undefined){
                li.innerHTML = '<strong style="color:#c0c0c0;">•</strong> ' + message;
            } else {
                li.appendChild(document.createTextNode(message));
            }
            // 添加到日志窗口
            logWindow.appendChild(li);
        };
    };
    // 公有方法
    myLogger.prototype = {
        write: function(message){
            // 若message 为空
            if(typeof message == 'string' && message.length == 0){
                return this.writeRaw('ADS.log: null message');
            }
            // 若message不是字符串，则尝试试用toString,如果不存在该访问则记录对象类型
            if(typeof message != 'string'){
                if(message.toString){
                    return this.writeRaw(message.toString());
                } else {
                    return this.writeRaw(typeof message);
                }
            }
            // 转换<>以便.innerHTML不会将message做为HTML进行解析
            message = message.replace(/</g, '<').replace(/>/g, '>');
            return this.writeRaw(message);
        },
        // 标题
        header: function(message){
            message = '<span style="color:#333;background:#f1f1f1;font-weight:bold;padding:0 5px;">' + message + '</span>';
            return this.writeRaw(message);
        }
    };
    if(!window.ADS){ window['ADS'] = {}; }
    ADS = {
        // 得到窗口大小
        getBrowserWindowSize: function(){
            var de = document.documentElement;
            return {
                'width': (window.innerWidth || (de && de.clientWidth) || document.body.clientWidth),
                'height': (window.innerHeight || (de && de.clientHeight) || document.body.clientHeight)
            }
        },
        log: new myLogger()
    };
    ADS.log.writeRaw('This is Raw');
    ADS.log.header('瞧瞧');
    ADS.log.write('<div style="color:#f00">瞧瞧！</div>');
</script>
</body>
</html>