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. 當前主題的主題級別的配置。