extjs6 动态引用js

在 Ext JS 6 中，动态引用 JavaScript 文件可以通过多种方式实现，主要涉及到 Ext.Loader 配置和动态创建脚本标签。以下是相关的基础概念、优势、类型、应用场景以及解决方案。

基础概念

Ext.Loader 是 Ext JS 提供的一个类加载器，用于动态加载 JavaScript 类文件。它允许在运行时按需加载类，从而减少初始加载时间并提高应用性能。

优势

按需加载：减少初始页面加载时间，提高用户体验。
模块化：代码更加模块化，便于维护和扩展。
减少带宽消耗：只加载用户实际需要的代码。

类型

使用 Ext.Loader 动态加载类：通过配置 Ext.Loader 来动态加载类文件。
动态创建脚本标签：直接在 DOM 中动态创建 <script> 标签来加载 JavaScript 文件。

应用场景

大型应用：在大型应用中，按需加载可以显著提高性能。
插件系统：在插件系统中，动态加载插件代码。
条件加载：根据用户操作或条件动态加载特定功能模块。

解决方案

使用 Ext.Loader 动态加载类

首先，确保在应用启动时配置 Ext.Loader：

Ext.application({
    name: 'MyApp',
    launch: function() {
        // 配置 Ext.Loader
        Ext.Loader.setConfig({
            enabled: true,
            paths: {
                'MyApp': 'path/to/myapp'
            }
        });

        // 动态加载类
        Ext.require('MyApp.view.MyView', function() {
            // 类加载完成后执行的代码
            var view = Ext.create('MyApp.view.MyView');
            Ext.Viewport.add(view);
        });
    }
});

动态创建脚本标签

如果需要加载非 Ext JS 类文件，可以直接动态创建 <script> 标签：

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.onload = callback;
    document.head.appendChild(script);
}

// 使用示例
loadScript('path/to/external.js', function() {
    // 脚本加载完成后执行的代码
    console.log('Script loaded');
});

常见问题及解决方法

加载失败：确保路径正确，检查网络连接，处理跨域问题。
加载顺序：如果依赖其他脚本，确保按正确顺序加载。
缓存问题：可以在 URL 后添加时间戳或版本号来避免缓存问题。

示例代码

假设我们有一个 MyApp.view.MyView 类，我们希望在用户点击按钮时动态加载并显示它：

Ext.application({
    name: 'MyApp',
    launch: function() {
        Ext.create('Ext.Button', {
            text: 'Load View',
            renderTo: Ext.getBody(),
            handler: function() {
                Ext.require('MyApp.view.MyView', function() {
                    var view = Ext.create('MyApp.view.MyView');
                    Ext.Viewport.add(view);
                });
            }
        });
    }
});

通过以上方法，可以在 Ext JS 6 中实现动态引用 JavaScript 文件，从而优化应用性能和用户体验。