ECMAScript模塊
從2022.3.1109版本開始，Kendo UI代碼庫以ECMAScript模塊的形式提供。
ECMAScript模塊vs.捆綁腳本
與目前使用的捆綁腳本相比，新的ECMAScript模塊提供了以下有點：
- 加載單個而不是多個腳本文件
- 動態腳本加載
- 優化調試
- 瀏覽器兼容性
加載單個腳本文件
ECMAScript允許你引入一個腳本文件來加載特定的組件。以jQuery Grid for Kendo UI為例，以前如果您只想包含Grid組件而不是所有可用組件，那么您還必須以特定的順序包含與之相關的每個腳本依賴項。
頁面的<head>元素看起來類似于下面的代碼片段：
<script src="dist/js/kendo.core.js"></script> <script src="dist/js/kendo.data.js"></script> <script src="dist/js/kendo.columnsorter.js"></script> <script src="dist/js/kendo.userevents.js"></script> <script src="dist/js/kendo.draganddrop.js"></script> <!-- And about 80 more individual scripts for every single functionality of the Grid to work properly. -->
通過引入ECMAScript模塊，您可以只包含一個腳本文件，如下面的示例所示，因此，ECMAScript將自動加載所有必需的依賴項，而不需要您進行任何額外的操作，這將極大地提高生產率并減少丟失任何腳本文件的可能性。
<script src="dist/mjs/kendo.grid.js" type="module"></script>
動態腳本加載
除了使用script標記之外，還可以使用import()調用將模塊異步加載到潛在的非模塊環境中。
建議的方法是有用的。例如當您在窗口中有一個Kendo UI Grid時。在窗口打開之前網格組件沒有初始化，也不需要。因此在頁面首次加載時不需要導入模塊。相反您可以在窗口打開時加載模塊，然后才初始化Grid組件。
(async () => {
let shouldGridModuleBeLoaded = true;
// Load the Grid module only if a condition is met.
if (shouldGridModuleBeLoaded) {
await import("/dist/mjs/kendo.grid.js");
}
})();
優化調試
使用ECMAScript的另一個好處是，它使您能夠更容易地調試Kendo UI for jQuery源代碼。當導航到Devtools > Sources瀏覽器選項卡時，您能夠看到源代碼的非縮小版本，就像它在產品的開發環境中一樣。
另外，現在只有當Devtools打開時才會下載源地圖文件。
下圖展示了在Devtools瀏覽器中加載腳本的目錄結構：
瀏覽器兼容性
大多數現代瀏覽器都支持。如果一個項目需要舊的瀏覽器支持，你可以選擇使用另外兩種可用的模塊系統——commonjs或UMD。
獲取ECMAScript文件
你可以通過以下任何一種方式獲取ECMAScript模塊：
- 下載捆綁包
- 使用CDN
- 使用NPM安裝
手動構建源代碼
可以按照以下步驟手動構建組件的源代碼：
1.導航到下載頁面。
2.打開Kendo UI for jQuery頁面，向下滾動到源代碼部分。
3.下載并解壓源代碼后，導航到SRC文件夾并打開終端。
4.運行如下命令安裝
npm install
完成上述操作后，運行以下命令之一來構建腳本：
- 下面的命令構建傳統版本的腳本：
npm run scripts
- 下面的命令構建腳本的mjs版本：
npm run scripts:mjs
- 下面的命令構建esm和cjs版本的腳本：
npm run scripts:modules
- 一次運行上述所有命令:
npm run scripts:all
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線