JavaScript面向对象编程（12）对js进行简单封装

标签：javascript   面向对象编程   js   prototype   

虽然现在很多js框架如jQuery都做得很好，但是从学习的角度来说，我们还是应该把js基础打牢固。

既然js是面向对象的，我们就可以利用封装，将一些固定的逻辑写在通用function里面。

下面的代码在不适用js框架的情况下可大大提高编程效率，而且可以遵循这个思路写更多的function。

// JavaScript Document
//$("#someid");
function $(id){
	var s = new String(id);
	if(/^#/.test(s)){
		return document.getElementById(s.substring(1));	
	}else{
		return document.getElementsByTagName(s);	
	}
	
}
/**
给对象绑定事件监听器
eventTarget 目标对象
eventType 事件名称，click/mouseover
eventHandler 函数对象
*/
function listenEvent(eventTarget, eventType, eventHandler) {
	if (eventTarget.addEventListener) {
		eventTarget.addEventListener(eventType, eventHandler,false);
	} else if (eventTarget.attachEvent) {
		eventType = "on" + eventType;
		eventTarget.attachEvent(eventType, eventHandler);
	} else {
		eventTarget["on" + eventType] = eventHandler;
	}
}

function stopListening (eventTarget,eventType,eventHandler) {
	if (eventTarget.removeEventListener) {
		eventTarget.removeEventListener(eventType,eventHandler,false);
	} else if (eventTarget.detachEvent) {
		eventType = "on" + eventType;
		eventTarget.detachEvent(eventType,eventHandler);
	} else {
		eventTarget["on" + eventType] = null;
	}
}

//增加onload事件处理函数
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}


//给目标元素添加css类
function addClass(element,value) {
	if (!element.className) {
		element.className = value;
	} else {
		newClassName = element.className;
		newClassName+= " ";
		newClassName+= value;
		element.className = newClassName;
	}
}
function setClass(element,value){
	element.className = value;
}

String.prototype.trim = function(){
	return this.replace(/^\s+|\s+$/igm,'');
}
//扩展element，添加一个after方法,在元素后面增加html内容
Element.prototype.after=function(text){
	var oldHTML = this.parentNode.innerHTML;
	this.parentNode.innerHTML = oldHTML+text;
}
//扩展element，添加一个append方法
Element.prototype.append=function(text){
	var oldHTML = this.innerHTML;
	this.innerHTML = oldHTML+text;
}

//继承“原型”
function extend(Child, Parent) {
	var F = function(){};
	F.prototype = Parent.prototype;
	Child.prototype = new F();
	Child.prototype.constructor = Child;
	Child.uber = Parent.prototype;
}
//--->类式继承，使用方式  TwoDShape.extend(Shape),类似于extend(TwoDShape,Shape)
Function.prototype.extend=function(superClass){
	if(typeof superClass !== 'function'){  
		throw new Error('fatal error:Function.prototype.extend expects a constructor of class');  
    }  
	var F = function(){}
	F.prototype = superClass.prototype;
	this.prototype = new F();
	this.prototype.constructor = this;
	this.uber = superClass;
	return this;
}
//拷贝属性
function extendCopy(p) {
	var c = {};
	for (var i in p) {
		c[i] = p[i];
	}
	c.uber = p;
	return c;
}
//深度拷贝
function deepCopy(p, c) {
	var c = c || {};
	for (var i in p) {
		if (typeof p[i] === 'object') {
			c[i] = (p[i].constructor === Array) ? [] : {};
			deepCopy(p[i], c[i]);
		} else {
			c[i] = p[i];
		}
	}
	return c;
}
//拷贝父对象为prototype
function object(o) {
	var n;
	function F() {}
	F.prototype = o;
	n = new F();
	n.uber = o;
	return n;
}

JavaScript面向对象编程（12）对js进行简单封装

标签：javascript   面向对象编程   js   prototype   

原文地址：http://blog.csdn.net/zhengwei223/article/details/42144275