”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 模块

模块

发布于2024-11-04
浏览:299

Modules

  • 模块模式在 ES6 模块之前使用。
  • 目标:封装功能、支持私有数据、公开公共 API,所有这些都是通过使用 IIFE 来实现的。

IIFE:例如。 (功能(){})();

// IIFE Goal: Create a new scope, return the data just once. All of data inside IIFE will be private as it would inside the fn scope. 
// Using this way, we don't need to call it separately. And it ensures its called only once.
// IIFE is created only once, goal is 'NOT TO REUSE' by executing it multiple times.

// Result of running an IIFE is stored, or else it will disappear simply.
const ShoppingCart2 = (function(){
  const cart = [];
  const shippingCost = 10;
  const totalPrice = 237;
  const totalQuantity = 10;

  const addToCart = function(product, quantity){
    cart.push({product, quantity});
    console.log(`${quantity} ${product} added to cart. Shipping cost is ${shippingCost}`);
  };

  const orderStock = function(product, quantity){
    console.log(`${quantity} ${product} ordered from supplier`);
  };
  // Need to return something, in order to return a public API. For that, an object is returned containing stuff which needs to be made public.
  return {
    addToCart,
    cart, 
    totalPrice,
    totalQuantity
  };
})();
// Everything inside the above module is private to the module.
// The above fn returns the object mentioned inside return statement and assign it to the ShoppingCart2 variable mentioned at the start of fn. This IIFE is returned then long ago.
// All this is possible because of closures. Hence, addToCart can acccess the cart variable.

ShoppingCart2.addToCart('apple', 4);
ShoppingCart2.addToCart('pizza', 5);
ShoppingCart2;
ShoppingCart2.shippingCost; // inaccessible.

模块模式甚至在 ES6 模块之前就已经起作用了。

缺点:

  1. 现在,如果我们想要每个文件一个模块,就像我们使用 ES6 模块一样,那么需要创建多个脚本并将其链接到 HTML 文件中。
  2. 脚本加载的顺序也很重要。
  3. 所有这些变量都将存在于全局范围内。

除了原生的 ES6 模块和模块模式之外,JS 还支持其他非 JS 原生的模块系统。前任。 AMD、CommonJS
前任。 Node.js 中自始至终都使用 CommonJS 模块。最近ES6模块已经在Node.js中实现了
npm 存储库上的所有模块仍然使用 commonJS 模块系统,因为 npm 最初是为 Node 设计的。直到后来,npm 才成为整个 JS 世界的存储库。因此,我们基本上只能使用 CommonJS。所以,CommonJS 在 Node.js 中的影响仍然需要关注
就像 ES6 模块一样,CommonJS 中 1 个文件就是 1 个模块。
commonJS代码在浏览器中不起作用,但在node.js中可以工作
ES 模块最终将取代所有模块系统,但目前我们还需要使用 commonjs。

export关键字是一个对象,它没有在我们的代码中以及浏览器中定义。

// EXPORT
export.addToCart = function(product, quantity){
    cart.push({product, quantity});
    console.log(`${quantity} ${product} added to cart. Shipping cost is ${shippingCost}`);
};

// IMPORT: is similar to ES Modules but would use a require fn.
// require is not defined in browser env but its defined in node env as its a part of commonjs
const addToCart = require('./shoppingCart.js')
版本声明 本文转载于:https://dev.to/mahf001/iife-module-pattern-commonjs-5gkd?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 掌握脚本标签:使用 Async 和 Defer 进行精确的脚本控制
    掌握脚本标签:使用 Async 和 Defer 进行精确的脚本控制
    在 Web 开发领域,优化页面加载时间至关重要。 标签的两个强大属性 - 异步和延迟 - 可以显着影响网站的性能。在没有彻底理解这些属性的情况下使用它们可能会影响性能并导致错误。让我们从基础开始,了解这些属性的作用以及何时使用它们。 基础知识:脚本如何加载 默认情况下,当浏览器遇到...
    编程 发布于2024-11-08
  • JavaScript 中 +=_ 运算符背后的奥秘是什么?
    JavaScript 中 +=_ 运算符背后的奥秘是什么?
    解码 JavaScript 中神秘的 =_ 运算符JavaScript 中不常见的运算符 =_ 让开发人员感到困惑,让他们想知道它的真正本质。该运算符结合了赋值运算符 = 和一元加运算符 _。让我们深入研究它的复杂性并揭开它的用途。一元加运算符 (_)一元加运算符 ( ) 是一个尝试转换其操作数的前...
    编程 发布于2024-11-08
  • CSS Flexbox:构建定价表
    CSS Flexbox:构建定价表
    介绍 CSS Flexbox 是 Web 开发人员创建灵活且响应式布局的强大工具。 Flexbox 最常见的用例之一是构建定价表,这是许多网站的关键元素。在本文中,我们将讨论使用 CSS Flexbox 构建定价表的优点和缺点,并探讨其一些关键功能。 优点 将 CS...
    编程 发布于2024-11-08
  • 如何在 JavaScript 中格式化具有特定小数位的浮点数?
    如何在 JavaScript 中格式化具有特定小数位的浮点数?
    将浮点数格式化为特定小数位在 JavaScript 中,从浮点数转换为字符串可能会导致尾随小数位。要限制小数点后的位数,您可以使用特定函数。舍入函数一种方法是使用舍入函数,例如 toFixed。例如:var number = 0.3445434; console.log(number.toFixed...
    编程 发布于2024-11-08
  • 为什么我放弃 Python Flask 而选择 Django:Web 框架对决
    为什么我放弃 Python Flask 而选择 Django:Web 框架对决
    当您开始使用 Python Web 开发时,您可能会遇到 Django 和 Python Flask 作为两个最佳选择。这两个框架都有其优点,但根据我的经验,Django 通常是更好的选择。 我早期使用 Python Flask 的经历 当我第一次开始探索 Web 开发时,Pytho...
    编程 发布于2024-11-08
  • 掌握 Java 单元测试:&#Student Class Test&# 项目
    掌握 Java 单元测试:&#Student Class Test&# 项目
    通过 LabEx 的学生类测试项目深入单元测试的世界,释放您作为 Java 开发人员的潜力。这门综合课程将指导您完成为简单的 Student 类编写有效单元测试的过程,使您能够编写更可靠和可维护的代码。 介绍 在不断发展的软件开发领域,编写健壮且经过良好测试的代码的能力变得越来越重要...
    编程 发布于2024-11-08
  • 如何在 JavaScript 中模拟属性的 noSuchMethod 功能?
    如何在 JavaScript 中模拟属性的 noSuchMethod 功能?
    如何在 JavaScript 中实现 noSuchMethod 属性功能在 JavaScript 中,noSuchMethod虽然标准 JavaScript 语言中的属性没有直接等效项,但可以模拟类似的属性使用 ECMAScript 6 代理的功能。 ECMAScript 6 的发布引入了 Prox...
    编程 发布于2024-11-08
  • 为什么我的 GoLang 网络服务器无法提供大型 MP4 视频?
    为什么我的 GoLang 网络服务器无法提供大型 MP4 视频?
    GoLang HTTP Webserver Serving MP4 Video挑战使用 GoLang 创建了一个提供 HTML/JS/CSS 和图像的 Web 服务器。当服务器尝试提供 MP4 视频文件时,视频加载失败,仅显示视频控件。调查检查视频文件后,发现较小的视频可以正常工作,而较大的视频没有...
    编程 发布于2024-11-08
  • 如何在不使用 HTML 表单的情况下使用 PHP 重定向网页并发送 POST 数据?
    如何在不使用 HTML 表单的情况下使用 PHP 重定向网页并发送 POST 数据?
    使用 PHP 重定向和发送 POST 数据在这个问题中,我们遇到了一个独特的挑战:如何重定向网页并通过POST 方法不依赖于 HTML 表单。期望的结果是使用 PHP 脚本将隐藏字段提交到外部网关。通常,通过 GET 发送数据非常简单,如下面的代码片段所示:header('Location: htt...
    编程 发布于2024-11-08
  • 如何处理JSF表单提交过程中的授权失败?
    如何处理JSF表单提交过程中的授权失败?
    JSF 表单提交期间的授权失败:综合分析在 JSF 应用程序中实现自定义授权机制时,了解页面导航和表单提交之间的区别至关重要。虽然重定向可以无缝地进行页面导航,但它们在表单提交期间可能会遇到问题。问题原因此问题的根本原因在于 JSF 表单提交触发异步请求。当发送重定向作为对异步请求的响应时,JSF ...
    编程 发布于2024-11-08
  • 如何有效管理多个 JavaScript 和 CSS 文件以获得最佳页面性能?
    如何有效管理多个 JavaScript 和 CSS 文件以获得最佳页面性能?
    管理多个 JavaScript 和 CSS 文件:最佳实践组织过多的 JavaScript 和 CSS 文件可能会带来挑战,特别是在保持最佳页面性能方面。下面列出了有效解决此问题的最佳实践。PHP Minify:简化 HTTP 请求不要加载大量单独的文件,而是考虑使用 PHP Minify。该工具将...
    编程 发布于2024-11-08
  • 我的 Amazon SDE 面试经历 – 5 月 4 日
    我的 Amazon SDE 面试经历 – 5 月 4 日
    我的 Amazon SDE 面试经历 – 2024 年 5 月 2024 年 5 月,我有机会面试亚马逊的软件开发工程师 (SDE) 职位。这一切都始于一位招聘人员通过 LinkedIn 联系我。我很惊喜,因为它总是令人兴奋。 一切是如何开始的 招聘人员专业且清晰,...
    编程 发布于2024-11-08
  • 如何在 cURL POST 请求中发送多个图像?
    如何在 cURL POST 请求中发送多个图像?
    在 cURL POST 请求中使用数组在尝试使用 cURL 发送图像数组时,用户可能会遇到仅第一个图像的问题传输数组值。这个问题探讨了如何纠正这个问题。原始代码似乎在数组结构上有一个小缺陷。要解决此问题,建议使用 http_build_query 正确格式化数组:$fields = array( ...
    编程 发布于2024-11-08
  • 为什么 $_POST 中的 Axios POST 数据不可访问?
    为什么 $_POST 中的 Axios POST 数据不可访问?
    Axios Post 参数未由 $_POST 读取您正在使用 Axios 将数据发布到 PHP 端点,并希望在 $ 中访问它_POST 或 $_REQUEST。但是,您目前无法检测到它。最初,您使用了默认的 axios.post 方法,但由于怀疑标头问题而切换到提供的代码片段。尽管发生了这种变化,数...
    编程 发布于2024-11-08
  • ## JPQL 中的构造函数表达式:使用还是不使用?
    ## JPQL 中的构造函数表达式:使用还是不使用?
    JPQL 中的构造函数表达式:有益还是有问题的实践?JPQL 提供了使用构造函数表达式在 select 语句中创建新对象的能力。虽然此功能提供了某些优势,但它引发了关于其在软件开发实践中是否适用的问题。构造函数表达式的优点构造函数表达式允许开发人员从实体中提取特定数据并进行组装,从而简化了数据检索将...
    编程 发布于2024-11-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3