面向对象的JavaScript(2):类
在小项目中对于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):类的更多相关文章
- JavaScript 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档
作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...
- 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- 详解javascript的类
前言 生活有度,人生添寿. 原文地址:详解javascript的类 博主博客地址:Damonare的个人博客 Javascript从当初的一个"弹窗语言",一步步发展成为现在前后端 ...
- 前端开发:面向对象与javascript中的面向对象实现(一)
前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...
- Javascript定义类(class)的三种方法
将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越 ...
- 一个简单的、面向对象的javascript基础框架
如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...
- (转载)Javascript定义类(class)的三种方法
因在公司内部培训中有讲解到JS类的概念,不甚明白,于是进行了google找到了相关的介绍说明,现将其摘抄下来,以作记录. 在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对 ...
- 面向对象的 JavaScript
面向对象的javascript 一.创建对象 创建对象的几种方式: var obj = {}; var obj = new Object(); var obj = Object.create(fath ...
- [转]Javascript定义类的三种方法
作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近2 ...
- javascript 定义类(转载)
Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门 ...
随机推荐
- SQL 性能调优日常积累【转】
阅读目录 (1)选择最有效率的表名顺序(只在基于规则的优化器中有效) (2)WHERE子句中的连接顺序 (3)SELECT子句中避免使用 ‘ * ‘ (4)减少访问数据库的次数 (5)在SQL*Plu ...
- 是时候放弃sublime了
今天下午在忍无可忍之下终于卸载了sublime,最为一个在gui下最顺手的编辑器,放弃是需要非常充足的理由的. 放弃sublime无非是因为以下几点原因: 收费.我用的是未注册版的sublime,保存 ...
- Flash Builder中“Error: #2036 加载未完成”错误的解决方法
复制了一个名称为A的widget包,重命名为B,包含B.mxml和B.xml(配置文件),编译后无法加载B包创建的widget,报错为: 解决办法: 1.在工程的根目录下找到.actionScript ...
- DRUPAL 慢的原因
不止一次听人抱怨DRUPAL 慢,在本地开发环境尤为常见,较为常见的原因有:- 本地环境造成慢的原因,最常见的是由update manager 造成的,如果你发现你开的DRUPAL 页面 一直在等待 ...
- DataInputStream类和RandomAccessFile类的使用方法
// DataInputStream类实现了DataInput接口,要想从文件中读入二进制数据, // 你需要将DataInputStream与某个字节源相结合,例如FileInputStream / ...
- Oracle存储过程,以逗号分隔字符串传参的处理
Oracle存储过程,经常会遇见传入的参数是逗号分隔. 处理需要3步: 第一步,创建Type类型 第二部,创建函数 第三部,创建存储过程 代码如下: 第一步: create or replace ty ...
- text .global_start 和_start
.text定义一个代码段,这是GCC必须的.global_start和_start代码开始地址定义个标记
- android自定义TabView实现圆角列表
看到很多应用的设置界面都有圆角效果的列表,类似下面的 下面说说我的实现原理:继承LinearLayout,然后设置一个自定义的TabAdapter,类似于listview,添加一个setAdapter ...
- C#读取物理网卡信息及其对应的IP地址
using Microsoft.Win32; using System; using System.Collections; using System.Collections.Generic; usi ...
- 如何让js不产生冲突,避免全局变量的泛滥,合理运用命名空间
为了避免变量之间的覆盖与冲突,可以生成命名空间,命名空间是一种特殊的前缀,在js中,通过{ }对象实现. 在不同的匿名函数中,根据功能声明一个不同的命名空间,每个匿名函数中GLOBAL对象的属性都不直 ...