首页 > 代码库 > JavaScript面向对象编程(12)对js进行简单封装
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; }
JavaScript面向对象编程(12)对js进行简单封装
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。