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

Function finduser(userId) 
{ 
} 
Function showmessage(msg) 
{ 
Var message=”提示,出错了,错误原因” msg; 
Alert(message); 
} 
Function append(obj) 
{ 
Var onclick=”createdom()”; 
Var title=”你好”; 
$(obj).append(“” title ””); 
}

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

最后显示的结果是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

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

JavaScript面向对象之静态与非静态类的更多相关文章

  1. Javascript 类与静态类的实现(续)

    由于MM的事件已干完,接着我们的静态类的实现。这东西在Javascript里用得会非常的频繁,因为针对现在的网页,多个基于同一个类对象的页面不多,往往不同块对象的交互就可以解决问题了,这就需要在JS针对元素定义几个静态类就可以完事了,进入正题。

  2. Javascript 类与静态类的实现

    在Javascript里,对面向对象并没有一个直接的实现,对于代码方面也是非常的灵活。

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

    使用JavaScript面向对象完全出于偶然,因为大部分时间我都是在无图形界面的环境下工作,有时候就算是介入了web客户端的工作的时候,在写js和ajax时,最多的也只是写写function,从没有考虑过要使用JavaScript面向对象这么高级的技巧。

  4. php – 制作PDO mysql静态连接类的最佳方法?

    我是PDO的新手,也是一般用PHP的OOP所以请好好:)基本上我正在尝试基于PDO创建一个连接对象,以便我可以在我的网站中调用一个连接.我需要一些准备好的语句,根据我通过使用我正在尝试在下面创建的相同db对象传递的ID来查找不同的结果.如何创建和访问我在下面设置的db类,然后使用其中的函数来提取我需要的相关信息?

  5. php – 我可以为我的Logger使用静态类吗?

    记录类是例外.由于它们很少包含很多逻辑,因此您没有相同的测试问题.日志记录是使用静态类的好地方的完美示例.想想你的选择:>日志记录对象的全局实例?以上比使用静态日志更糟糕.

  6. 他们在Java中是否具有相当于C#的静态类?

    谢谢您的帮助.编辑:谢谢你的帮助.总结以上是DEVMAX为你收集整理的他们在Java中是否具有相当于C#的静态类?如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  7. C#是否等同于Objective-c的类别?

    我正在寻找一个相当于Objective-C的C#语言类别.解决方法您不能向类添加方法,但是您可以使用扩展方法来实现类似的效果.使用静态方法做一个静态类.静态方法的第一个参数被标记为“this”,并且该方法被装饰到具有参数类型的类中.然后,该方法将在String类型的所有实例上可用.但是,您仍然必须通过您的使用提供扩展类.这个例子取自微软自己的文档:http://msdn.microsoft.com

  8. c# – 实用类..好还是坏?

    )可能更好地作为一个类来处理.看看BCL中的System.Uri–这样可以处理一个干净,易于使用的统一资源标识符界面,可以很好地保持实际状态.我更喜欢这种方法来处理字符串,并强制用户传递一个字符串,记住验证它等等的实用程序方法.

  9. c# – 正确存储SQL凭据

    首先,这是一个教育问题–我不是在生产应用程序中实现的,因为我正在学习C#的基础知识.目前我有一个包含2个(实际上是3个,但一个是单元测试)项目的解决方案;>表格>班级图书馆在类库中,我有一个名为Database.cs的类,它与MySQL数据库通信.我不直接与此Database.cs类通信,但类库中的其他类(例如Products.cs).虽然,我需要凭据连接到这个MysqL数据库,我不知道哪种方式可

  10. c# – 具有初始化方法的类或静态类的全局实例

    或者其他某些特定页面?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部