22、Ember.js运行循环与应用打包部署全解析

落叶知秋263

于 2025-11-05 14:12:19 发布

阅读量17

点赞数

CC 4.0 BY-SA版权

分类专栏： Ember.js实战精髓解析文章标签： Ember.js 运行循环 Grunt.js

本文链接：https://blog.youkuaiyun.com/ansible6ops/article/details/154514409

Ember.js实战精髓解析专栏收录该内容

24 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

Ember.js运行循环与应用打包部署全解析

1. Ember.js运行循环基础

Ember.js运行循环是确保应用高效运行的关键机制。了解其实现方式，在应用复杂度增加时，有助于优化应用性能。运行循环有一套API，可用于执行、调度和重复应用代码。

2. 在运行循环约束内执行代码

可通过多种方法调度代码在运行循环内执行，包括立即执行、在设定时间后执行或在下一个运行循环中执行。
- 立即执行代码 ：使用 Ember.run(callback) ，若当前无运行循环，Ember.js会自动启动一个。示例如下：

Ember.run(function() {
    // 要执行的代码
});

在当前运行循环内执行代码 ：这是最常见的调度任务，使用 Ember.run 将回调放入默认的Actions队列。例如，在绘制折线图的视图中，监听 chart.series 属性变化，更新系列颜色并重新渲染视图：

Montric.ChartView = Ember.View.extend({
    contentObserver: function() {
        var series = this.get('chart.series');
        if (series) {
            var palette = new Rickshaw.Color.Palette({scheme: "munin"});
            series.forEach(function(serie) {
                if (!serie.color) {
                    serie.color = palette.color()
                }
            });
            var view = this;
            Ember.run(function() {
                view.rerender();
            });
        }
    }.observes('chart.series')
});

在下一个运行循环内执行代码 ：有两种方式，使用 Ember.run.next() 或 Ember.run.later(callback, 1) 。以下是使用 Ember.run.next() 的示例：

Montric.ChartView = Ember.View.extend({
    contentObserver: function() {
        // 代码省略，与上述示例相同
        var view = this;
        Ember.run.next(function() {
            view.rerender();
        });
    }.observes('chart.series')
});

在未来运行循环内执行代码 ：使用 Ember.run.later(callback, milliseconds) 可在指定时间后执行代码。例如，每15秒更新一次图表：

Montric.ChartView = Ember.View.extend({
    contentObserver: function() {
        // 代码省略，与上述示例相同
        var view = this;
        Ember.run.later(function() {
            view.rerender();
        }, 15000);
    }.observes('chart.series')
});

在特定队列内执行代码 ：多数情况下，会将代码调度到Actions队列。但有时需要细粒度控制，例如在Ember Fest应用中，需要在元素渲染后滚动到特定元素，可将代码调度到AfterRender队列：

Emberfest.IndexVenueRoute = Ember.Route.extend({
    renderTemplate: function() {
        this._super();
        Ember.run.schedule('afterRender', this, function(){
            document.getElementById('venue').scrollIntoView();
        });
    }
});

使用运行循环执行重复任务 ：Ember.js未实现 Ember.run.interval() 函数，可采用以下两种方法：
- 使用标准的JavaScript setInterval() 函数，将其内容包装在 Ember.run() 或 Ember.run.schedule() 中。
- 使用 Ember.run.later() 并确保回调中递归调用 Ember.run.later() 。

以下是Montric应用每15秒更新加载图表的示例：

Montric.ChartsController = Ember.ArrayController.extend({
    startTimer: function() {
        var controller = this;
        var intervalId = setInterval(function () {
            Ember.run(function() {
                if (controller.get('controllers.application.showLiveCharts')) {
                    controller.reloadCharts();
                }
            });
        }, 15000);
        this.set('chartTimerId', intervalId);
    },
    stopTimer: function() {
        if (this.get('chartTimerId') != null) {
            clearInterval(this.get('chartTimerId'));
            this.set('chartTimerId', null);
        }
    }
});

3. 运行循环总结

运行循环和Backburner.js在Ember.js框架中确保应用尽可能快速运行，且在多数情况下，Ember.js会自动将代码调度到正确的运行循环队列。但在一些边缘情况下，了解运行循环的工作原理和如何使用其队列，有助于编写更易读的代码。

4. JavaScript应用打包和组装概述

JavaScript构建工具尚处于起步阶段，现有工具存在使用困难和错误信息难以理解的问题，且JavaScript社区尚未就应用依赖管理和打包标准达成共识。

5. 选择目录结构

使用构建工具前，需正确组织应用的源代码文件，将不同类型的文件放在不同目录。以下是一个可能的目录结构示例：

project/
├── js/
│   ├── app.js
│   └── lib/
│       └── library.js
├── css/
│   └── style.css
├── html/
│   └── index.html
└── assets/
    └── image.png

6. 应用打包和部署步骤

将Ember.js应用打包和部署到适合的格式，可按以下步骤进行：
1. 理解应用打包和组装 ：了解构建工具的工作原理和任务。
2. 创建项目结构 ：将不同类型的文件放在不同目录，便于管理。
3. 最小化和拼接文件 ：减少HTTP请求，提高加载速度。
4. 编译模板 ：将模板编译为可执行的JavaScript代码。
5. 使用Grunt.js ：Grunt.js是流行的构建工具，可自动化上述任务。

7. 使用Grunt.js进行打包和部署

Grunt.js可帮助自动化应用的打包和部署任务。以下是一个简单的Gruntfile.js示例：

module.exports = function(grunt) {
    grunt.initConfig({
        concat: {
            options: {
                separator: ';'
            },
            dist: {
                src: ['js/*.js'],
                dest: 'dist/app.js'
            }
        },
        uglify: {
            dist: {
                files: {
                    'dist/app.min.js': ['dist/app.js']
                }
            }
        },
        cssmin: {
            target: {
                files: {
                    'dist/style.min.css': ['css/*.css']
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
};

8. 总结

通过合理使用Ember.js运行循环和掌握应用打包部署的方法，可提高应用的性能和可维护性。在实际开发中，根据应用的需求选择合适的调度方法和构建工具，确保应用的高效运行。

以下是Ember.js运行循环的流程图：

graph LR
    A[开始运行循环] --> B{前一个队列是否为空?}
    B -- 是 --> C[Sync队列]
    B -- 否 --> B
    C --> D{前一个队列是否为空?}
    D -- 是 --> E[Actions队列]
    D -- 否 --> D
    E --> F{前一个队列是否为空?}
    F -- 是 --> G[Render队列]
    F -- 否 --> F
    G --> H{前一个队列是否为空?}
    H -- 是 --> I[Destroy队列]
    H -- 否 --> H
    I --> J{前一个队列是否为空?}
    J -- 是 --> K[AfterRender队列]
    J -- 否 --> J
    K --> L[结束运行循环]

表格：运行循环调度方法总结
| 方法 | 描述 | 示例 |
| — | — | — |
| Ember.run(callback) | 立即执行代码 | Ember.run(function() { // 代码 }); |
| Ember.run.next(callback) | 在下一个运行循环执行代码 | Ember.run.next(function() { // 代码 }); |
| Ember.run.later(callback, milliseconds) | 在指定时间后执行代码 | Ember.run.later(function() { // 代码 }, 1000); |
| Ember.run.schedule(queue, context, callback) | 在特定队列执行代码 | Ember.run.schedule('afterRender', this, function() { // 代码 }); |

Ember.js运行循环与应用打包部署全解析

9. 深入剖析Grunt.js配置

Grunt.js的配置文件 Gruntfile.js 是自动化打包和部署的核心。在前面简单示例的基础上，我们进一步深入了解其配置细节。

在 grunt.initConfig 中，我们可以配置多个任务。例如 concat 任务用于拼接文件， uglify 任务用于压缩 JavaScript 文件， cssmin 任务用于压缩 CSS 文件。

module.exports = function(grunt) {
    grunt.initConfig({
        concat: {
            options: {
                separator: ';', // 拼接文件时使用的分隔符
                stripBanners: true // 去除文件头部注释
            },
            dist: {
                src: ['js/*.js', '!js/exclude.js'], // 要拼接的源文件，排除 js/exclude.js
                dest: 'dist/app.js' // 拼接后的目标文件
            }
        },
        uglify: {
            options: {
                mangle: true, // 混淆变量名
                compress: {
                    dead_code: true // 去除无用代码
                }
            },
            dist: {
                files: {
                    'dist/app.min.js': ['dist/app.js'] // 压缩 dist/app.js 到 dist/app.min.js
                }
            }
        },
        cssmin: {
            options: {
                mergeIntoShorthands: false, // 不合并为简写属性
                roundingPrecision: -1 // 不进行四舍五入
            },
            target: {
                files: {
                    'dist/style.min.css': ['css/*.css'] // 压缩所有 CSS 文件到 dist/style.min.css
                }
            }
        },
        watch: {
            scripts: {
                files: ['js/*.js', 'css/*.css'], // 监听的文件
                tasks: ['concat', 'uglify', 'cssmin'], // 文件变化时执行的任务
                options: {
                    spawn: false // 不生成新进程
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
    grunt.registerTask('watch-task', ['watch']);
};

在这个配置中，我们增加了更多的选项，如 concat 任务中的 stripBanners 用于去除文件头部注释， uglify 任务中的 mangle 和 compress 用于混淆变量名和去除无用代码， cssmin 任务中的 mergeIntoShorthands 和 roundingPrecision 用于控制 CSS 压缩的细节。同时，我们还增加了 watch 任务，用于监听文件变化并自动执行打包任务。

10. 不同场景下的运行循环调度策略

在实际开发中，不同的场景需要不同的运行循环调度策略。以下是一些常见场景及对应的调度方法。

场景	调度方法	示例代码
视图渲染后操作 DOM	`Ember.run.next()` 或 `Ember.run.schedule('afterRender')`

Ember.View.extend({
    didInsertElement: function() {
        Ember.run.next(this, function() {
            // 操作 DOM
        });
    }
});
``` |
| 定时更新数据 | `Ember.run.later()` |
```javascript
Ember.Controller.extend({
    init: function() {
        this._super();
        Ember.run.later(this, function() {
            this.updateData();
        }, 5000);
    },
    updateData: function() {
        // 更新数据
    }
});
``` |
| 重复执行任务 | `setInterval()` 结合 `Ember.run()` |
```javascript
Ember.Controller.extend({
    startTask: function() {
        setInterval(() => {
            Ember.run(this, function() {
                // 重复执行的任务
            });
        }, 3000);
    }
});
``` |

#### 11. 运行循环与性能优化
运行循环的合理使用对应用性能优化至关重要。通过合理调度代码，可以减少不必要的渲染和更新，提高应用响应速度。

例如，在更新大量数据时，如果直接在数据变化时进行渲染，可能会导致页面卡顿。可以使用 `Ember.run.scheduleOnce()` 方法，确保在一个运行循环中只执行一次渲染操作。

```javascript
Ember.Controller.extend({
    dataChanged: function() {
        Ember.run.scheduleOnce('actions', this, function() {
            this.updateView();
        });
    }.observes('data'),
    updateView: function() {
        // 更新视图
    }
});

12. 应用打包部署的最佳实践

在应用打包部署过程中，遵循以下最佳实践可以提高应用的稳定性和性能。

版本控制 ：使用版本控制系统（如 Git）管理代码，方便团队协作和回滚操作。
持续集成/持续部署（CI/CD） ：使用 CI/CD 工具（如 Jenkins、GitLab CI/CD）自动化打包和部署流程，确保每次代码更新都能快速、稳定地部署到生产环境。
代码分割 ：将应用代码分割成多个小块，按需加载，减少初始加载时间。
缓存策略 ：合理设置缓存策略，减少重复请求，提高应用加载速度。

13. 总结与展望

通过对 Ember.js 运行循环和应用打包部署的深入学习，我们了解了如何利用运行循环优化应用性能，以及如何使用 Grunt.js 等工具自动化打包和部署任务。

在未来的开发中，随着 JavaScript 技术的不断发展，我们可以期待更强大的构建工具和更高效的运行机制。同时，我们也应该不断探索和实践，结合项目需求，选择最合适的技术和方法，为用户提供更好的应用体验。

以下是应用打包部署流程的 mermaid 流程图：

graph LR
    A[开始] --> B[理解打包和组装]
    B --> C[创建项目结构]
    C --> D[最小化和拼接文件]
    D --> E[编译模板]
    E --> F[使用 Grunt.js 自动化任务]
    F --> G[部署到生产环境]
    G --> H[结束]