javascript设计模式--封装和信息隐藏(下)-阿里云开发者社区

开发者社区> bill.kang> 正文

javascript设计模式--封装和信息隐藏(下)

简介:   今天讲解的内容是高级模式(Advanced Patterns),如何实现静态方法和属性,常量还有其他一些知识点。   1.静态方法和属性   其实要实现这一功能还是要借助于闭包。在上一讲中的第三种实现方式也使用了闭包,但通过那种实现,内部属性和方法是实例级别的。
+关注继续查看

  今天讲解的内容是高级模式(Advanced Patterns),如何实现静态方法和属性,常量还有其他一些知识点。

  1.静态方法和属性

  其实要实现这一功能还是要借助于闭包。在上一讲中的第三种实现方式也使用了闭包,但通过那种实现,内部属性和方法是实例级别的。

var book1=new Book('isbn1','title1','author1');
var book2=new Book('isbn2','title2','author2');

alert(book1.getTitle()); //输出title1
alert(book2.getTitle()); //输出title2

  通过上面的例子可以看出,创建的book1和book2有独立的私有属性,对book2的私有属性赋值不会影响到book1。

  那么怎么才能实现类级别的私有属性和方法呢,这里除了需要使用闭包之外,还需要使用到匿名函数。代码如下:代码1

var Book = (function() {
  // Private static attributes.
  var numOfBooks = 0;
  // Private static method.
  function checkIsbn(isbn) {
    ...
  }

  // Return the constructor.   return function(newIsbn, newTitle, newAuthor) { // implements Publication     // Private attributes.     var isbn, title, author;     // Privileged methods.     this.getIsbn = function() {       return isbn;     };     this.setIsbn = function(newIsbn) {       if(!checkIsbn(newIsbn)) throw new Error('Book: Invalid ISBN.');       isbn = newIsbn;     };     this.getTitle = function() {       return title;     };     this.setTitle = function(newTitle) {       title = newTitle || 'No title specified';     };     this.getAuthor = function() {       return author;     };     this.setAuthor = function(newAuthor) {       author = newAuthor || 'No author specified';     };     this.getNumOfBooks = function(){
      return numOfBooks;
    };

    // Constructor code.     numOfBooks++; // Keep track of how many Books have been instantiated     // with the private static attribute.     if(numOfBooks > 50) throw new Error('Book: Only 50 instances of Book can be '                         + 'created.');     this.setIsbn(newIsbn);     this.setTitle(newTitle);     this.setAuthor(newAuthor);   } })();
// Public static method. Book.convertToTitleCase = function(inputString) {   ... };
// Public, non-privileged methods. Book.prototype = {   display: function() {     ...   } };

  对匿名函数不了解的同学可以自己去查阅相关资料。其实上面的代码等价于:代码2

var tempBook = function() {
  // Private static attributes.
  var numOfBooks = 0;
  // Private static method.
  function checkIsbn(isbn) {
    ...
  }
   // Return the constructor.
  return function(newIsbn, newTitle, newAuthor) { // implements Publication
    ...
  } };
var Book = tempBook();

// Public static method. Book.convertToTitleCase = function(inputString) {   ... }; // Public, non-privileged methods. Book.prototype = {   display: function() {     ...   } };

  那么如果再执行之前的代码会有什么效果呢:

var book1=new Book('isbn1','title1','author1');
var book2=new Book('isbn2','title2','author2'); 
alert(book1.getNumOfBooks()); //输出 2
alert(book2.getNumOfBooks()); //输出 2

  为什么会有这样的效果呢,其实通过匿名函数加闭包这种组合模式,numOfBooks已经是真正意义上的私有静态变量的,无论你创建多少个Book的实例,系统中也只有一个numOfBooks变量。有人或许疑问,为什么每创建一个新的Book实例的时候,没有多生成一个numOfBooks呢?

  我们从代码2上可以找到答案,其实我们创建的Book实例是执行了tempBook()方法,而不是new tempBook对象!tempBook对象在系统中只会运行一次,所以他内部的numOfBooks变量也就只有一份。每次执行new Book(‘...’,‘...’,‘...’);的时候,其实只是执行了tempBook中的function(newIsbn, newTitle, newAuthor),并没有创建新的tempBook对象,所有Book实例在使用getNumOfBooks方法时调用到的都是同一个numOfBooks。

  不知道我的讲解是否清楚,希望对大家有帮助。

 

  2.常量

   其实这部分还真没什么好讲的,只要你理解了上面的内容,在匿名函数内部实现一个类似于numOfBooks的变量,在整个初始化过程不对他进行修改,也不提供任何修改的方法,同时提供一个类似于getNumOfBooks方法供外部访问它,就ok了,代码我就懒的写了。

 

  3.使用封装的好处和弊端

  好处:

  可以实现对代码的控制,公布想公开的隐藏不想公开的信息。同时也方便你重构代码,你创建的对象的使用者不会因为你修改内部对象(私有的变量或者方法)而影响别人正常的使用。面相接口编程可以实现代码之间的松耦合。

  弊端:

  1.测试内部变量很困难,最好的办法是通过测试公共方法实现对内部方法的测试。

  2.因为复杂的作用域导致代码调试变的很困难。

 

adpics.aspx?source=kbh1983&sourcesuninfo

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android开发3——查看和输出日志信息
一、错误级别 Error > Warn > Info > Debug > Verbose(冗余)     二、Android项目日志查看视图 Console视图只能看项目的部署到模拟器上的信息,开发日志信息只能在LogCat视图上看。在LogCat视图上有按钮可以进行错误级别的筛选。比如点击Info按钮,会显示错误级别大于等于Info级别的日志信息。  
864 0
《JavaScript设计模式》——1.8 方法还可以这样用
没错,但是你发现没,你调用了3个方法,但是你对对象a书写了3遍。这是可以避免的,那就要在你声明的每一个方法末尾处将当前对象返回,在JavaScript中this指向的就是当前对象,所以你可以将它返回。例如我们开始写的第一个对象还记得么?改动它很简单,像下面这样就可以。
1006 0
javascript中信息考虑国际化的一种方法
在我参与的项目中,自打微软的 AJAX 提供了“ModalPopupExtender”这个玩意以后,网页上的提示信息或错误信息较多地采用了模式弹出的方式,用户体验更友好,效果也更酷。当然有时侯,需要在前台js中进行一些输入检查之类的操作,然后用对应的错误信息去设置弹出域中的错误文本,然后再让域弹出。
637 0
javascript设计模式--继承(上)
  本章的主题是继承,分为上下两部分来介绍,上主要来介绍call和apply方法,下用来介绍继承的几种实现方式。   在介绍继承的时候,call和apply是一个绕不过去的话题,也是大家需要深入了解的知识。
648 0
javascript设计模式--封装和信息隐藏(上)
  今天博文关注的是javascript中的封装,文章内容来自《pro javascript design patterns》(有兴趣的朋友可以直接去下)和自己对这一问题的理解。   本文分上下两部分,上部讲基本模式(basic patterns):完全暴露法,下划线标记法和使用闭包;下部讲高级模式(Advanced Patterns),如何实现静态方法和属性,常量还有其他一些知识点。
778 0
《JavaScript设计模式》——1.10 可以链式添加吗
本节书摘来自异步社区《JavaScript设计模式》一书中的第1章,第1.10节,作者:张容铭著,更多章节内容可以访问云栖社区“异步社区”公众号查看
961 0
+关注
bill.kang
从事软件研发十余年,入行前端开发六年有余,对前端工程化有一定认识。 现就职于客如云科技有限公司,任前端技术经理一职。
109
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载