大佬教程收集整理的这篇文章主要介绍了基本ES6 Javascript插件 – 在函数之间重用变量，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试构建一个基本的JS插件,可以在单击事件后调用以禁用按钮(以防止用户触发多个API调用)并提供有关正在加载/发生的事情的反馈.以下是它的外观：
这在个人基础上很有用,但我想将其重新编写为插件,以便我可以在整个网站上重复使用它.
这是来自文件loader.plugin.js的JS的缩减版本.
let originalBtntext;
export function showBtnLoader(btn,loadingText) {
const clickedBtn = btn;
const spinner = document.createElement('div');
spinner.classList.add('spin-loader');
originalBtntext = clickedBtn.textContent;
clickedBtn.textContent = loadingText;
clickedBtn.appendChild(spinner);
clickedBtn.setAttribute('disabled',truE);
clickedBtn.classList.add('loading');
return this;
}
export function hideBtnLoader(btn) {
const clickedBtn = btn.target;
clickedBtn.textContent = originalBtntext;
clickedBtn.removeAttribute('disabled');
clickedBtn.classList.remove('loading');
return this;
}
export function btnLoader() {
showBtnLoader();
hideBtnLoader();
}
这是一个我想如何使用它的例子.
import btnLoader from 'loaderPlugin';
const signupBtn = document.getElementById('signup-btn');
signupBtn.addEventListener('click',function(E) {
e.preventDefault();
btnLoader.showBtnLoader(signupBtn,'ValidaTing');
// Call API here
});
// Following API response
hideBtnLoader(signupBtn);
我的问题是我想从showBtnLoader函数存储originalBtntext,然后在hideBtnLoader函数中使用该变量.我当然可以用不同的方式实现这一点(例如将值作为数据属性添加并稍后抓取它)但我想知道是否有一种简单的方法.
我遇到的另一个问题是我不知道调用每个函数的正确方法以及我是否正确导入它.我尝试了以下内容.
btnLoader.showBtnLoader(signupBtn,'ValidaTing');
btnLoader(showBtnLoader(signupBtn,'ValidaTing'));
showBtnLoader(signupBtn,'ValidaTing');
但是我收到以下错误：
Uncaught ReferenceError: showBtnLoader is not defined
at HTMLButtonElement.我已经阅读了一些很好的文章和SO答案,如http://2ality.com/2014/09/es6-modules-final.html和ES6 export default with multiple functions referring to each other,但我对这种“正确”的方法感到有些困惑,以使其可重复使用.
任何指针都将非常感激.
export default function(btn,loadingText) {
function show() {
const clickedBtn = btn;
const spinner = document.createElement('div');
spinner.classList.add('spin-loader');
originalBtntext = clickedBtn.textContent;
clickedBtn.textContent = loadingText;
clickedBtn.appendChild(spinner);
clickedBtn.setAttribute('disabled',truE);
clickedBtn.classList.add('loading');
}
function hide() {
const clickedBtn = btn.target;
clickedBtn.textContent = originalBtntext;
clickedBtn.removeAttribute('disabled');
clickedBtn.classList.remove('loading');
}
return {
show,hide,};
}
然后,使用它：
import btnLoader from 'btnloader';
const signupBtn = document.getElementById('signup-btn');
const signupLoader = btnLoader( signupBtn,'ValidaTing' );
signupBtn.addEventListener('click',function(E) {
e.preventDefault();
signupLoader.show();
// Call API here
});
// Following API response
signupLoader.hide();
如果您需要将其从显示它的位置的其他文件中隐藏,则可以导出实例：
export const signupLoader = btnLoader( signupBtn,'ValidaTing' );
然后导入它.
import { signupLoader } from 'signupform';
function handleApi() {
signupLoader.hide();
}
以上是大佬教程为你收集整理的基本ES6 Javascript插件 – 在函数之间重用变量全部内容，希望文章能够帮你解决基本ES6 Javascript插件 – 在函数之间重用变量所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。