Magento 2 JS 开发入门

默认情况下,Magento 2 使用 RequireJS (可参考 Magento 2 and RequireJS (翻译)关于 RequireJS)来异步加载 js 模块,管理模块依赖。在这个大前提下,Magento 2 中使用的主要 JS 库是 jQuery 和 KnockoutJS (简称 ko),还使用了 AngularJS (used for the web based installer)和 Underscore (This provides some useful Javascript functions to manipulate Javascript arrays, functions, objects and collections.)

另外 Magento 做了许多自定义的设置,比如对 ko 模版引擎的改造,让我们不需要用 <script type="text/html"> 来声明模版,也把模版从 phtml 文件中分离到独立的 html 文件中,有利于模版的复用。比如,创建了 ko 的自定义绑定 scope 。上面提到的可以参考 Magento 2 and konockoutjs。还有,<script type="text/x-magento-init"> 也是 Magento 2 的自定义设计(可参考 <script type="text/x-magento-init">)。

既然用到了 jQuery ,那么 jQuery 丰富的插件就绝对是绕不过去的话题。但是 jQuery 的插件并不都是符合 AMD 规范的,所以,我们需要用到 requireJS 的 shim ,参考 RequireJS 的 shim 用法

RequireJS 的 shim 解决的是加载非 AMD 规范模块的问题,并不限于 jQuery 的插件

我们中文语境中的 jQuery 插件,可能指的是 jQuery Plugin 或者是 jQuery widget。但是这两者是有差别的,参考 jQuery Plugin and Widget。下面介绍 Magento 2 中的几个术语,是比较容易混淆的概念。

术语 描述
JavaScript component (JS component) Any separate .js file decorated as AMD module。 符合 AMD 规范的 JS 模块,通常都是一个文件一个模块
Ui component JS component located in the Magento_Ui module, in the app/code/Magento/Ui/view directory. 他是 Magento_Ui 模块中的一组 JS ,位于 app/code/Magento/Ui/view 目录下
jQuery UI widget A JS component/widget provided by jQuery UI library used in Magento. jQuery UI 中包含的组件,参考 jQuery UI
jQuery widget Custom widget created using jQuery UI Widget Factory and decorated as AMD module. Many Magento JS components are jQuery widget. 使用 jQuery UI Widget Factory 创建并且符合 AMD 规范的 js 模块, Magento 中许多 js 组件都是 jQuery widget ,参考 Magento jQuery widgets

参考文档

JavaScript

2 comments

  1. 胡宇成

    收获颇多!继续保持!

    1. Pisces Post author

      一起加油!

发表评论

电子邮件地址不会被公开。 必填项已用*标注