博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript 设计模式 ① 正确使用面向对象编程的姿势
阅读量:5914 次
发布时间:2019-06-19

本文共 4121 字,大约阅读时间需要 13 分钟。

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 }, ...  var 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    } }Smoke.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.money; //undefind smoke //undefind

(好像明白了什么......) 别急,让我们看下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

转载地址:http://jswvx.baihongyu.com/

你可能感兴趣的文章
WebStorm 10支持TypeScript 1.4到JavaScript的实时编译
查看>>
Gremlin发布面向混沌实验的应用级故障注入(ALF)平台
查看>>
Linus发布Linux 5.0 rc1版本,为原来4.21版本
查看>>
通用Windows平台应用程序开始恢复Win32功能
查看>>
CodeOne 主题演讲:Java,未来已来
查看>>
微软宣布支持基于虚拟机的Azure IOT Edge服务
查看>>
Rust发布1.32版本,跟踪、模块化、宏等方面均有改进
查看>>
腾讯组织架构整改引思考:中小团队要怎样搭建架构?
查看>>
IBM发布了自己的区块链即服务
查看>>
Timehop为什么使用Go替代Rails
查看>>
记一次获得3倍性能的Go程序优化实践
查看>>
三个技巧,将Docker镜像体积减小90%
查看>>
无服务器TOP3大关键问题及解决方案
查看>>
Stack Overflow上最热门问题是什么?
查看>>
构建一个运行在Azure虚拟机上的MySQL Spring Boot应用程序
查看>>
Visual Studio最新特性分析
查看>>
元数据驱动设计 —— 设计一套用于API数据检索的灵活引擎
查看>>
我对MVVM的学习笔记
查看>>
国内首款FPGA云服务器,性能是通用CPU服务器30倍以上
查看>>
快捷之道:轻松地使用 DispatchTime
查看>>