JavaScript-创建第一个自己的类库
2024-08-30 05:03:32
通过上一节面向对象和原型的学习。
我们知道了怎样创建一个类，包含类的私有化属性和方法、公有化属性和方法、静态属性和方法。在这里略微回想一下。首先要创建一个类能够通过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 = str;
};
if(arguments.length === 0){
typeof this.elements[0].innerHTML != "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 = str;
}
}
return this;
}
*/
//设置和获取CSS值
Base.prototype.fCss = function(cssName,cssValue){
var cssStrs = [];
//获取getComputedStyle的值
function getFFStyle(i,that,cssName){
var style = window.getComputedStyle(that.elements[i]);
cssStrs.push(style[cssName]);
};
//获取currentStyle的值
function getIEStyle(i,that,cssName){
var style = that.elements[i].currentStyle;
cssStrs.push(style[cssName]);
};
//设置css的值,当中float为保留字，IE为styleFloat,FF为cssFloat
function setCss(i,that,cssName,cssValue){
that.elements[i].style[cssName] = cssValue;
};
if(arguments.length === 1){
typeof window.getComputedStyle != "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);
}
};
这是第一个类库的雏形，还没有进行优化。待日后学习后进行优化。其它的类库将在这个基本库的基础上进行拓展。以添加其功能。
最新文章
- 怎么取得dropdownlist选中的ID值
- SQL Server 分区表
- 如何克隆路由器MAC地址，怎么操作？
- 在Mac OS X中使用VIM开发STM32（3）
- A Case Study -- Performance Evaluation of a DRAM-Based Solid State Disk
- ASP.NET+ashx+jQuery动态添加删除表格
- 【转】DevExpress控件安装
- camel-name-utils 在驼峰风格跟下划线风格之间切换
- swap in java?
- linux环境下根据文件的某一列进行去重
- linux 中数据库的常用操作
- Numpy 矩阵库（Matrix）
- 通过TensorFlow训练神经网络模型
- Linux下Wheel用户组介绍
- ContOS7编译安装python3，配置虚拟环境
- Charles界面介绍及使用方法
- BOM介绍
- php类库安装xml
- 未能加载文件或程序集”xxxx”或它的某一个依赖项，试图加载格式不正确的程序。
- apache配置防盗链