參考自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-创建日志调试对象(面向对象实例)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。