Ember项目中vendor目录下custom.js文件无法正常工作的问题

你遇到的核心问题其实是代码执行时机不匹配：当Ember加载vendor目录里的custom.js时，页面上的侧边栏、头部这些目标DOM元素还没完成渲染，脚本里操作DOM的代码自然找不到对应元素，没法生效；而把代码放到hbs的<script>标签里时，模板已经渲染完成，DOM元素存在，代码就能正常运行了。

下面是几个靠谱的解决办法，按Ember最佳实践优先级排序：

1. 利用组件生命周期钩子执行初始化代码 #

这是最贴合Ember开发模式的方案：

• 如果你有对应的侧边栏、头部组件，在组件的didRender钩子（Ember Octane及以后版本）或者didInsertElement钩子（旧版本）里调用custom.js的初始化逻辑。比如：

// app/components/sidebar.js
import Component from '@glimmer/component';
import { didRender } from '@ember/render-modifiers';

export default class SidebarComponent extends Component {
  @didRender
  initSidebar() {
    // 假设custom.js里暴露了全局初始化函数
    window.initSidebar();
  }
}

• 如果custom.js没有暴露可调用的全局函数，先修改它把核心逻辑封装起来：

// vendor/custom.js
// 原有的侧边栏、头部功能代码...

// 新增全局调用入口
window.initAdminTheme = function() {
  // 把原来自动执行的初始化代码移到这里
};

之后在组件钩子或应用初始化器里调用这个函数即可。

2. 用Ember.run确保DOM就绪后执行 #

如果不想修改组件，也可以在应用启动阶段，等所有DOM渲染完成后执行初始化：

• 生成应用初始化器：ember generate initializer admin-theme
• 在初始化器里添加逻辑：

// app/initializers/admin-theme.js
import { run } from '@ember/runloop';

export function initialize(application) {
  run.scheduleOnce('afterRender', () => {
    // 调用custom.js的初始化函数
    window.initAdminTheme();
  });
}

export default {
  initialize
};

afterRender钩子会在所有DOM节点渲染完成后触发，这时候操作DOM就不会出现找不到元素的问题了。

3. 调整Vendor文件加载顺序（不推荐） #

虽然可以在ember-cli-build.js里指定custom.js的加载位置，让它在应用代码之后执行：

// ember-cli-build.js
app.import('vendor/custom.js', {
  after: 'app.js'
});

但这种方式不够可靠，因为Ember的渲染流程仍可能晚于脚本执行时机，所以优先推荐前两种方案。

另外要注意：如果custom.js依赖jQuery或其他第三方库，一定要确保这些依赖在custom.js之前被引入，比如在ember-cli-build.js里先import依赖库，再导入custom.js。

内容的提问来源于stack exchange，提问作者spacerobot