文档彩票走势图>>telerik中文文档>>ECMAScript模块

ECMAScript模块

立即下载Kendo UI for jQuery

从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

彩票走势图