• <menu id="w2i4a"></menu>
  •
    logo telerik中文文檔

    ECMAScript模塊

    立即下載Kendo UI for jQuery

    從2022.3.1109版本開始，Kendo UI代碼庫以ECMAScript模塊的形式提供。

    ECMAScript模塊vs.捆綁腳本

    與目前使用的捆綁腳本相比，新的ECMAScript模塊提供了以下有點：

    • 加載單個而不是多個腳本文件
    • 動態(tài)腳本加載
    • 優(yōu)化調(diào)試
    • 瀏覽器兼容性
    加載單個腳本文件

    ECMAScript允許你引入一個腳本文件來加載特定的組件。以jQuery Grid for Kendo UI為例，以前如果您只想包含Grid組件而不是所有可用組件，那么您還必須以特定的順序包含與之相關(guān)的每個腳本依賴項。

    頁面的<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將自動加載所有必需的依賴項，而不需要您進行任何額外的操作，這將極大地提高生產(chǎn)率并減少丟失任何腳本文件的可能性。 


    <script src="dist/mjs/kendo.grid.js" type="module"></script>


    動態(tài)腳本加載

    除了使用script標(biāo)記之外，還可以使用import()調(diào)用將模塊異步加載到潛在的非模塊環(huán)境中。

    建議的方法是有用的。例如當(dāng)您在窗口中有一個Kendo UI Grid時。在窗口打開之前網(wǎng)格組件沒有初始化，也不需要。因此在頁面首次加載時不需要導(dǎo)入模塊。相反您可以在窗口打開時加載模塊，然后才初始化Grid組件。 


    (async () => {
let shouldGridModuleBeLoaded = true;

// Load the Grid module only if a condition is met.
if (shouldGridModuleBeLoaded) {
await import("/dist/mjs/kendo.grid.js");
}
})();


    優(yōu)化調(diào)試

    使用ECMAScript的另一個好處是，它使您能夠更容易地調(diào)試Kendo UI for jQuery源代碼。當(dāng)導(dǎo)航到Devtools > Sources瀏覽器選項卡時，您能夠看到源代碼的非縮小版本，就像它在產(chǎn)品的開發(fā)環(huán)境中一樣。

    另外，現(xiàn)在只有當(dāng)Devtools打開時才會下載源地圖文件。

    下圖展示了在Devtools瀏覽器中加載腳本的目錄結(jié)構(gòu)：

    加載腳本的目錄
    瀏覽器兼容性

    大多數(shù)現(xiàn)代瀏覽器都支持ECMAScript。如果一個項目需要舊的瀏覽器支持，你可以選擇使用另外兩種可用的模塊系統(tǒng)——commonjs或UMD。

    獲取ECMAScript文件

    你可以通過以下任何一種方式獲取ECMAScript模塊：

    • 下載捆綁包
    • 使用CDN
    • 使用NPM安裝
    手動構(gòu)建源代碼

    可以按照以下步驟手動構(gòu)建組件的源代碼：

    1.導(dǎo)航到下載頁面。

    2.打開Kendo UI for jQuery頁面，向下滾動到源代碼部分。

    源代碼

    3.下載并解壓源代碼后，導(dǎo)航到SRC文件夾并打開終端。

    4.運行如下命令安裝

    npm install

    完成上述操作后，運行以下命令之一來構(gòu)建腳本：

    • 下面的命令構(gòu)建傳統(tǒng)版本的腳本： 


    npm run scripts


    • 下面的命令構(gòu)建腳本的mjs版本： 


    npm run scripts:mjs


    • 下面的命令構(gòu)建esm和cjs版本的腳本： 


    npm run scripts:modules


    • 一次運行上述所有命令: 


    npm run scripts:all


    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();