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
目录
相关文章
|
7天前
|
前端开发 数据安全/隐私保护
crypto-js中AES的加解密封装
文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。
37 1
crypto-js中AES的加解密封装
|
2月前
|
存储 前端开发 JavaScript
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
|
22天前
|
设计模式 JavaScript
JS发布订阅模式封装(纯手工)
发布订阅模式是JS常用的设计模式,在面试中也会经常遇到,以下是我的手写实现方式,经测试效果不错,小伙伴们们可以直接拷贝使用。
|
2月前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转及跳转传参
JavaScript 地址信息与页面跳转及跳转传参
27 1
|
2月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
|
2月前
|
自然语言处理 JavaScript 前端开发
【走向世界】Vue.js国际化:打造无国界应用,让爱与信息跨越语言的边界!
【8月更文挑战第30天】本文详细介绍了Vue.js中实现国际化的多种方法及最佳实践。通过使用`vue-i18n`等第三方库,开发者能够轻松地为应用添加多语言支持,优化用户体验并扩大市场覆盖范围。文章涵盖从基本配置、动态加载语言包到考虑文化差异等方面的内容,帮助读者构建真正全球化且无缝多语言体验的应用程序。
59 0
|
2月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
21 0
|
2月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
2月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的新能源汽车信息咨询服务附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的新能源汽车信息咨询服务附带文章源码部署视频讲解等
32 1
下一篇
无影云桌面