Javascript 模块模式有什么好处?

2023-12-19

我一直在研究为我的团队提出标准化的 Javascript 编码风格。现在大多数资源推荐涉及闭包的“模块”模式,如下所示:

var Module = function() { 

    someMethod = function() { /* ... */ };

    return { 
        someMethod: someMethod
    };

}();

并像这样调用它Module.someMethod();。这种方法似乎只适用于传统 OOP 上下文中静态的方法,例如用于获取/保存数据的存储库类、用于发出外部请求的服务层等。除非我错过了什么,否则模块模式并不打算与通常需要在服务方法之间传递到 UI 粘合代码的数据类(例如 DTO)一起使用。

我看到引用的一个常见好处是,您可以使用模块模式在 Javascript 中拥有真正的私有方法和字段,但这也可以实现随着能够有静电or具有“经典”Javascript 风格的实例方法与此类似:

myClass = function(param) { 
    // this is completely public
    this.publicProperty = 'Foo';

    // this is completely private
    var privateProp = param;

    // this function can access the private fields
    // AND can be called publicly; best of both?
    this.someMethod = function() { 
        return privateProp;
    };

    // this function is private.  FOR INTERNAL USE ONLY
    function privateMethod() { 
        /* ... */
    };
}

// this method is static and doesn't require an instance
myClass.staticMethod = function() { /* ... */ };

// this method requires an instance and is the "public API"
myClass.prototype.instanceMethod = function() { /* ... */ };

所以我想我的问题是是什么让模块模式比传统风格更好?它更干净一些,但这似乎是唯一显而易见的好处;事实上,传统风格似乎能够提供真正的封装(类似于 Java 或 C# 等真正的 OOP 语言),而不是简单地返回纯静态方法的集合。

我有什么遗漏的吗?


模块模式可用于创建原型,另请参阅:

var Module = function() { 
  function Module() {};
  Module.prototype.whatever = function() {};
  return Module
}();
var m = new Module();
m.whatever();

正如另一位发帖者所说,干净的全局命名空间就是其原因。然而,实现此目的的另一种方法是使用 AMD 模式,它还解决了依赖管理等其他问题。它还将所有内容包装在某种封闭中。这是一个很棒的AMD简介 http://addyosmani.com/writing-modular-js/它代表异步模块定义。

我也推荐阅读JavaScript 模式 http://shop.oreilly.com/product/9780596806767.do因为它彻底涵盖了各种模块模式的原因。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript 模块模式有什么好处? 的相关文章

  • 页面在 Google Adwords 转化跟踪上重定向

    我有一个表单 人们可以在其中提交数据 然后使用 ajax 将数据发送到服务器 我已将其设置为 Google Adwords 中的转化 下面是我使用过的代码 问题是 当用户提交表单时 在收到响应后 它会重定向回我给出的 URL 我不想重定向
  • 如何使用 JavaScript 刷新页面?

    如何使用 JavaScript 刷新页面 Use location reload https developer mozilla org en US docs Web API Location reload 例如 每当元素带有以下内容时重新
  • 如何在 mongodb 聚合管道中使用 Javascript 对象?

    我有一个 JS 对象norm我想在 mongo 聚合管道中使用它 如下所示 var norm 1 1 2 1 16 3 1 413 4 1 622 5 1 6 6 1 753 7 3 001 8 2 818 9 3 291 10 2 824
  • 如何在 google.maps.event.addListener 中使用它

    以下示例有效 但是当我尝试传递参数并使用this在该功能不起作用 Working google maps event addListener markers i click showInfoWindow function showInfoW
  • 调用类实例方法 onclick javascript

    我有一个 javascript 文件 其中包含包含方法函数的类 我想知道如何从 onClick 事件调用类实例方法 function MyClass this instanceData Display Me this DisplayData
  • 如何调试超时等待异步 Angular 任务?无法在角度页面上找到元素

    编辑 请注意 在 ernst zwingli 的帮助下 我找到了问题的根源 因此 如果您遇到相同的错误 他指出的修复之一可能会帮助您 我的问题是量角器本身的一个已知问题 如果您认为这可能是您 我已经扩展了我的步骤 以在我最初的问题之后查明问
  • 自调用函数未定义

    如果我声明一个函数文字 var x function alert hi console log x returns the function code However var x function alert hi console log
  • 为什么函数声明在不同浏览器中的处理方式不同?

    虽然我在谷歌中找不到对此的引用 但我熟悉这样一个事实 在 javascript 中 全局函数声明在执行任何代码之前都会被解释 换句话说 这工作得很好 f function f 但是 我注意到 chrome 和 firefox 对全局函数声明
  • Rangy:插入符号下的单词(再次)

    我正在尝试创建一个预输入代码以添加到 wysihtml5 富文本编辑器 基本上 我需要能够插入人员 标签引用 例如 Twitter Github Facebook 我发现一些人试图实现同样的事情的代码 http jsfiddle net A
  • 冒泡可用于图像加载事件吗?

    我可以用吗 window addEventListner 某种程度上来说 我所有的图像都有一个display none 图像加载后 我想设置display inline 这样我就可以规范下载图像时显示的内容 在这种情况下 我无法预加载图像
  • Aurelia 中的角度服务?

    我还没有找到详细说明如何从 Angular 1 x 迁移到 Aurelia 的详细文档 到目前为止 我只看到人们详细介绍了 Angular 的概念directive可以在 Aurelia 中使用重制 customElement 好吧 足够简
  • jQuery 中什么函数相当于 .SelectMany()?

    让我解释一下 我们知道 jQuery 中的映射函数充当 Select 如 LINQ 中 tr map function return this children first returns 20 tds 现在的问题是我们如何在 jQuery
  • 在 Nodejs 中,如何停止 FOR 循环直到 MongoDB 调用返回

    我正在研究下面的代码片段 我有一个名为 stuObjList 的 JSON 对象数组 我想循环遍历数组以查找具有特定标志集的特定 JSON 对象 然后进行数据库调用以检索更多数据 当然 FOR 循环不会等待数据库调用返回并到达 j leng
  • Vue-Router 抽象父路由

    我正在尝试将当前网站迁移到 vuejs 站点地图必须是 login signup password reset browse search dozens of other routes 由于其中一些路线共享大量 fx 因此我将它们设为父路线
  • 使用ExternalInterface和IE从JavaScript获取Flash中的当前URL

    我正在尝试获取 Flash 播放器当前所在的 URL 不是 swf 文件的 URL 而是浏览器指向的 URL 到目前为止我已经使用过 var st String ExternalInterface call window location
  • 使用 File API polyfill 读取数据 URL

    我正在尝试使用文件 API 库 https github com mailru FileAPI https github com mailru FileAPI 作为不支持文件 API 的浏览器的后备 以便将文件作为数据 URL 读取并将其传
  • Chrome 调试器注入 javascript

    我有这样的好奇心 是否可以以某种方式在我的页面中注入 javascript 并执行它并调试它 正如您在控制台中所做的那样 但在控制台中您无法暂停并观察变量 是否可以调试我通过控制台输入的代码 为什么无法调试通过 XHR 接收的代码 Than
  • 区分 NaN 输入和输入类型为“number”的空输入

    我想使用 type number 的表单输入 并且只允许输入数字
  • $ 在 JQuery 中意味着什么

    在下面的 var obj one 1 two 2 three 3 four 4 five 5 each obj function i val console log val 这里是什么意思 是对象吗 是一个别名jQuery对象 函数 它充当
  • 为什么 try catch 块没有捕获 Promise 异常?

    我对承诺的错误处理感到困惑 答案可能很明显 但我不明白 我有以下示例代码 var test async function throw new Error Just another error try test then catch err

随机推荐

  • 出现错误“需要左值作为赋值的左操作数”

    我是 C 新手 在编译简单代码时遇到以下问题 include
  • 如何使用 font-face 缩小 CSS

    我有一个带有字体的样式表 当我使用在线服务缩小 CSS 时 字体停止工作 我采取的方法是提取 font face 代码 缩小 css 的其余部分 然后将 font face 粘贴到缩小后的样式表的顶部 好奇是否有人对此有更好的方法 我使用此
  • 如何在向前传递数据后将数据向后传递到视图控制器?

    我正在开发一个测验应用程序 并且在初始视图控制器之后出现第二个视图控制器 要求您回答问题 在第二个视图控制器上 用户必须按下按钮才能返回到初始视图控制器才能被问到另一个问题 然而 当我从第二个视图控制器返回时 我相信正在创建初始视图控制器的
  • appcelerator titan - 隐藏导航栏android

    是否可以在 Appcelerator Titanium 中永久隐藏 Android 底部导航 关于这个主题有很多问题 但没有很好的解决方案
  • 如何用numpy降序排序?

    我有一个像这样的 numpy 数组 A array 1 3 2 7 2 4 1 3 6 1 2 3 我想按降序对该矩阵的行进行排序 并获取排序矩阵的参数 如下所示 As array 3 1 2 0 1 3 0 2 0 3 2 1 我做了以下
  • Excel vba 重命名复选框

    我有一个包含许多复选框的工作表 Excel 自动将它们命名为 CheckBox1 CheckBox2 等 但是 对于我的文档 我需要将它们全部重命名为 Rij11 1 Rij11 2 等 Rij11 是第 11 行 1 是该行中的第一个复选
  • Java获取不带子字符串的文件扩展名

    我如何在Java中获得文件扩展名而不使用那个愚蠢的方法lastIndexOf etc apache Commons 库有FilenameUtils getExtension http commons apache org proper co
  • 如何计算wpf控件的总渲染时间?

    是否有任何探查器或工具可用于计算特定控件的 渲染时间 渲染时间 控件完全渲染到屏幕上所需的时间 我不知道有什么工具 但如果它只是一个控件 您可以创建一个子类 重写渲染方法并使用秒表来查找一些计时
  • As 公式中出现意外符号,无法找到

    我一直在使用as formula用于设置 glm 我不知道意外的符号在哪里 部分问题是我要转换的字符向量太长 大约有700字 插入两者之间 以便将其转换为公式 错误提示如下 Error in parse text x keep source
  • Webpack-Dev-Server 未显示最新的更改文件

    我正在尝试运行一个使用带有 HMR 和源映射的 webpack 开发服务器的项目 但遇到了问题 当我单独使用 webpack 和我的配置文件时 源映射会在控制台输出中指示 并且 HMR 可以进行页面刷新 但没有服务器 当我尝试使用 webp
  • 使用 Intellij IDE 运行 Scala Dotty 项目

    我使用 Dotty 模板创建了一个基本的 Scala Dotty 项目 并将该项目导入到 IntelliJ IDE 当我使用时一切正常sbt命令行 当我尝试在 IntelliJ IDE 中构建或运行它时 出现以下错误 Error scala
  • C 数组的指针算术

    我正在阅读 K R 中有关数组算术的部分 并发现了一些奇怪的东西 我发布了整个段落以了解上下文 但我主要关注粗体部分 如果 p 和 q 指向同一个数组的成员 则关系如 等都可以正常工作 例如 如果 p 点 则 p 有一个例外 可以使用数组末
  • 可解码嵌套数据,无需在 Swift 中创建额外的类

    我是 iOS 开发新手 很抱歉提前提出愚蠢的问题 我有这样的 json type post comments count 0 can post 1 likes count 0 user likes 0 can like 1 can publ
  • 指定在另一个文件中声明的全局变量的类型

    我如何告诉我的 IDE PHPStorm 某些全局变量不是 未声明 的 而是简单地在其他地方声明的 并有特定的类型 Magento 的一个例子 opcheckout js if response duplicateBillingInfo s
  • 在 Xcode Interface Builder 中 - 为什么编辑器--->排列菜单中的选项(包含“发送到前面”、“发送到后面”)经常被禁用?

    我想做的很简单 在子视图中的图像前面添加一个标签 但是 当选择我的标签时 所有排列选项都将被禁用 不可选择 我发现这种情况经常发生 我几乎不允许在排列菜单中更改对象的 z 轴 这可能是什么原因 避免此功能并以编程方式设置视图顺序是否是更好的
  • && 逻辑和 || 的 True 和 False逻辑表

    C 语言的真 假表 我听说过 C 语言中有一个表 true false for and or 是一种数学 他们说如果 true true true 且 false true false 我只是对此感到困惑 我尝试进行研究 但找不到任何表格
  • 如何使用 jquery 将自定义标头添加到 ASMX Web 服务调用?

    我有一个具有以下合同的网络服务 POST Service service asmx HTTP 1 1 Host xxx xxx xxx Content Type text xml charset utf 8 Content Length l
  • 此操作将取消挂起的刷新数据命令

    当我尝试此代码时 我收到错误 此操作将取消挂起的刷新数据命令 是否继续 ActiveWorkbook RefreshAll 即使我把Application Wait now TimeValue 00 01 20 Excel 未正确刷新 解决
  • 从 C# 中继承的类转换数据类型

    我试图了解我的统一项目的继承 但似乎发现我的设置存在限制 我在写这篇文章时感到很困惑 因为我仍在学习正确理解 C 我有一组继承的类 它们根据两种不同的行为进行划分 这样我就有了正确的引用 然后我需要对它们进行转换 以便我可以访问这些类之一中
  • Javascript 模块模式有什么好处?

    我一直在研究为我的团队提出标准化的 Javascript 编码风格 现在大多数资源推荐涉及闭包的 模块 模式 如下所示 var Module function someMethod function return someMethod so