ES6 Javascript类和函数范围

Question

I am writing a simple js tab in new ES6 code but i am a bit troubles with scope of variables and exporting class.

Here is my code

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;

and i am using the function openTab as

<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>

But on clicking there is an error Uncaught ReferenceError: openTab is not defined

BUT, if i code like this,its working :) :

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;

But i have more other functions and I want them to keep in a class to maintain a integrity

Answer 1

You've effectively "namespaced" your openTab method by putting it in a class. You must create an instance of the class and then call the method on that instance.

var smdvAdmin = new SMDVadmin()

smdvAdmin.openTab()

Alternatively, you could make the method a static, thus not requiring a new instance:

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

SMDVadmin.openTab()

You may not need the class at all if you are importing a single method from a file.

You could instead just export the method

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

export default openTab;