参考自http://www.2cto.com/kf/201312/261990.html
IC.js文件 自己封装的js类库
/**
*
* @authors Your Name (you@example.org)
* @date 2017-07-18 15:51:06
* @version $Id$
*/
if(document.all&&!document.getElementById()){
document.getElementById = function(id){
return document.all[id];
}
};
if(!String.repeat){
String.prototype.repeat = function(){
return new Array(i+1).join(this);
}
};
if(!String.trim){
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g,'');
}
};
(function(){
/*创建自己的库，名称为IC*/
if (!window['IC']) {
window['IC'] = {};
}
function $() {
/*alert()是JavaScript脚本语言中窗口window对象的一个常用方法；
其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，
所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/
var elements = new Array();
/*Arguments对象能够模拟重载*/
for(var i=0;i<arguments.length;i++){
var element = arguments[i];
if(typeof element == 'string'){
element = document.getElementById(element);
}
if(arguments.length==1){
return element;
}
elements.push(element);
}
return element;
}
//把$函数注册到 'myNameSpace'命名空间中
window['IC']['$'] = $;
/*向Node节点对象添加事件，（后面讲）*/
function addEvent(node,type,listener){
if(!(node=$(node))){
return false
};
if(node.addEventListener){
node.addEventListener(type,listener,false)
return true
}else if( node.attachEvent){
node['e'+type+listener] = listener;
node[type+listener] = function (){node['e'+type+listener](window.event);};
node.attachEvent('on'+type,node[type+listener]);
return true;
}
return false;
};
window['IC']['addEvent'] = addEvent;
/*获取所有指定类名的元素：(所有类型元素，参数1类名，参数2标签名)*/
/*获取所有指定类名的元素：(所有类型元素，参数1类名，参数2标签名)*/
function getElementsByClassName(className,tag,parent){
parent = parent || document;
if(!(parent = $([parent]))) return false;
var allTags = (tag == '*' && parent.all)? parent.all : parent.getElementsByTagName(tag);
var matchingElements = new Array();
className = className.replace(/\-/g,'\\-');
var regex = new RegExp("(^|\\s)"+className+"(\\s|$)");
var element;
for(var i=0;i<allTags.length;i++){
element = allTags[i];
if(regex.test(element.className)){
matchingElements.push(element)
}
}
return matchingElements;
}
window['IC']['getElementsByClassName' ] = getElementsByClassName;
function bindFunction(obj,func){
return function(){
/*将方法绑定到对象上*/
func.apply(obj,arguments);
}
}
window['IC']['bindFunction'] = bindFunction;
function getBrowserWindowSize(){
var de = document.documentElement;
return {
'width' :(
window.innerWidth
|| (de &&de.chileWidth)
|| document.body.clientWidth),
'height' :(
window.innerHeight
|| (de &&de.clientHeight)
||document.body.clientHeight)
}
};
window['IC']['getBrowserWindowSize'] = getBrowserWindowSize;
})();
test.js
作用：向window对象里面添加一个load事件。
/**
*
* @authors Your Name (you@example.org)
* @date 2017-07-20 11:15:35
* @version $Id$
*/
/* test.js中代码的主要作用是向window对象里面添加一个load事件。*/
IC.addEvent(window,'load',function(){
IC.log.writeRaw('This is Raw');
IC.log.writeRaw('<strong>This is bold</strong>');
IC.log.header('With a header');
//遍历整个 document
for(i in document){
IC.log.write(i);
};
})
mylog.js
涉及到 myLogger函数，此函数还包含构造函数，createWindow函数，writeRaw函数。这些函数将在test.js文件中的到验证
/**
*
* @authors Your Name (you@example.org)
* @date 2017-07-20 10:10:13
* @version $Id$
*/
function myLogger(id){
id = id || 'ICLogWindow';
// 日志窗体的引用
var logWindow = null;
//创建日志窗体
var createWindow = function(){
//引用节点
var browserWindowSize = IC.getBrowserWindowSize();
var top = (browserWindowSize.height-200)/2||0;//=>如果为空则为0
var left = (browserWindowSize.width-200)/2||0;//=>如果为空则为0
/*使用UL*/
logWindow = document.createElement('UL');//=>在页面内创建UL的元素
/*添加ID进行标识*/
/*setAttribute() 方法添加指定的属性，并为其赋指定的值。*/
logWindow.setAttribute('id',id);
/*对窗体进行样式控制*/
logWindow.style.position = 'absolute';
logWindow.style.top = top+'px';
logWindow.style.left = left+'px';
logWindow.style.width = '200px';
logWindow.style.height = '200px';
logWindow.style.overflow = 'scroll';
logWindow.style.padding = '0';
logWindow.style.margin = '0';
logWindow.style.border = '1px solid #000';
logWindow.style.backrgoundColor = '#fff';
logWindow.style.listStyle = 'none';
logWindow.style.fontSize = '12px';
document.body.appendChild(logWindow);
};
//向窗体添加一行
//声明特权方法,向日志文件中添加一条记录另一种写法是 myLogger.pro
this.writeRaw = function(message){//=>特权方法和全局方法作用相同
//如果初始窗体是不存在的,则生成日志窗体
if(!logWindow){
createWindow();
}
/*创建Li节点实例*/
var li = document.createElement('LI');
//进行CSS样式控制
li.style.padding = '0';
li.style.margin = '0';
li.style.border = '1px solid #ccc';
li.style.backrgoundColor = '#fff';
li.style.listStyle = 'none';
li.style.fontSize = '12px';
/*验证message信息*/
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;
}
};
//使用对象自变量的方式声明特权方法
myLogger.prototype = {
//=>向窗体添加一行，并进行简单处理
write : function(message){
if(typeof message == 'string'&& message.length == 0){
return this.writeRaw('没有输入信息')
}
if(typeof message!='string'){
if(message.toString){
return this.writeRaw(message.toString());
}else {
return this.writeRaw(typeof message);
}
};
//将大于号小于号进行正则转换成HTML标记
message = message.replace(/</g,"<").replace(/>/g,">");
return this.writeRaw(message);
},
//=>向窗体添加标题
header : function(message){
message = '<span style="color:#000;background-color: #f4f4f4;font-weight: bold；padding:0px 5px;">'+message+'</span>'
return this.writeRaw(message);
}
};
window['IC']['log'] = new myLogger();
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>实例</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src='IC.js'></script>
<script type="text/javascript" src='mylog.js'></script>
<script type="text/javascript" src=' test.js'></script>
</head>
<body>
实例参考地址
http://www.2cto.com/kf/201312/261990.html
</body>
</html>