如何在基础脚本中调用jQuery插件选项参数定义的函数？

核心原因 #

你调用插件时传入的myFunc大概率是函数命名表达式（比如直接写在选项对象里的function myFunc() {}），或是定义在局部作用域内的函数：

// 这种写法里，myFunc仅在自身函数内部可见，外部完全访问不到
$('#elem').myPlugin({
  read: function myFunc() { /* 业务逻辑 */ }
});

JavaScript的函数命名表达式有严格的作用域限制：函数名仅在函数自身的作用域内有效，外部作用域（比如anotherFunc）无法直接获取到它的引用。另外如果myFunc是在某个局部函数内定义的，外部作用域也没有访问该函数的权限。

解决方法 #

方法1：将函数定义在共享作用域 #

把myFunc定义在anotherFunc能访问到的作用域（比如全局作用域，或者共同的模块作用域），再将函数引用传给插件：

// 在全局/共享作用域定义函数
function myFunc() {
  console.log('执行read逻辑');
}

// 调用插件时传入函数引用
$('#elem').myPlugin({
  read: myFunc
});

// 外部anotherFunc可直接调用
function anotherFunc() {
  myFunc(); // 正常执行
}

方法2：通过插件实例存储的配置调用 #

修改插件代码，将合并后的配置对象存入元素的data属性中，外部即可通过元素获取配置并调用对应的函数：

// 修改插件实现
$.fn.myPlugin = function(options) {
  // 合并默认配置与用户传入的选项
  var settings = $.extend({
    read: function() {}
  }, options);
  
  // 将配置存储到元素的data属性，方便外部获取
  this.data('myPluginConfig', settings);
  
  // 插件内部执行read逻辑
  settings.read.apply(this);
  
  return this; // 保持jQuery链式调用特性
};

随后在外部anotherFunc中这样调用：

function anotherFunc() {
  // 获取元素的插件配置，调用read函数
  $('#elem').data('myPluginConfig').read();
}

方法3：避免使用命名表达式传参 #

如果一定要在插件调用时直接写函数逻辑，不要用命名表达式，而是将匿名函数赋值给外部可访问的变量：

let myFunc;

// 先定义函数并赋值给外部变量
myFunc = function() {
  console.log('执行read逻辑');
};

// 调用插件时传入函数引用
$('#elem').myPlugin({
  read: myFunc
});

function anotherFunc() {
  myFunc();
}

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