JavaScript开发指南

更新

Magento JavaScript Developer Guide

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/bk-javascript-dev-guide.html

简介

默认情况下,Magento应用程序使用RequireJS文件和模块加载器来优化包含JavaScript文件的页面加载时间,并管理JavaScript资源的依赖性。

有关如何定位和配置JS资源的信息,请参阅《配置指南》中的JavaScript资源主题。

本指南中的内容

本书的主题描述了以下内容。

  • JavaScript初始化 - 如何在JavaScript文件和.phtml模板中初始化JavaScript组件和小工具
  • 使用自定义JavaScript--如何扩展或替换默认的JavaScript组件/小工具。
  • 定位JavaScript组件 - 如何定义哪些组件(脚本)是在一个特定的商店页面上使用。
  • Magento的jQuery小工具 - Magento的jQuery小工具API文档。
  • 定制JavaScript图解--定制小部件相关任务的实用图解。
  • JavaScript自动测试在一个单独的JavaScript单元测试主题中描述。

术语

| TERM | DESCRIPTION | | ------------------------------------- | ------------------------------------------------------------ | | JavaScript component (JS component) | Any separate .js file decorated as AMD module. | | Ui component | JS component located in the Magento_Ui module, in the app/code/Magento/Ui/view directory, or JS component that extends files from this module. | | jQuery UI widget | A JS component/widget provided by the jQuery UI library used in Magento. | | jQuery widget | Custom widget created using jQuery UI Widget Factory and decorated as AMD module. Many Magento JS components are the jQuery widgets. |

本指南中使用的常规记号

模块和主题路径的常规记号

Magento应用组件,包括模块、主题和语言包在技术上可以位于Magento根目录下的任何地方。这指的是Magento默认组件和自定义组件。

模块和主题使用的是以下相对路径。

  • <theme_dir>。

主题目录。通常在谈论自定义主题,或任何一般的主题时使用。

对于Magento开箱即用的前端主题,通常是以下之一。

app/design/frontend//。 vendor/magento/theme-frontend-。

  • <module_dir>。

模块目录。当谈到一个特定的Magento模块时,也会使用类似于以下的符号。<Magento_Checkout_module_dir>。

对于Magento模块,其绝对路径通常是以下之一。

app/code//<Module vendor/magento/module--。