首页 > 代码库 > JavaScript-创建第一个自己的类库
JavaScript-创建第一个自己的类库
通过上一节面向对象和原型的学习。
我们知道了怎样创建一个类,包含类的私有化属性和方法、公有化属性和方法、静态属性和方法。在这里略微回想一下。首先要创建一个类能够通过1.new object()。2.利用构造函数function Person(){},然后通过new Person()。另一种是通过字面量的方式创建一个对象,通过字面量的方式不能使用new运算符,由于他是在内部自己new object()。
在这里我们要对类和对象有一定的区分,形象的来说,假设动物是一个类的话。人能够是当中一个对象。就上面的var person = new Person();这里的Person就是一个类。而person则是他的一个实例化对象,并且能够有非常多派生的类,比方Man.prototype = new Person(); var man = new Man();那么这个man也是一个实例化对象。简单的说,类是虚的,而对象是实体的。了解了对象和类的差别之后。我们简单看下怎样创建类的私有化。公有化以及静态属性和方法。
面向对象的知识
var a = function(){ var private1 = ‘private1‘; //私有字段 this.public1 = ‘public1‘; //共同拥有字段,实例字段 var privateMethod1 = function(){ //私有方法 alert(‘privateMethod1‘); } this.publicMethod1 = function(obj){ //公共方法。实例方法 private1 = obj; } this.publicMethod2 = function(){ //公共方法 return private1; } } a.filed1 = ‘filed1‘; //公共静态字段 var b1 = new a(); var b2 = new a(); b1.publicMethod1(‘ss‘); console.log(b1.publicMethod2()); console.log(b2.publicMethod2()); **************************************************** var a = (function(){ //console.log(this); //window对象 var private1 = ‘private1‘; //这个是私有静态属性 this.public1 = ‘public1‘; return function(){ //console.log(this); //object对象 this.publicMethod1 = function(obj){ private1 = obj; } this.publicMethod2 = function(){ //console.log(this); //返回的对象的实例 return private1; } } })(); var b1 = new a(); var b2 = new a(); b1.publicMethod1(‘s‘); console.log(b1.publicMethod2()); console.log(b2.publicMethod2());
第一个类库base.js
了解了主要的面向对象和原型后。我们来封装我们第一个类库。
这个类有下面功能:能够通过id,class,tagname获取元素,实现连缀功能,设置css,获取文本等主要的功能:
var $ = function(){ return new Base(); } var Base = function(){ this.elements = []; //代表元素集合 } //利用Id获取元素 Base.prototype.fId = function(id){ this.elements.push(document.getElementById(id)); return this; } //利用tagName获取元素 Base.prototype.fTag = function(tag){ var eles = document.getElementsByTagName(tag); for(var i = 0,len = eles.length; i < len; i++){ this.elements.push(eles[i]); } return this; }; //利用className获取元素 Base.prototype.fClass = function(className){ var eles = document.getElementsByClassName(className); for(var i = 0,len = eles.length; i < len; i++){ this.elements.push(eles[i]); } return this; }; //文本值 Base.prototype.fText = function(str){ var texts = []; //获取innerHTML的值 function getInnerHTML(i,that){ texts.push(that.elements[i].innerHTML); }; //设置innerHTML的值 function setInnerHTML(i,that,str){ that.elements[i].innerHTML = str; }; //获取nodeValue的值 function getNodeValue(i,that){ texts.push(that.elements[i].firstChild.nodeValue); }; //设置nodeValue的值 function setNodeValue(i,that,str){ that.elements[i].firstChild.nodeValue = http://www.mamicode.com/str;"undefined"?lenFor(getInnerHTML,this):lenFor(getNodeValue,this); return texts; }else if(arguments.length === 1){ typeof this.elements[0].innerHTML != "undefined"?lenFor(setInnerHTML,this,str):lenFor(setNodeValue,this,str); return this; } }; /* if(arguments.length === 0){ //假设不输入參数则觉得是获取文本值 if(typeof this.elements[0].innerHTML != "undefined"){ var getInnerHTML = function(){ texts.push(this.elements[i].innerHTML); } }else{ for(var i = 0,len = this.elements.length; i < len; i++){ texts.push(this.elements[i].firstChild.nodeValue); } } return texts; }else if(arguments.length === 1){ //假设输入參数则觉得是设置文本值 if(typeof this.elements[0].innerHTML != "undefined"){ for(var i = 0,len = this.elements.length; i < len; i++){ this.elements[i].innerHTML = str; } }else{ for(var i = 0,len = this.elements.length; i < len; i++){ this.elements[i].firstChild.nodeValue = http://www.mamicode.com/str;"undefined"?这是第一个类库的雏形,还没有进行优化。待日后学习后进行优化。其它的类库将在这个基本库的基础上进行拓展。以添加其功能。lenFor(getFFStyle,this,cssName):lenFor(getIEStyle,this,cssName); return cssStrs; }else if(arguments.length === 2){ //设置CSS的值 lenFor(setCss,this,cssName,cssValue); return this; } }; //加入css类选择器 Base.prototype.addCssClass = function(className){ //获取elements的class值 function add(i,that,className){ var name = that.elements[i].className; var partern = new RegExp("(^|\\s)" + className + "($|\\s)","g"); if(!partern.test(name)){ name += " " +className; } that.elements[i].className = name; }; lenFor(add,this,className); return this; }; //删除css类选择器 Base.prototype.removeCssClass = function(className){ //删除elements的class值 function remove(i,that,className){ var name = that.elements[i].className; var partern = new RegExp("(^|\\s)" + className + "($|\\s)","g"); that.elements[i].className = name.replace(partern,""); }; lenFor(remove,this,className); return this; }; //对elements进行循环,并运行fn函数 function lenFor(fn,that,str,str1){ for(var i = 0,len = that.elements.length; i < len; i++){ fn(i,that,str,str1); } };
JavaScript-创建第一个自己的类库