Javascript 检测何时从包装函数中单击按钮

发布于04月30日

我有一个简单的脚本，我用来过滤一些点击按钮的结果.

在我使用的每个页面上，我都是这样调用这个脚本的:

myScript();

然后脚本是:(这只是脚本的一部分，实际上脚本本身是一个很长的脚本，在点击按钮之前会做一些更多的事情)

function myScript() {
       
  // .. other part of the script ..
    
  $("button.my-script.filter-button").on("click", filter)
    
  function filter() {
    let filters;
    // calculating the filters . . .
    // return filters;        
  }
}

我想让这个脚本在每个有它的页面上全局工作，并在点击.my-script和.filter-button类的按钮时触发它.但是，我如何才能检测到何时调用了filter()方法并方便地获得结果呢？

因为当它在包装器中时，我无法控制它(我希望其他需要使用此脚本的人能够在不修改脚本代码的情况下获得过滤器结果)

推荐答案

这个问题没有详细说明您的脚本应该如何工作，它应该有多灵活，它是否应该实例化以提供独立的实例，或者作为一个单独的实例，无论您是想使用发布/订阅模式，还是只使用jQuery的.trigger()等……事实上，有这么多方法，在实现和使用上都不同.

为了紧跟您的需求和提供的代码，我想您只是想让开发人员使用您的脚本，就像script()-set和fort一样.

如果是这种情况，您可能希望为options对象参数提供开发人员可以使用的所需方法，如下所示:

function myScript(options) {
  
  const opt = Object.assign({
    selector: ".my-script.filter-button",
    onFilter: () => {},
  }, options);
  
  // ... other part of the script ...
  
  function filter() {
    let filters = [1,2,3]; // Calculating the filters...
    opt.onFilter(filters);
  }
  
  $(opt.selector).on("click", filter);
}

// Usage
myScript({
  onFilter: (data) => {
    console.log(`My filters are: ${data}`);
  }
});

<button class="my-script filter-button">FILTER</button>
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>

使用上面的内容，在开发人员在HTML中更改按钮 Select 器的情况下，他可以轻松地提供新的 Select 器，如下所示:

// Usage
myScript({
  selector: "#myFilterButton",
  onFilter: (data) => {
    console.log(`My filters are: ${data}`);
  }
});

如果开发人员不想读取筛选器数据，并且对默认参数满意，他仍然可以使用脚本的最小格式，如

// Usage
myScript();

了解有关不同的JavaScript模式的更多信息:https://www.patterns.dev/posts

Javascript 检测何时从包装函数中单击按钮

推荐答案

Javascript相关问答推荐

Regex可以 Select 以任何顺序匹配组

我无法使用tailwind-css和reactJS修改图像的位置

JavaScript：循环访问不断变化的数组中的元素

使用typeof运算符获取对象值类型-接收字符串而不是数组

为什么getRecord()会因为与_logger相关的错误而失败？(使用Hedera SDK)

如何在使用fast-xml-parser构建ML时包括属性值？

拖放仅通过 Select 上传

如何在angular中从JSON值添加动态路由保护？

Rehype将hashtag呈现为URL

点击按钮一次有文本出现和褪色，而不是点击两次？(html，CSS，JavaScript)

我创建了一个创建对象的函数，我希望从该函数创建的对象具有唯一的键.我怎么能做到这一点？

编辑文本无响应.onClick(扩展脚本)

ChartJs未呈现

在HTML语言中调用外部JavaScript文件中的函数

使用VUE和SCSS的数字滚动动画(&；内容生成)

Angular 形式，从DOM中删除不会删除指定索引处的内容，但会删除最后一项

TypeError：无法读取未定义的属性(正在读取'；宽度'；)

每次重新呈现时调用useState initialValue函数

将Auth0用户对象存储在nextjs类型脚本的Reaction上下文中

为什么在运行于<；img>；事件处理程序中的JavaScript中x和y是不可变的？