JavaScript面向对象之静态与非静态类

直到有那么一天,我开始在js中拼凑DOM标签,而且需要不停的拼凑,我发现我的代码变得愈发的丑陋,不仅上是代码简洁的问题,甚至有时候还引发了性能问题。长此以往,不出三个月,上帝都将会不知道我写过些什么,本篇的目的完全出于记录使用心得。
首先,还是来看一下促使我改变书写JavaScript习惯的垃圾代码,在练习、测试、调试、甚至正式项目中,大量的充斥着下面的代码。


复制代码 代码如下:

Function finduser(userId)
{
}
Function showmessage(msg)
{
Var message=”提示,出错了,错误原因”+msg;
Alert(message);
}
Function append(obj)
{
Var onclick=”createdom()”;
Var title=”你好”;
$(obj).append(“<a href='javascript:void(0)' onclick='”+onclick+”' title='”+title+”'>”+title+”</a>”);
}

不要告诉我你没有见过上面的代码,说实话,上面的代码确实写得快,调用简单,如果前两个函数还不足以引发你的愤慨,那么第三个函数应该让你有点想问候写这代码创建者的冲动了。是的,第三个函数直接触发了我决定使用面向对象。
实际上,我完全可以把第三个函数改造成下面这样。


复制代码 代码如下:

function append(obj)
{
var a=document.craeteElement(“a”);
a.title=”你好”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();};
$(obj).append(a);
}

这样如何?有进步吧,好,这就是我想要的代码,但是还不够简洁。我希望可以把创建DOM对象封装到一个类中,并且把以上的三个方法都装到一个对象中;那好吧,动手起来是很简单的事情,这种工作不需要上网搜索代码和示例的,直接应用C#的面向对象思维就可以完成。
首先是封装以上的三个方法到一个对象中,封装很简单,应该不用我多废话的,直接上代码。

封装后的三个函数


复制代码 代码如下:

User={
Function finduser(userId)
{
},
Function showmessage(msg)
{
Var message=”提示,出错了,错误原因”+msg;
Alert(message);
},
Function append(obj)
{
Var a=document.craeteElement(“a”);
a.title=”你好”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();};
$(obj).append(a);
}
}

只需要声明一个User变量来存储上面的三个方法即可,不同的方法间使用逗号分隔,需要注意的是,这时候的User是一个静态的类,无构造函数或者构造函数私有(我猜的),反正不可new了。
其次,我再创建一个封装创建DOM对象的静态类,代码如下:

复制代码 代码如下:

createElement={
element=function(targetName){return document.createElement(targetName);},
a=document. createElement(“a”)
}

相当简单,这样我就可以测试一下上面的CreateElement对象是否可正常工作,这次测试是在append方法中进行测试。append方法再次被改造成下面的代码。

复制代码 代码如下:

function append(obj)
{
Var a= createElement .a;
a.title=”你好”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();};
$(obj).append(a);
}

目前看来,append工作得相当的良好,好吧,我需要作出一点小改动,我需要在append函数中创建三个a并把它依次添加到obj对象中,代码如下:

代码


复制代码 代码如下:

function append(obj)
{
For(i=0;i<3;i++)
{
Var a= createElement .a;
a.title=”你好”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();};
$(obj).append(a);
}
}

最后显示的结果是obj对象中只得到了一个a我十分的不理解,这一个a让我觉得我又回到了C#的怀抱,多么美好呀,经过分析,当我通过Var a= CreateElement .a;
第一次调用在CreateElement.a来获取a对象时,a属性中的document.createElement(“a”)就已经把a对象驻留到内存中,这之后不管我再怎么调用CreateElement.a,实际上都只是得到了内存中a的一个引用,改变的都竟然是同一个对象,这就是静态类的特别之处,但是,当我通过调用CreateElement.element函数来获取对象时,每次我得到的都是一个新的对象,方法不会保存对象的引用,这是肯定的,解决方法就是通过调用CreateElement.element函数来创建新的对象,但是这种方法非面向对象推荐。
另外一种比较好的解决办法是使用非静态类,即实体类的方式,创建非静态类的方式也是相当的简单,代码如下:

复制代码 代码如下:

createElement=function(){
element=function(targetName){return document.createElement(targetName);};
a=document. createElement(“a”);
}

直接声明createElement对象,并使之有构造函数,成员间以分号进行分隔,当然如果你喜欢,还可以直接这样写,也是没有一样的效果。

复制代码 代码如下:

function createElement (){
element=function(targetName){return document.createElement(targetName);};
a=document. createElement(“a”);
}

经过上面的声明,我们就可以在append函数中像C#一样使用createElement类来创建DOM对象了。

函数


复制代码 代码如下:

function append(obj)
{
for(i=0;i<3;i++)
{
var ele=new createElement();
var a=ele.a;
a.title=”你好”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();};
$(obj).append(a);
}
}

这样每次new createElement()都是一个新的对象,不存在引用的问题了。
实际上,上面提到的就是Javascript中静态类和非静态类的区别;当然也从中得知,使用静态类非静态类的效率上还是有些差别的,而且调用的时候肯定也是静态类方便一些,如果不计较引用冲突问题,我觉得静态类应该是首选的。

时间: 2010-01-31

基于Echarts 3.19 制作常用的图形(非静态)

饼图: 环境:Echarts 3.19 vs2013 实现方式:ajax+ashx+json 注意事项: 官网所需格式为 [{value:23,name:'xxxx' }] 请将key 的名字不要写错 具体代码,各位看官 请下移目光. <!--请先引用文件--> <script src="../Scripts/jquery-1.8.2.min.js"></script> <script src="../Scripts/echarts/

java synchronized同步静态方法和同步非静态方法的异同

java synchronized 详解 synchronized关键字有两种用法,一种是只用于方法的定义中,另外一种是synchronized块,我们不仅可以使用synchronized来同步一个对象变量,你也可以通synchronizedl来同步类中的静态方法和非静态方法. synchronized块的语法如下: public void method() { synchronized(表达式) { } } public void method() { synchronized(表达式) {

浅析C#中静态方法和非静态方法的区别

静态方法和非静态方法的区别: 1.静态方法不需要类实例化就可以调用,反之非静态方法需要实例化后才能调用: 2.静态方法只能访问静态成员和方法,非静态方法都可以访问: 3.静态方法不能标记为override,导致派生类不能重写,但是可以访问: 4.静态成员是在第一次使用时进行初始化.非静态的成员是在创建对象的时候,从内存分配上来说静态是连续的,非静态在内存的存储上是离散的,因此静态方法和非静态方法,在调用速度上,静态方法速度一定会快点,因为非静态方法需要实例化,分配内存,但静态方法不用,但是这种速

深入浅析Java中Static Class及静态内部类和非静态内部类的不同

java中的类可以是static吗?答案是可以.在java中我们可以有静态实例变量.静态方法.静态块.类也可以是静态的. java允许我们在一个类里面定义静态类.比如内部类(nested class).把nested class封闭起来的类叫外部类.在java中,我们不能用static修饰顶级类(top level class).只有内部类可以为static.      静态内部类和非静态内部类之间到底有什么不同呢?下面是两者间主要的不同. (1)内部静态类不需要有指向外部类的引用.但非静态内部

关于C++静态成员函数访问非静态成员变量的问题

复制代码 代码如下: class a{public:  static FunctionA()  {     menber = 1;  } private:  int menber;} 编译上述代码,出错.原因很简单大家都知道,静态成员函数不能访问非静态成员,这是因为静态函数属于类而不是属于整个对象,静态函数中的 member可能都没有分配内存.静态成员函数没有隐含的this自变量.所以,它就无法访问自己类的非静态成员. 那要想访问怎么办呢?地球人都知道只要将: 复制代码 代码如下: int me

C++中静态成员函数访问非静态成员的实例

C++中静态成员函数访问非静态成员的实例 实现代码: #include <iostream> /* 静态成员函数只能访问静态数据成员.静态成员函数和类以外的函数和数据,不能访问非静态数据成员,但静态成员函数或静态数据成员可由任意访问许可的函数访问.原因是:当前对象的地址(this)是被隐含地传递到被调用的函数的.但一个静态成员函数没有this指针,所以它无法访问非静态的成员函数. */ class a { public: static void FunctionA()//静态成员函数没有隐含的

C++ 中静态成员函数与非静态成员函数的区别

静态成员函数与非静态成员函数的区别 数据成员: 静态数据成员是类的一部分,为类的所有实例共享(静态区):非静态数据成员,类的每个实例都有一份拷贝(动态区). 静态数据成员的访问: 静态数据成员是类的一部分,在产生任何实例之前已经存在,通过类名::静态成员变量名访问. 函数成员(都在代码区): 静态函数成员与非静态函数成员都为类所有,对象并不存在函数的拷贝.静态成员函数和非静态成员函数的根本区别在于非静态函数由对象名.或者对象指针->调用,调用时编译器会向函数传递this指针:静态成员函数则有类名

深入解析C++编程中的静态成员函数

C++静态成员函数 与数据成员类似,成员函数也可以定义为静态的,在类中声明函数的前面加static就成了静态成员函数.如 static int volume( ); 和静态数据成员一样,静态成员函数是类的一部分,而不是对象的一部分. 如果要在类外调用公用的静态成员函数,要用类名和域运算符"::".如 Box::volume( ); 实际上也允许通过对象名调用静态成员函数,如 a.volume( ); 但这并不意味着此函数是属于对象a的,而只是用a的类型而已. 与静态数据成员不同,静态成

C++类静态成员与类静态成员函数详解

当将类的某个数据成员声明为static时,该静态数据成员只能被定义一次,而且要被同类的所有对象共享.各个对象都拥有类中每一个普通数据成员的副本,但静态数据成员只有一个实例存在,与定义了多少类对象无关.静态方法就是与该类相关的,是类的一种行为,而不是与该类的实例对象相关. 静态数据成员的用途之一是统计有多少个对象实际存在. 静态数据成员不能在类中初始化,实际上类定义只是在描述对象的蓝图,在其中指定初值是不允许的.也不能在类的构造函数中初始化该成员,因为静态数据成员为类的各个对象共享,否则每次创建一

C++静态成员函数不能调用非静态成员变量(详解)

其实我们从直观上可以很好的理解静态成员函数不能调用非静态成员变量这句话因为无论是静态成员函数还是静态成员变量,它们 都是在类的范畴之类的,及在类的整个生存周期里始终只能存在一份.然而非静态成员变量和非静态成员函数是针对类的对象而言. 然而从本质上来说类的静态成员函数的函数形参中没有默认的this指针,导致不能调用具体实例对象的成员. 下面我们来测试一下: 先在静态成员函数中调用静态成员变量: #include <iostream> using namespace std; class vpoe

PHP静态成员变量和非静态成员变量详解

数据成员可以分静态变量.非静态变量两种. 静态成员:静态类中的成员加入static修饰符,即是静态成员.可以直接使用类名+静态成员名访问此静态成员,因为静态成员存在于内存,非静态成员需要实例化才会分配内存,所以静态成员不能访问非静态的成员..因为静态成员存在于内存,所以非静态成员可以直接访问类中静态的成员. 非成静态员:所有没有加Static的成员都是非静态成员,当类被实例化之后,可以通过实例化的类名进行访问..非静态成员的生存期决定于该类的生存期..而静态成员则不存在生存期的概念,因为静态成员

C++静态成员变量和静态成员函数的使用方法总结

一.静态成员变量: 类体中的数据成员的声明前加上static关键字,该数据成员就成为了该类的静态数据成员.和其他数据成员一样,静态数据成员也遵守public/protected/private访问规则.同时,静态数据成员还具有以下特点: 1.静态数据成员的定义. 静态数据成员实际上是类域中的全局变量.所以,静态数据成员的定义(初始化)不应该被放在头文件中. 其定义方式与全局变量相同.举例如下: xxx.h文件 class base{ private: static const int _i;//

C++中静态成员函数与静态成员变量(static )

C++中静态成员函数与静态成员变量(static ) 这篇介绍了静态成员函数与静态成员变量,是我的读书笔记,我希望它够简短但又比较全面,起到复习的作用.如果有一些C++知识记不清楚了,它可以帮你很快回忆起来. 复习C语言的static关键字 (1)加在局部变量的前面使之成为静态局部变量,作用域还是在函数内部,可是生存周期延长了. (2)加在全局变量的前面限定该变量作用域为文件作用域,就是说即使其他文件使用了extern扩展作用域也不行.这在C语言的多人项目中非常有用,避免了变量的重名.然而在C+

Java非静态成员变量之死循环(详解)

1.非静态成员变量 当成员变量为非静态成员变量且对当前类进行实例化时,将会产生死循环 例子: public class ConstructorCls { private ConstructorCls obj=new ConstructorCls(); } public class TestC { public static void main(String[] args) { ConstructorCls c =new ConstructorCls(); } } 结果: Exception in