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

参考自http://www.2cto.com/kf/201312/261990.html

IC.js文件　　自己封装的js类库

  1 /**
  2  *
  3  * @authors Your Name (you@example.org)
  4  * @date    2017-07-18 15:51:06
  5  * @version $Id$
  6  */
  7 if(document.all&&!document.getElementById()){
  8     document.getElementById  = function(id){
  9         return document.all[id];
 10     }
 11 };
 12 if(!String.repeat){
 13     String.prototype.repeat = function(){
 14         return new Array(i+1).join(this);
 15     }
 16 };
 17 if(!String.trim){
 18     String.prototype.trim = function(){
 19         return this.replace(/^\s+|\s+$/g,'');
 20     }
 21 };
 22 (function(){
 23     /*创建自己的库，名称为IC*/
 24     if (!window['IC']) {
 25         window['IC'] = {};
 26     }
 27     function $() {
 28         /*alert()是JavaScript脚本语言中窗口window对象的一个常用方法；
 29         其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，
 30         所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/
 31         var elements = new Array();
 32         /*Arguments对象能够模拟重载*/
 33         for(var i=0;i<arguments.length;i++){
 34             var element = arguments[i];
 35             if(typeof element == 'string'){
 36                 element = document.getElementById(element);
 37             }
 38             if(arguments.length==1){
 39                 return element;
 40             }
 41             elements.push(element);
 42         }
 43         return element;
 44     }
 45     //把$函数注册到 'myNameSpace'命名空间中
 46     window['IC']['$'] = $;
 47     /*向Node节点对象添加事件，（后面讲）*/
 48     function addEvent(node,type,listener){
 49         if(!(node=$(node))){
 50             return false
 51         };
 52         if(node.addEventListener){
 53             node.addEventListener(type,listener,false)
 54             return true
 55         }else if( node.attachEvent){
 56                 node['e'+type+listener] = listener;
 57                 node[type+listener] = function (){node['e'+type+listener](window.event);};
 58                 node.attachEvent('on'+type,node[type+listener]);
 59                 return true;
 60         }
 61         return false;
 62     };
 63     window['IC']['addEvent'] = addEvent;
 64         /*获取所有指定类名的元素：(所有类型元素，参数1类名，参数2标签名)*/
 65         /*获取所有指定类名的元素：(所有类型元素，参数1类名，参数2标签名)*/
 66         function getElementsByClassName(className,tag,parent){
 67             parent = parent || document;
 68             if(!(parent = $([parent]))) return false;
 69             var allTags = (tag == '*' && parent.all)? parent.all : parent.getElementsByTagName(tag);
 70             var matchingElements = new Array();
 71             className = className.replace(/\-/g,'\\-');
 72             var regex = new RegExp("(^|\\s)"+className+"(\\s|$)");
 73             var element;
 74             for(var i=0;i<allTags.length;i++){
 75                 element = allTags[i];
 76                 if(regex.test(element.className)){
 77                     matchingElements.push(element)
 78                 }
 79             }
 80             return matchingElements;
 81         }
 82         window['IC']['getElementsByClassName' ] = getElementsByClassName;
 83         function bindFunction(obj,func){
 84             return function(){
 85                 /*将方法绑定到对象上*/
 86                 func.apply(obj,arguments);
 87             }
 88         }
 89         window['IC']['bindFunction'] = bindFunction;
 90         function getBrowserWindowSize(){
 91            var de = document.documentElement;
 92            return {
 93                     'width'      :(
 94                              window.innerWidth
 95                              || (de &&de.chileWidth)
 96                              || document.body.clientWidth),
 97                     'height' :(
 98                              window.innerHeight
 99                              || (de &&de.clientHeight)
100                              ||document.body.clientHeight)
101            }
102         };
103             window['IC']['getBrowserWindowSize'] = getBrowserWindowSize;
104 })();

test.js

作用：向window对象里面添加一个load事件。

 1 /**
 2  *
 3  * @authors Your Name (you@example.org)
 4  * @date    2017-07-20 11:15:35
 5  * @version $Id$
 6  */
 7  /* test.js中代码的主要作用是向window对象里面添加一个load事件。*/
 8 IC.addEvent(window,'load',function(){
 9     IC.log.writeRaw('This is Raw');
10     IC.log.writeRaw('<strong>This is bold</strong>');
11     IC.log.header('With a header');
12     //遍历整个 document
13     for(i in document){
14         IC.log.write(i);
15     };
16 })

mylog.js

涉及到 myLogger函数，此函数还包含构造函数，createWindow函数，writeRaw函数。这些函数将在test.js文件中的到验证

 1 /**
 2  *
 3  * @authors Your Name (you@example.org)
 4  * @date    2017-07-20 10:10:13
 5  * @version $Id$
 6  */
 7 function myLogger(id){
 8     id = id || 'ICLogWindow';
 9     // 日志窗体的引用
10     var logWindow = null;
11     //创建日志窗体
12     var createWindow = function(){
13         //引用节点
14         var browserWindowSize = IC.getBrowserWindowSize();
15         var top = (browserWindowSize.height-200)/2||0;//=>如果为空则为0
16         var left = (browserWindowSize.width-200)/2||0;//=>如果为空则为0
17         /*使用UL*/
18         logWindow = document.createElement('UL');//=>在页面内创建UL的元素
19         /*添加ID进行标识*/
20         /*setAttribute() 方法添加指定的属性，并为其赋指定的值。*/
21         logWindow.setAttribute('id',id);
22         /*对窗体进行样式控制*/
23         logWindow.style.position = 'absolute';
24         logWindow.style.top = top+'px';
25         logWindow.style.left = left+'px';
26         logWindow.style.width = '200px';
27         logWindow.style.height = '200px';
28         logWindow.style.overflow = 'scroll';
29         logWindow.style.padding = '0';
30         logWindow.style.margin = '0';
31         logWindow.style.border = '1px solid #000';
32         logWindow.style.backrgoundColor = '#fff';
33         logWindow.style.listStyle = 'none';
34         logWindow.style.fontSize = '12px';
35         document.body.appendChild(logWindow);
36     };
37     //向窗体添加一行
38      //声明特权方法,向日志文件中添加一条记录另一种写法是 myLogger.pro
39     this.writeRaw = function(message){//=>特权方法和全局方法作用相同
40         //如果初始窗体是不存在的,则生成日志窗体
41         if(!logWindow){
42             createWindow();
43         }
44         /*创建Li节点实例*/
45         var li = document.createElement('LI');
46         //进行CSS样式控制
47         li.style.padding = '0';
48         li.style.margin = '0';
49         li.style.border = '1px solid #ccc';
50         li.style.backrgoundColor = '#fff';
51         li.style.listStyle = 'none';
52         li.style.fontSize = '12px';
53         /*验证message信息*/
54         if(typeof message == undefined){
55             li.appendChild(document.createTextNode('Message is undefined'));
56         }else if(typeof li.innerHTML!= undefined){
57             li.innerHTML = message;
58         }else {
59             li.appendChild(document.createTextNode(message))
60         }
61         logWindow.appendChild(li);
62         return true;
63     }
64 };
65 //使用对象自变量的方式声明特权方法
66 myLogger.prototype = {
67     //=>向窗体添加一行，并进行简单处理
68     write : function(message){
69         if(typeof message == 'string'&& message.length == 0){
70             return this.writeRaw('没有输入信息')
71         }
72         if(typeof message!='string'){
73             if(message.toString){
74                 return this.writeRaw(message.toString());
75             }else {
76                 return this.writeRaw(typeof message);
77             }
78         };
79         //将大于号小于号进行正则转换成HTML标记
80         message = message.replace(/</g,"&lt;").replace(/>/g,"&gt;");
81         return this.writeRaw(message);
82     },
83     //=>向窗体添加标题
84     header : function(message){
85         message = '<span style="color:#000;background-color: #f4f4f4;font-weight: bold；padding:0px 5px;">'+message+'</span>'
86         return this.writeRaw(message);
87     }
88 };
89 window['IC']['log'] = new myLogger();

html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>实例</title>
 7 <meta name="description" content="">
 8 <meta name="keywords" content="">
 9 <script type="text/javascript" src='IC.js'></script>
10 <script type="text/javascript" src='mylog.js'></script>
11 <script type="text/javascript" src=' test.js'></script>
12 </head>
13 <body>
14 实例参考地址
15 http://www.2cto.com/kf/201312/261990.html
16 </body>
17 </html>

转载于:https://www.cnblogs.com/NB-JDzhou/p/7210790.html

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

和我一起学Windows Workflow Foundation(1)-----创建和调试一个WF实例(转)
和我一起学Windows Workflow Foundation(1)-----创建和调试一个WF实例今天开始,我打算开始学习WWF,从网上搜索到了部分相关资料,也找到了一些文档和实验.但是,资料以 ...
和我一起学Windows Workflow Foundation(1)-----创建和调试一个WF实例
今天开始,我打算开始学习WWF,从网上搜索到了部分相关资料,也找到了一些文档和实验.但是,资料以英文的占多数,所以,在学习起来似乎比较吃力,不过相信我能坚持下来,顺便提高点英语阅读能力,不过本人英文水 ...
Python入门--创建类的对象
class Student:native_pace = '山东' # 直接写在类里的变量称为类属性# 初始化方法def __init__(self, name, age):self.na = name ...
Python定义类、创建类的对象（类的实例化）
定义类语法格式在python中,可以通过class关键字定义类,然后通过定义的类来创建实例对象.语法格式如下: calss 类名:类体注意事项在python中使用class关键字来定义类,定义 ...
Python OOP：面向对象基础，定义类，创建对象/实例，self，创建多个对象，添加对象属性，访问对象属性，__init__方法，带参数的__init__，__str__方法，__del__方法
一.理解面向对象面向对象是⼀种抽象化的编程思想,很多编程语⾔中都有的⼀种思想. ⾯向对象就是将编程当成是⼀个事物,对外界来说,事物是直接使用的,不用去管他内部的情况.⽽编程就是设置事物能够做什么事. ...
魔方APP项目-02-服务端项目搭建，创建manage.py文件、构建全局初始化函数创建app应用对象、通过终端脚本启动项目、项目加载配置、数据库初始化、日志初始化、蓝图初始化
服务端项目搭建新建项目目录mofangapi,并创建虚拟环境 mkvirtualenv mofang 安装开发中使用的依赖模块 pip install flask==0.12.4 pip insta ...
Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
C++ 对象和实例的区别，以及用new和不用new创建类对象区别
起初刚学C++时,很不习惯用new,后来看老外的程序,发现几乎都是使用new,想一想区别也不是太大,但是在大一点的项目设计中,有时候不使用new的确会带来很多问题.当然这都是跟new的用法有关的.ne ...
通过创建 HttpCookie 对象的实例编写 Cookie
通过创建 HttpCookie 对象的实例编写 Cookie HttpCookie myCookie = new HttpCookie("UserSettings"); myCoo ...

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

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

最新文章

热门文章