在小项目中对于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. Delphi中设置条件断点

    写了这么长时间的代码,一直认为调试程序比写程序要重要,上次有人问俺,如何调试一个循环中某个循环条件位置下断点.本来想来在Delphi的断点设置中应该是有一个类似条件断点的东西的,不过我也一直不知道怎么 ...

  2. ASP.NET MVC 分部视图

    @model PartViewDemo.Models.HomeInfo@using PartViewDemo.Models;@{ ViewBag.Title = "Index";} ...

  3. 使用Ant编译提示Class not found: javac1.8

    无论是使用Eclipse还是使用Ant命令,都可能会在编译时遇到提示:Class not found: javac1.8 今天用Ant打包Android,apk,运行出现了batch_build.xm ...

  4. Asp.net Core WebApi 使用Swagger做帮助文档,并且自定义Swagger的UI

    WebApi写好之后,在线帮助文档以及能够在线调试的工具是专业化的表现,而Swagger毫无疑问是做Docs的最佳工具,自动生成每个Controller的接口说明,自动将参数解析成json,并且能够在 ...

  5. Solr4:数据导入(dataimport)时,不符合Solr日期类型要求的字段的处理

    背景: 要求将一个SQL Server2012版本中的数据库导入到Solr中.数据表中有一字段用来存储birthday日期字段,为nvarchar类型,长度为8,格式为:yyyyMMdd. 导入Sol ...

  6. Swift 字符与字符串

    Swift 的 String 和 Character 类型

  7. Binary Tree Postorder Traversal--leetcode难题讲解系列

    https://leetcode.com/problems/binary-tree-postorder-traversal/ Given a binary tree, return the posto ...

  8. POJ 2853 Sequence Sum Possibilities

    Sequence Sum Possibilities Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5537   Accep ...

  9. [Sql Server2008]树结构的递归算法

    http://blog.csdn.net/tonyzhou2008/article/details/5100683 本文主要讲述三个内容: 1.如何创建hierarychyid的表,插入数据及基本递归 ...

  10. 用Razor語法寫範本-RazorEngine組件介紹【转——非常好,可以用它来代替NVelocity】

    RazorEngine 官網網址:http://razorengine.codeplex.com 在找到RazorEngine之前曾經想過其他的方案,如T4與V8 Engine載jquery.temp ...