在小项目中对于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. 解决 NDP40-KB2468871不能安装

    新机子 成功装了vs2010,然后装sql2012提示让装vs2012sp1,下载了sp1,装的时候,装到最后一个包NDP40-KB2468871的时候报错了 KB2468871安装失败 错误: Ex ...

  2. Android Studio 快捷键 for mac

    Action Mac OS Win/Linux 打开文件 Cmd + shift + O   打开Class文件 Cmd + O   覆写方法 Ctrl + O   生成方法(重写构造.setter ...

  3. WWDC2016-session402-whatsNewInSwift3

    Dock 应用的介绍:1.设计到的东西多2.使用 swift 设计3.Dock 的代码量: 200,000行4.更少的重写相同功能的代码 swift.org 官网介绍 Swift Open Sourc ...

  4. Crystal Reports "Access to report file denied. Another program may be using it."

    I encounter this problem several times, the way to get around this is to give "Everyone or Netw ...

  5. eclipse 代码提示时闪退问题

    解决办法:在eclipse.ini里面最下面加上这句话 -Dorg.eclipse.swt.browser.DefaultType=mozilla

  6. Microsoft.CSharp.CSharpCodeProvider

    Microsoft.CSharp.CSharpCodeProvider MSDN 提供对 C# 代码生成器和代码编译器的实例的访问.类提供可用来检索 C# ICodeGenerator 和 ICode ...

  7. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  8. win7 VS2012+openCV-2.4.11 配置

    1.下载 http://opencv.org/downloads.html (根据版本的不同选择,这里选择的是opencv-2.4.11) 2.安装 3.环境变量配置 计算机->属性->高 ...

  9. 使用 Portable Class Library(可移植类库)开发 Universal Windows App

    今天在这里跟大家聊聊关于 Windows Universal 应用夸平台的问题,首先Universal Windows App的定义相信大家已经有所了解了(如果你是一个刚刚接触 Universal A ...

  10. android SDK Manager 上载失败

    android SDK Manager 下载失败如题,利用android SDK Manager 无法下载各个版本的SDK,是最近无法连接上谷歌的服务器吗?我用了网上说的在C:\WINDOWS\sys ...