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

虽然现在很多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;
}