首页 > web前端 > js教程 > JavaScript中的模块化设计模式

JavaScript中的模块化设计模式

Christopher Nolan
发布: 2025-02-25 19:44:22
原创
859 人浏览过

Modular Design Patterns in JavaScript

核心要点

  • 成员类型理解: 掌握JavaScript中公共、私有、特权和保护成员的区别,它们分别为模块内的属性和方法提供不同级别的访问权限和安全性。
  • 模块模式变体: 了解基本模块模式和揭示模块模式之间的细微差别,后者提供一致的内部编码风格和对公开内容的灵活控制。
  • 特权成员的使用: 利用特权成员通过公共方法安全地公开私有变量,允许受控访问同时保持封装性。
  • 保护成员策略: 通过在受控范围内临时公开数据,然后恢复为私有数据,从而在多个模块之间共享数据,而无需外部访问,来实现JavaScript中的保护成员。
  • 增强技术: 探讨诸如apply()之类的用于将附加模块绑定到单个上下文中的方法,从而在保持模块独立性和可管理性的同时实现共享状态和行为。

本文将阐述扩展模块设计模式的结构和优势,该模式包括四种主要成员类型:

  • 公共成员: 可从任何地方访问的成员。
  • 私有成员: 只能从对象内部访问的成员。
  • 特权成员: 只能直接从对象内部访问的成员,但可以通过公共方法间接从外部访问。
  • 保护成员: 只能从对象内部或其任何模块内部访问的成员。

本文并非关于面向对象编程,因为我们将创建的结构是一种单例模式,这是一种单实例结构,不能实例化多次。事实上,它根本没有实例化(从拥有构造函数的角度来看),因此它是一种基于对象的模式,而不是面向对象的模式。有关基于对象和面向对象编程之间差异的更多信息,以及JavaScript中面向对象编程的介绍,我建议您阅读Ryan Frishberg的文章:JavaScript面向对象编程。

模块化设计模式

这里将使用揭示模块模式作为基本设计模式,它是经典模块模式的一种变体,但具有更多控制权。尽管已经有相当多的文章描述了这些模式,但很少有文章真正解释它们的工作原理,更少有文章具有如此完整的功能集!

基本模块模式

经典模块模式将脚本的所有代码包装在一个匿名函数字面量中,该字面量在返回时被赋值给单个变量。函数字面量只是一个调用自身的函数,因此函数字面量的最终赋值不是函数,而是函数返回的任何值。举一个简单的例子,函数字面量包含一个计算,因此最终赋值给sum的值是该计算的结果:

var sum = (function() { return 6 * 7; })();
登录后复制

为了说明该语法的意思,以下是相同的代码,抽象成一个命名函数:

function calculate() { return 6 * 7; }
var sum = (calculate)();
登录后复制

在这种情况下,我们实际上不需要在calculate周围加上括号,但在使用匿名函数时需要这样做,以便将其评估为单个表达式,而无需预先赋值。

公共和私有成员

因此,在函数字面量中,我们可以放入任何其他代码——例如变量、属性和函数——并且用于定义内部数据的不同类型的语法决定了公共成员和私有成员之间的划分。这是一个例子:

var MyModule = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  return {
    myPublicData : 42,
    myPublicFunction : function() {
      alert('public');
    }
  };
})();
登录后复制

由于我们返回了一个属性对象,并且该对象被赋值给MyModule,因此可以从对象外部访问这些属性,例如MyModule.myPublicDataMyModule.myPublicFunction。但是我们根本无法访问myPrivateDatamyPrivateFunction,因为变量只能在其原始作用域内访问。变量的作用域是定义它的上下文,由var语句确定。在这个例子中,私有变量的作用域是MyModule对象,因此只能从该对象内部访问它们。

揭示模块模式

使用模块模式,我们使用了两种不同的语法来创建公共成员和私有成员之间的区别。揭示模块模式是该模式的一种变体,它允许我们对所有内部构造使用相同的语法,只在最后推迟到对象字面量表示法,以返回(或揭示)公共成员。让我们再次看看那个对象,但这次使用揭示模块模式:

var MyModule = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  var myPublicData = 42;
  function myPublicFunction() {
    alert('public');
  }
  return {
    myPublicData : myPublicData,
    myPublicFunction : myPublicFunction
  };
})();
登录后复制

公共成员和私有成员之间的划分仍然相同,但这次不是由用于定义这些成员的原始语法实现的,而是简单地由返回的内容实现。这使得揭示模块模式成为一个有用的变体,因为它允许使用内部一致的编码风格。这也意味着您可以更改返回时公共成员的名称,甚至可以随时更改哪些成员将是公共成员。这种模式是由Christian Heilmann创新的,他在他的文章中对这种模式及其基础的模块模式进行了很好的解释:再次使用模块模式——向世界揭示一些东西。

(以下内容由于篇幅过长,将分段输出)

以上是JavaScript中的模块化设计模式的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板