如何定义可同时在JS文件与HTML中调用的JavaScript函数

嘿，我来帮你搞定这个问题！你现在遇到的情况是把函数挂在vm上之后，HTML里能正常调用，但JavaScript文件内部却调用不了，核心原因是函数的可访问范围和vm的作用域问题，我给你两种实用的解决方案：

方案一：先定义独立函数，再挂载到vm #

这种方法最稳妥，既能让JS内部直接调用函数名，又能保留HTML里的调用方式：

// 第一步：先定义一个独立的函数，在当前JS文件内部可以直接调用
function loadSchedules() {
  Profile.query(function(result) {
    SchedulesByInterviewer(result["userName"]);
  });
}

// 第二步：把这个函数挂载到你的vm对象上，供HTML页面调用
vm.laodschedules = loadSchedules; // 这里保留你原来的属性名，要是拼写错误可以改成loadSchedules

这样操作后：

• 在JavaScript文件内部，直接写loadSchedules()就能触发逻辑；
• 在HTML文件里，继续用vm.laodschedules()调用就可以了。

方案二：确保vm在JS内部的可访问性 #

如果你更倾向于直接用vm上的方法，那要检查你的vm是不是被限制在局部作用域里了（比如在某个闭包或者函数内部定义的）。如果vm是全局可访问的（比如挂载到window上），那你在JS内部直接调用vm.laodschedules()就没问题：

// 假设你的vm是自定义对象或Vue实例，把它暴露到全局
window.vm = vm;

// 之后在JS内部直接调用
vm.laodschedules();

如果是Vue实例的话，也可以把方法定义在methods里，只要实例在当前作用域能访问到，内部调用就没问题：

const vm = new Vue({
  // 其他配置项...
  methods: {
    laodschedules() {
      Profile.query(function(result) {
        SchedulesByInterviewer(result["userName"]);
      });
    }
  }
});

// 在JS内部直接调用实例方法
vm.laodschedules();

为啥之前的写法不行？ #

你之前直接把函数赋值给vm.laodschedules，如果vm是局部作用域里的变量（比如在某个函数内部创建的），那JS文件的其他地方可能访问不到这个vm对象，自然就调用不了它上面的方法。而HTML里能调用，大概率是因为vm在全局作用域里能被访问到（比如通过window.vm）。

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