javascript 设计模式 ① 正确使用面向对象编程的姿势

本贴最后更新于 2750 天前,其中的信息可能已经事过境迁


javascript 是一门弱语言,他有着分同一般的灵活性使它迅速的成为几乎人人必会的一门语言,but,你们使用的姿势真的正确吗?

在以前的开发过程当中,老板:给我加个 验证用户邮箱验证用户短信... 功能!

function checkMessage(){...}
function checkEmail(){...}
function ... //茫茫多的函数

这样写好了之后 function 是全局的变量,那么是全局的就难免会对项目 javascript 环境造成污染,可能会对其他同事造成影响,我们首先要考虑会不会影响别人,如果别人重名对你的 checkMessage 覆盖,那么这样的 BUG 是很难发现的。为了不造成太多的 全局污染,我们可以这样写:

var checkObject = {
    checkMessage:function(){},
    checkEmail:function(){},
    ...
}

首先说明,并不是这样写就不会造成污染了,checkObject 依旧是全局变量,那么好处在哪里呢?想一下如果 Jquery 的 $ 被覆盖了,那么我们页面的

$.each | $.extends | $(#id) | $... 

都失效了,那么我们很容易定位问题: Jquery 出问题了!checkObject 也是一样,当 checkObject 出问题了,我们很容易定位错误。

调用:checkObject.checkMessage() 即可

那么问题又来了:如果有同事用我的 checkObject 搞一些事情呢?它可以直接用我的方法么?当然可以,问题是,你买了一本书你愿意别人乱写乱画么?我们可以改造一下:

var checkObject = function(){
    return {
        checkMessage:function(){},
        checkEmail:function(){},
        ...
    }
}

我们把方法通过 function 的调用返回,这样别人可以这样用 :

var check = checkObject();
check.checkEmail();

我们可以再完善一下,把 checkObject 看成 java 的类,checkMessage,checkEmail 看成 java 的 public 公有方法,既然看成类了,我们可以把 checkObject 写成大写 CheckObject

var CheckObject = function(){
    this.checkMessage = function(){},
    this.checkEmail = function(){},
    ...
}

别人调用:

var check = new CheckObject(); //既然是一个类了,就要 new 来实例化了
check.checkEmail();

每一次通过 new 创建新对象的时候,新创建的对象都会对类 this 上的属性进行复制,你定义了两个那么就复制两次,那么再更多呢?是不是感觉有些奢侈呢,考虑我们可以运用 javascript 的原型 prototype 来创建它:

 var CheckObject = function(){
   
 }
 CheckObject.prototype.checkMessage = function(){},
 CheckObject.prototype.checkEmail = function(){},
 ...

你嫌麻烦?

 var CheckObject = function(){
   
 }
 CheckObject.prototype{
 checkMessage : function(){},
 checkEmail : function(){},
 ...
 }
 

这样我们的方法都复制到 CheckObject 的原型连上去了,创建出来的对象都是通过 prototype 依次寻找,都绑定在 CheckObject 的原型上 __proto__

随便看一下 Jquery 的原型链,是不是很熟悉的方法呢?

同志们是否好奇 Jquery 的方法是如何链式调用的呢?很简单,我来模拟一下

 var CheckObject = function(){
   
 }
 CheckObject.prototype{
 checkMessage : function(){ ... return this },
 checkEmail : function(){ ... return this },
 ...
 
 CheckObject check = new CheckObject();
 check.checkMessage().checkEmail();

就这么简单,我们只需要将 this 指代的当前对象全部返回即可。

咳咳,言归正传,回到面向对象编程的课题上

java 中有 private 声明的私有变量、 有通过 publicgetter setter 方法进行通信,有 static 修饰的 静态变量静态方法有构造器,那么 javascript 可以使用这样的设计模式么?可以,跟我往下看:

我们去商店买烟

var Smoke = function(id,name){
    //私有属性
    var num = 0;
    
    //对象的公有属性  (需要new)
    this.id = id;

    //私有方法
    function checkID(){ return true};

    //公有 setter getter 构造函数
    this.setName = function(name){
        this.name = name;
    }
    this.getName = function(){
        return this.name;
    }
    //对象的公有属性  (需要new)
    this.information = function(){
        //只有在Smoke内部才能调用checkID() 
        if(checkID()) return this.name+'香烟'+'订单号 :'+this.id

    }
}
Smock.prototype = {
    money:'10元',  //公有属性(不需要new) 直接Smoke.money[想没想到Array的length?]
    other:function(){}
}

var smoke = new Smoke(994857,'煊赫门');
smoke.information(); //"undefined香烟订单号 :994857" ps:因为我们没对Smoke的name属性赋值
smoke.setName('煊赫门'); //我们赋值
smoke.information(); //"煊赫门香烟订单号 :994857"
smoke.num; //undefined ps:很明显他是私有属性
smoke.checkID();//error is not function ps:很明显私有方法


如果我们没有 new

var smoke = Smoke(994857,'煊赫门');
smoke.information(); //Uncaught TypeError: Cannot read property 'information' of undefined

纳尼报错了?

smoke //undefind
smoke.money; //10元 (好像明白了什么......)

别急让我们看下 window

window.information(); // "undefined香烟订单号 :994857"

恍然大悟,因为 new 是可以对当前对象(Smoke)的 this 不停地赋值【上面讲过】,而上面的没有 new 相当于全局执行了 Smoke() 所以是他的 this 指向到 window 去了!
怎么避免这种无操作呢?我们在 Smoke 内部进行类型检查:

var Smoke = function(id,name){
    var num = 0;
    function checkID(){ return true};
    //判断this在执行过程中是不是属于Smoke,如果是说明是new过的  0.0
    if(this instanceof Smoke){ 
        this.id = id;
        this.setName = function(name){
            this.name = name;
        }
        this.getName = function(){
            return this.name;
        }
        //对象的公有属性  (需要new)
        this.information = function(){
            //只有在Smoke内部才能调用checkID() 
            if(checkID()) return this.name+'香烟'+'订单号 :'+this.id
    
        }
    }else{
        return new Smoke(id,name);//内部重新new一个  0.0
    }
}

看完了么,感觉爽不,是不是感觉就是在写 java 呢,其实 javascript 就是灵活在这里,这只是 javascript 一种常用的面向对象设计模式,后面我会将更多的设计模式,这些设计模式都是经过前人无数心血总结出来给我们的,我们为什么不用呢?

广大青年才俊可以入群交流 : 147255248

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    728 引用 • 1326 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • 面向对象
    13 引用 • 28 回帖
  • 代码规范
    1 引用 • 2 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 631 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 1 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    132 引用 • 188 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 387 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 182 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    176 引用 • 815 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 63 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 53 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    285 引用 • 728 回帖
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖 • 1 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 210 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 10 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 2 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    46 引用 • 25 回帖
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    5 引用 • 62 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    25 引用 • 83 回帖
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 354 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 1 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1387 回帖 • 294 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 335 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    11 引用 • 5 回帖 • 606 关注