【写一个自己的js库】 2.实现自己的调试日志

还是本着学习的目的,实现一个自己的调试日志,界面很简单,就是将调试信息显示在页面的正中央,用一个ul包裹,每条信息就是一个li。

1.新建一个myLogger.js文件,将需要的方法声明一下。其中var声明的是私有成员,可见范围只在构造函数中,每个实例都会保存一套他们的副本。this声明的是特权方法,new的时候会把它绑定到实例上,实例可以直接调用它。在prototype上声明的就是公有方法了,每个实例都可以访问它。最后将一个实例赋值给Lily这个库,Lily就有自己的日志插件了。

function myLogger(id){
    id = id || ‘LilyLogWindow‘;
    var logWindow = null;
    var createWindow = function (){};
    this.writeRaw = function (){};
}

myLogger.prototype = {
    write : function (message){},
    header: function (message){}
};

if(!window.Lily) { window.Lily = {}; }
window[‘Lily‘][‘log‘] = new myLogger();

2.先给Lily补充一个方法,因为要显示在页面的中央,所以要获得浏览器窗口的高度和宽度,所以加个getBrowserWindowSize。window.innerWidth和window.innerHeight IE8及之前的版本不支持,document.documentElement在IE6的怪异模式下获取的值不正确。

function getBrowserWindowSize(){
        var de = document.documentElement;
        return {
            width : window.innerWidth || (de && de.clientWidth) || (document.body.clientWidth),
            height: window.innerHeight || (de && de.clientHeight) || (document.body.clientHeight)
        };
    }
    Lily[‘getBrowserWindowSize‘] = getBrowserWindowSize;

3.createWindow。这里就设置ul是固定的宽高,这里没用外链css,是因为如果想调试还要加个css,比较麻烦,所以就都在js里写好了。

var createWindow = function (){
        var windowSize = Lily.getBrowserWindowSize();
        var top = (windowSize.width - 200)/2 || 0;
        var left = (windowSize.height - 200)/2 || 0;

        logWindow = document.createElement("ul");
        logWindow.setAttribute("id", id);

        logWindow.style.position = "absolute";
        logWindow.style.left = left + "px";
        logWindow.style.top = top + "px";

        logWindow.style.width = "200px";
        logWindow.style.height = "200px";
        logWindow.style.overflow = "scroll";

        logWindow.style.border = "1px solid #f1f1f1";
        logWindow.style.padding = "0";
        logWindow.style.margin = "0";
        logWindow.style.listStyle = "none";

        document.body.appendChild(logWindow);
    };

4.writeRaw,当调用这个方法时,才检查logWindow是否创建,如果没创建,就调用createWindow,注意不要加this,因为createWindow是私有变量,myLogger的实例没有这个方法,而根据闭包,writeRaw可以访问到createWindow。虽然各浏览器都支持innerHTML,但是它不属于w3c规范,所以在用之前要进行一下能力检测,以防以后的浏览器不支持。

this.writeRaw = function (message){
        if(!logWindow) createWindow();
        var li = document.createElement("li");

        li.style.padding = "2px";
        li.style.margin = "0";
        li.style.borderBottom = "1px dotted #f0f0f0";

        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;
    };

5.write和header。这里write要处理一下信息,去掉html格式,不是string类型的调用toString或者显示它的类型。header就是将message包裹一下。

myLogger.prototype = {
    write : function (message){
        if(typeof message != ‘string‘){
            if(message.toString){
                return this.writeRaw(message.toString());
            }else{
                return this.writeRaw(typeof message);
            }
        }

        if(typeof message == ‘string‘ && message.length == 0){
            return this.writeRaw("Lily log : message is null");
        }

        message = message.replace(/</g, ‘&lt;‘).replace(/>/g, "&gt;");
        return this.writeRaw(message);

    },
    header: function (message){
        message = ‘<span style="color:#fff;background-color:#000;font-weight:bold;padding:0 5px">‘ + message + ‘</span>‘;
        return this.writeRaw(message);
    }
};

6.测试一下,在一个空白html引入Lily.js, myLogger.js, 写入一些信息。

时间: 2024-10-14 04:53:52

【写一个自己的js库】 2.实现自己的调试日志的相关文章

【写一个自己的js库】 1.搭个架子先

最近在看<javascript dom 高级程序设计>,想着跟着里面的代码敲一遍吧,也算是做一下学习笔记吧,所以这不是重新发明轮子,只是个学习的过程. 1.先确定自己的命名空间,并且加入几个常用的js方法.命名空间很重要啊,保证了自己库里的变量不污染全局空间,不和其他的库的变量名起冲突.命名空间的惯例就是把代码都放在自执行函数(function(){})()里了,然后暴露个方法给window对象了.所以0.1版本的代码就长下面这样了.(这里暂时没有用继承) (function(){ //命名空

【写一个自己的js库】 3.添加几个处理字符串的方法

1.生成重复的字符串 if(!String.repeat){ String.prototype.repeat = function (count){ return new Array(count + 1).join(this); } } 2.去除开头和结尾的空字符 if(!String.trim){ String.prototype.trim = function (){ return this.replace(/^\s+|\s+$/g, ''); } } 3.将"-"格式的字符串变成

【写一个自己的js库】 5.添加修改样式的方法

1.根据id或class或tag修改样式,样式名是-连接格式的. function setStyleById(elem, styles){ if(!(elem = $(elem)) return false; for(prop in styles){ if(!styles.hasOwnProperty(prop)) continue; if(elem.style.setProperty){ elem.style.setProperty(prop, styles[prop]); }else{ el

【写一个自己的js库】 4.完善跨浏览器事件操作

1.阻止冒泡. function stopPropagation(event){ event = event || getEvent(event); if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } } Lily['event'] = stopPropagation; 2.阻止事件默认动作. function preventDefault(event){ event =

自己动手写一个iOS 网络请求库的三部曲[转]

代码示例:https://github.com/johnlui/Swift-On-iOS/blob/master/BuildYourHTTPRequestLibrary 开源项目:Pitaya,适合大文件上传的 HTTP 请求库:https://github.com/johnlui/Pitaya 本系列文章中,我们将尝试使用 NSURLSession 技术构建一个自己的网络请求库. NSURLSession 简介 NSURLSession 是 iOS7 引入的新网络请求接口,在 WWDC2013

如何写一个自定义的js文件

自定义一个Utils.js文件,在其中写js代码即可.如: (function(w){ function Utils(){} Utils.prototype.getChilds = function(_selector){}; Utils.prototype.getNextSibling = function(_selector){}; Utils.prototype.getPrevSibling = function(_selector){}; Utils.prototype.validate

isMobile 一个简单的JS库,用来检测移动设备

github地址: https://github.com/kaimallea/isMobile 示例 (function () { var MOBILE_SITE = 'http://m.xx.com/index.html', NO_REDIRECT = 'noredirect'; if (isMobile.any) { if ( document.cookie.indexOf(NO_REDIRECT) === -1 ) { document.location = MOBILE_SITE; }

近期写js库中遇到的一个判别的问题

最近在写一个自己的js库,正写到数组包,在里面定义了一个排序,只对纯数字数据进行排序的方法,但是在测试的时候发现一个很诡异的问题,那就是传入一个对象的时候,它没有返回erroemsg而是返回了对象,上代码: 1 array.sort=function(a){//only for num 2 try{ 3 4 if(!a.some(function(x){return(typeof("string"))})){ 5 var max=a.length-1; 6 7 for(var j=0;

【转载】写一个js库需要怎样的知识储备和技术程度?

作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的javascript代码,鲁棒性,简单总结几条我觉得是常识的事:1.1 一个javascript库最好的实现方式是占用最少的命名空间,比如window对象上或者global对象上只占用一个引用.1.2 健壮的js程序对输入都会有完善的类型检查和异常处理,边界值的判断.1.3 对js的几种继承方式要足