还是本着学习的目的,实现一个自己的调试日志,界面很简单,就是将调试信息显示在页面的正中央,用一个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, 写入一些信息。

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

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

    最近在看<javascript dom 高级程序设计>,想着跟着里面的代码敲一遍吧,也算是做一下学习笔记吧,所以这不是重新发明轮子,只是个学习的过程. 1.先确定自己的命名空间,并且加入几 ...

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

    1.根据id或class或tag修改样式,样式名是-连接格式的. function setStyleById(elem, styles){ if(!(elem = $(elem)) return fa ...

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

    1.生成重复的字符串 if(!String.repeat){ String.prototype.repeat = function (count){ return new Array(count + ...

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

    1.阻止冒泡. function stopPropagation(event){ event = event || getEvent(event); if(event.stopPropagation) ...

  5. 仿照jquery封装一个自己的js库(二)

    本篇为完结篇.主要讲述如何造出轮子的高级特性. 一. css方法的高级操作 先看本文第一部分所讲的dQuery css方法 //css方法 dQuery.prototype.css=function( ...

  6. 仿照jquery封装一个自己的js库(一)

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...

  7. 仿照jquery封装一个自己的js库

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解.本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括 ...

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

    代码示例:https://github.com/johnlui/Swift-On-iOS/blob/master/BuildYourHTTPRequestLibrary 开源项目:Pitaya,适合大 ...

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

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

随机推荐

  1. HttpClient post中文乱码解决

    在javase方式下使用HttpClient没有进行任何编码设置,本地从服务端获取到数据不存在中文乱码. 但是将此段代码部署到Tomcat下面出现了中文乱码,此时设置: post.getParams( ...

  2. android style="@[package:]style/style_name" ----------styles.xml

    android.widget ----XML attribute |____style="@[package:]style/style_name"

  3. Linux系统编程(13)——Shell的基本语法

    按照惯例,Shell变量由全大写字母加下划线组成,有两种类型的Shell变量:环境变量和本地变量. 环境变量: 环境变量可以从父进程传给子进程,因此Shell进程的环境变量可以从当前Shell进程传给 ...

  4. UESTC_秋实大哥与时空漫游 2015 UESTC Training for Graph Theory<Problem C>

    C - 秋实大哥与时空漫游 Time Limit: 4500/1500MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Su ...

  5. 剑指offter-面试题7.用两个栈实现队列

    题目.用两个栈实现一个队列.队列的声明如下,请实现它的两个函数appendTail和deleteHead 分别完成在对尾插入节点和在队头删除节点. 该队列类模板如下: template <typ ...

  6. 转(havel 算法)

    http://www.cnblogs.com/wally/p/3281361.html poj 1659(havel算法) 题目链接:http://poj.org/problem?id=1659 思路 ...

  7. Machine Learning - Lecture 16

    Reinforcement Learning (R.L.) ① MDPs (Markov Decision Processes) ② Value Functions ③ Value Iteration ...

  8. SQL With(递归 CTE 查询)

    本文来自:http://www.cnblogs.com/smailxiaobai/archive/2012/01/16/2323291.html 指定临时命名的结果集,这些结果集称为公用表表达式 (C ...

  9. C 语言中实现数据与方法的封装

    在 C 语言中可以用结构体代替类,用函数指针代替成员方法,实现数据成员与成员方法的封装,在客户端写出的程序与 C++ 类似,唯一的不同是 C 语言中调用函数指针成员时必须将本对象的地址传给函数,因为 ...

  10. cocos2d-x结合cocosbuilder,不同屏幕适配小结

    这个问题搞了好几天才解决,在此总结一下: 首先约定只使用一套图片资源同时应用于iphon4和iphon5(测试过在ipad下也能显示正常), 这里我们将需要全屏显示的背景制作为iphon5的尺寸即:1 ...