ES6 Javascript類和函數范圍

Question

我正在用新的ES6代碼編寫一個簡單的js選項卡，但是在變量范圍和導出類方面有點麻煩。

這是我的代碼

import $ from 'jquery';
import '../css/_style.scss';
import './mediaupload.js';
//
let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
tablinks = document.getElementsByClassName("tablinks");
class SMDVadmin{
    openTab(evt, tabname){
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(tabname).style.display = "block";
        evt.currentTarget.className += " active";
    }
}
export default SMDVadmin;

我正在使用功能openTab作為

<ul>
   <li><a href="#" onClick="openTab(e, tab1)" id="th1">HOme</a></li>
   <li><a href="#" onClick="openTab(e, tab2)" id="th2">Address</a></li>
</ul>

但是單擊時出現錯誤Uncaught ReferenceError: openTab is not defined

但是，如果我這樣編碼，它的工作:)：

let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
tablinks = document.getElementsByClassName("tablinks");

const openTab = (evt, tabname) => {
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabname).style.display = "block";
    evt.currentTarget.className += " active";
}

window.openTab = openTab;

但我還有其他功能，我希望它們保留在一個類中以保持完整性

Answer 1

您已經通過將openTab方法放在一個類中來有效地對其進行“命名空間”。 您必須創建該類的實例，然后在該實例上調用該方法。

var smdvAdmin = new SMDVadmin()

smdvAdmin.openTab()

另外，您可以將方法設為靜態，因此不需要新的實例：

class SMDVadmin{
    static openTab(evt, tabname){}
}

SMDVadmin.openTab()

如果要從文件導入單個方法，則可能根本不需要該類。

您可以改為導出方法

const openTab = (evt, tabname) => {}

export default openTab;