magento中的javascript · Magento企业级开发实战

magento使用Requirejs作为js的加载方式，使用requirejs支持异步加载，这种方式减少了用户感知页面加载的时间。 ***** js在Magento中的位置： 1. `lib/web`目录下的js文件：位于此处的资源可在 Magento 内的任何地方获得。 2. 模块级别 (`<module_dir>/view/<areaname>/web`)。添加的资源在其他模块和主题中可用. 3. 主题级别，针对特定模块 (`<theme_dir>/<VendorName>_<ModuleName>/web`)。此处添加的资源可用于\[继承\] 主题。 4. 主题级别 (`<theme_dir>/web`)。此处添加的资源可用于\[继承\]主题。 ***** 指定js: 建议在模板中而不是布局文件中指定 JavaScript 资源，以确保资源可用于页面正文。 ***** 访问js资源： JS 资源是使用相对路径访问的。 `vendor\magento\module-configurable-product\view\frontend\web\js\configurable.js` 文件发布到pub/static：`pub/static/frontend/<Vendor>/<theme>/<locale>/Magento_ConfigurableProduct/js/configurable.js。`这里<theme>和<locale>是当前应用在您的实例主题和语言环境中。在脚本中调用： ``` require(["Magento_ConfigurableProduct/js/configurable"], function(Configurable){ }); ``` 示例二：文件实际位置：`vendor\magento\theme-frontend-blank\Magento_Theme\web\js\theme.js` 文件发布到pub/static：`pub/static/frontend/Magento/blank/<locale>/Magento_Theme/js/theme.js` 在脚本中调用： ``` require(["Magento_Theme/js/theme"], function(){ }); ``` 示例三：文件实际位置：`lib/web/jquery.js` 文件发布到pub/static： `pub/static/<area>/<Vendor>/<theme>/<locale>/jquery.js` 在脚本中调用： ``` require(["jquery"], function($){ }); ``` ***** JavaScript 资源之间的依赖关系：(在magento中遵循requirejs的语法，详情用法可查看requirejs官方文档) 代码示例： `requirejs-config.js` ``` var config = { shim: { "3-rd-party-plugin": ["jquery"] } }; ``` 说明： "3-rd-party-plugin"：第三方插件名该配置指定了3-rd-party-plugin"这个插件依赖于jquery。 `<third-party-plugin>.js` ``` !(function($){ // plugin code // where $ == jQuery })(jQuery); ``` ***** Requirejs库的位置： Requirejs库在如下的layout文件中被引入：如adminhtml后台管理区域： `vendor/magento/module-backend/view/adminhtml/layout/default.xml` 在该文件的head标签部分被引入： ``` <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <title>Magento Admin</title> <meta name="viewport" content="width=1024"/> <meta name="format-detection" content="telephone=no"/> <link src="requirejs/require.js"/> <css src="extjs/resources/css/ext-all.css"/> <css src="extjs/resources/css/ytheme-magento.css"/> </head> <body> xxx </body> </page> ``` 前台页面引入requirejs文件的布局文件： `vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml` ***** 为了使配置更加精确和针对不同的模块和主题，requirejs-config.js可以根据需要将文件放置在不同的位置。 requirejs-config.js可以放置在指定的模块中，也可以放置在主题目录中：所有配置都按以下顺序收集和执行： 1. 库配置。 2. 模块级别的配置。 3. 祖先主题的主题模块级别的配置。 4. 当前主题的主题模块级别的配置。 5. 祖先主题的主题级别的配置。 6. 当前主题的主题级别的配置。