在小项目中对于JavaScript使用,只要写几个function就行了。但在大型项目中,尤其是在开发追求良好的用户体验的网站中,如SNS,就会 用到大量的JavaScrpt,有时JavaScript的工作量胜过了C#,这时写一堆function,就会显得很乱,杂乱无章,甚至会出现命名冲突,管理和维 护起来都很麻烦。对于这种情况我们就需要使用面向对象的思想来开发JavaScript。那我们就这样作罢:

在上一节面 向对象的JavaScript(1):命名空间  中说了怎么定义JavaScript命名空间,这一节来说下紧接着的一个概念——类。虽然JavaScript中没有class关键字,但作为开发人员我们一定要有这个思想。在C#中类可以分为实例类和静态类,JavaScript亦然。

一,定义实例类: 在上节中我定义了一个cnblogs.news的命名空间,现在就在此命名空间下定义一个名为Article类:


cnblogs.news.Article=function(){
    var _this=this;
    this.title=null;
    this.content=null;
    this.show=function(){
    document.write("<h1>"+_this.title+"</h1>");
    document.write("<p>"+_this.content+"</p>");
  }
}

创建对象就和C#一样:


//  实例化一个对象
  var article =new cnblogs.news.Article();
//  给对象的属性赋值
  article.title="这是文章标题";  
  article.content="这是文章内容";
//  调用对象的方法
  article.show();


二,定义静态类:所谓静态类就是直接调用类的成员,换言之,类的成员是属于类的,不属于对象。同样以Article为例,代码如下:


cnblogs.news.Article={
    title:"这是文章标题",
    content:"这是文章内容",
    show:function(){
            document.write("<h1>"+cnblogs.news.Article.title+"</h1>");
            document.write("<p>"+cnblogs.news.Article.content+"</p>");
    }
};

调用方式也和C#类似:

 cnblogs.news.Article.show();

到这里或许你已经发现了,所谓JavaScript静态类其实就是一个json对象,恭喜,答对了! ^_^

 三,如何选择
        那么何时选择实例类,何时选择静态类呢,就个人经验而言(说得不对敬请斧正刀正,怎么正都可以^_^),开发一些对dom的依赖比较弱,而要求复用型很强的程序,如工具类,插件类,结构,使用静态类;反之如果程序对dom依赖很强,经常有变量传来传去,或者对类的结构造成变化,这时选用实例类。个人比较推崇第一种方案,其代码风格较之第二种更像C#,我想写惯了C#的同学也会这样觉得的,^_^。

面向对象的JavaScript(2):类的更多相关文章

  1. JavaScript 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档

    作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...

  2. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  3. 详解javascript的类

    前言 生活有度,人生添寿. 原文地址:详解javascript的类 博主博客地址:Damonare的个人博客 Javascript从当初的一个"弹窗语言",一步步发展成为现在前后端 ...

  4. 前端开发:面向对象与javascript中的面向对象实现(一)

    前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...

  5. Javascript定义类(class)的三种方法

    将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越 ...

  6. 一个简单的、面向对象的javascript基础框架

    如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...

  7. (转载)Javascript定义类(class)的三种方法

    因在公司内部培训中有讲解到JS类的概念,不甚明白,于是进行了google找到了相关的介绍说明,现将其摘抄下来,以作记录. 在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对 ...

  8. 面向对象的 JavaScript

    面向对象的javascript 一.创建对象 创建对象的几种方式: var obj = {}; var obj = new Object(); var obj = Object.create(fath ...

  9. [转]Javascript定义类的三种方法

    作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近2 ...

  10. javascript 定义类(转载)

    Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门 ...

随机推荐

  1. 为YAESU FT-817ND 增加频谱功能

    > ft817可谓是QRP神机啊,可能是一开始就接触SDR的缘故,没有频谱显示,总觉得很难受,好在经典的817从不缺乏魔改.终于找到一个解决方案: http://item.taobao.com/ ...

  2. config中自定义配置

    1. 定义自己的KeyValue <section name="TestKeyValue" type="System.Configuration.NameValue ...

  3. java-cef系列视频第一集:从官方代码编译

    本视频介绍了如何从官方给出步骤编译java-cef代码,生成可运行可移植的发行版. 值得一提的是:截至2016-09-24java-cef代码编译方式有所改变,读者请自行查看bitbucket上关于编 ...

  4. akka cluster sharding source code 学习 (2/5) handle off

    一旦 shard coordinator(相当于分布式系统的 zookeeper) 启动,它就会启动一个定时器,每隔一定的时间尝试平衡一下集群中各个节点的负载,平衡的办法是把那些负载较重的 actor ...

  5. 在linux下配置静态IP

    在终端中输入:vi /etc/sysconfig/network-scripts/ifcfg-eth0   开始编辑,填写ip地址.子网掩码.网关.DNS等.其中“红框内的信息”是必须得有的.   编 ...

  6. Android之输入框光标和Hint的位置

    如图所示,要实现这一的需求,一般人的布局方式就是左边一button,右边一button,中间一个EditText,为了输入框的响应触摸范围更大往往不会把宽度设置为wrap_content,要么设置成m ...

  7. python 教程_【python 基础教程详解】

    Lesson 1 准备好学习Python的环境下载的地址是:www.python.org为了大家的方便,我在校内作了copy:http://10.1.204.2/tool/compiler&I ...

  8. undefined reference to `_imp___ZN8QWebViewC1EP7QWidget'

    add this line to your .pro file: QT += webkitwidgets

  9. Sql触发器模板

    触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程. 触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. SQL Server 2005中触发器可以分 ...

  10. win7左ctrl和左alt键互换

    主要参考这篇文章: http://xyztony1985.blog.163.com/blog/static/3611782011752420104/ 感谢原博主 Windows Registry Ed ...