Question

我有一个使用ES6实现的库，我有一个init方法，当被调用时在视图上绘制一个按钮。一些内部更改发生在“ this.Object ”变量中。如何公开添加到Class范围之外的按钮的click事件，以便开发人员可以访问它？

我的图书馆班级

 class Test {
    constructor(selector) {
        this.selector = document.querySelector(selector);
        this.Object = {};
    }

    init(content = null) {
        if (content == null) {
            this.selector.innerHTML = `
                <button id="test_btn" type="button">Click Me!</button>
            `;

            this.Object = {
                'name': 'test'
            };

            this.button = document.getElementById('test_btn');
            this.button.addEventListener('click', (event) => {
                console.log(this.Object);
                // how to return the variable value which is outside of the class Scope
            });
        } return this.selector, this.Object;
    }
}
module.exports = (selector) => {
    return new Test(selector);
};

当我在html中使用库时，如何获取“this.object”的值，该值现在是init方法中的更改值以及如何在html中打印“this.object”的新值内容？

下面是我使用我的库

的html代码

 <body>
    <div class="">Hello World</div>
    <!-- minfied version of my library -->
    <script src="build/Test.min.js" charset="utf-8"></script>

    <script type="text/javascript">
        // intialise library functionality
        Test('div').init();

        // console.log(this.new_Object)
        // How to access the object from here
    </script>
</body>

如何公开添加到Class范围之外的按钮的click事件，以便开发人员可以访问它？

如果帖子需要更多说明，请随时在评论中表达您的想法。任何帮助将在这件事上受到赞赏。

PS：这是传统的JavaScript，不涉及jQuery，我试着保持这种方式

Answer 1

这是解决方案：https://jsfiddle.net/fmvomcwn/

  module.exports = Test;

  /////
  const t = new Test('div');
  t.init();

  console.log(t.Object);

您应该从Test创建新对象，并且您可以访问其字段

Answer 2

class Test {
    constructor(selector) {
        this.selector = document.querySelector(selector);
        this.Object = {};
    }

    init(content = null) {
        if (content == null) {
            var self = this;
            
            this.selector.innerHTML = `
                <button id="test_btn" type="button">Click Me!</button>
            `;

            this.Object = {
                'name': 'test'
            };

            this.button = document.getElementById('test_btn');
            this.button.addEventListener('click', (event) => {
                console.log(self.Object);
                // how to return the variable value which is outside of the class Scope
            });
        }
    }
}
//module.exports = (selector) => {
//    return new Test(selector);
//};

// intialise library functionality
var test = new Test('div');
test.init();

console.log(test.Object)
// How to access the object from here

<body>
    <div class="">Hello World</div>
</body>

当你调用和事件处理程序时，处理程序中的'this'被设置为窗口或元素（取决于哪个浏览器）。因此，为了通过点击内部对象，您有两个选项：

您在初始化时将内部变量缓存为“this”，例如 var self = this; ，并在事件处理程序中使用该缓存值，或者
您可以创建一个实际的事件处理函数，并将 bind 创建为您的类的实例;

上面第1点的一个例子，这是最简单的。

如何在JavaScript中从类范围中公开方法数据

2 个答案: