JavaScriptDOM高级程序设计myLogger.js

zoukankan html css js c++ java

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>

查看全文

相关阅读:
react跳转url，跳转外链，新页面打开页面
 如何把大段文字转为带html标签的文字
 react给一个div行内加背景图片并实现cover覆盖模式居中显示
 react获取当前页面的url参数
 mongodb查询数据库中某个字段中的值包含某个字符串的方法
 react实现多行文本超出加省略号
 小程序首页获取数据给数组赋值，实现加载更多，以及遇到的坑
 小程序渲染html的两种方法
 小程序url传参如何写变量
 小程序在父组件执行子组件方法，可适用于下拉刷新上拉加载之后执行子组件方法

原文地址：https://www.cnblogs.com/jikey/p/2344903.html