将 class 函数绑定到 HTML DOM 元素

Question

我使用 Es6 class 并在我的 DOM 元素中引用其中的方法。而且它很容易使用。当我将 class 转换为模块时，范围是有限的。有解决方法。但是我正在寻找一种有效的方法来在我的 DOM 元素中添加那些 class.method 引用。这是一个有效的方法。

es6\simpleForm.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">

    <div class="row">
        <div class="col-md-6 order-md-1 form_custom">

            <h4 class="mb-3">Simple Form</h4>
            <form name="simpleForm" method="POST">

                <div class="form-group">
                    <label class="font-weight-bold" for="firstName">First Name</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="firstName" name="firstName" placeholder="<first name>" required>
                        <span class="validity"></span>
                    </div>
                    <div class="small text-danger messages"></div>
                </div>
                <div class="form-group">
                    <label class="font-weight-bold" for="lastName">Last Name</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="lastName" name="lastName" placeholder="<last name>" required>
                        <span class="validity"></span>
                    </div>
                    <div class="small text-danger messages"></div>
                </div>

                <div class="form-group">
                    <label class="font-weight-bold" for="active">Status</label>
                    <span><i class="fa fa-server fa-fw"></i></span>

                    <select class="custom-select d-block w-100" name="active" id="active"
                            required>
                        <option value="true" selected="selected">Active</option>
                        <option value="false">Inactive</option>
                    </select>
                    <div class="small text-danger messages"></div>
                </div>

                <hr class="mb-4">
                <button type="button" class="btn btn-success" onclick="simpleService.clearForm(this.form)">New</button>
                <button type="button" class="btn btn-primary" onclick="simpleService.save(this.form)">Save</button>
                <button type="button" class="btn btn-primary" onclick="simpleService.remove(this.form)">Delete</button>
            </form>
        </div>
    </div>
</main>
<br>
<script type="text/javascript" src="/es6/simpleForm.js"></script>
<script type="text/javascript">
    var simpleService = new SimpleService("simpleForm");
    simpleService.test();

</script>
</body>
</html>

es6\simpleForm.js

class SimpleService {

    constructor(formName) {
        this.formName = formName;
        this.form = document.forms[formName];
    }

    clearForm() {
        this.form.reset();
    }

    save (form) {

        let caller = this;

        let data = new FormData();

        data.append("firstName", form.firstName.value);
        data.append("lastName", form.lastName.value);
        data.append("active", form.active.value);

        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4) {
                if (this.status == 200 || this.status == 201) {
                    alert('Record is saved');
                    caller.clearForm(form);
                } else {
                    //alert(this.responseText);
                    alert('Imagine the path exist and the record is saved');
                }
            }
        }
        xhttp.open("POST", "/saveSimpleData", true);
        xhttp.send(data);
    }

    remove (form) {

        let caller = this;
        let data = new FormData();

        if (form.firstName.value && form.lastName.value) {
            data.append("firstName", form.firstName.value);
            data.append("lastName", form.lastName.value);
        } else {
            alert("Cannot delete a non-existing record");
            return;
        }

        let xhttp = new XMLHttpRequest();

        xhttp.onreadystatechange = function () {
            if (this.readyState == 4) {
                if (this.status == 200 || this.status == 201) {
                    caller.clearForm(form);
                } else {
                    // alert(this.responseText);
                    alert('Imagine the path exist and the record is deleted');
                }
            }
        }
        xhttp.open("POST", "/deleteSimpleData", true);
        xhttp.send(data);
    }

    test() {
        console.log('Class Object is loaded');
    }
}

当我对此进行修改时，它就起作用了。但是像这样绑定每个 DOM 是很痛苦的。有什么简单的方法吗？

es6module\simpleForm.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">

    <div class="row">
        <div class="col-md-6 order-md-1 form_custom">

            <h4 class="mb-3">Simple Form</h4>
            <form name="simpleForm" method="POST">

                <div class="form-group">
                    <label class="font-weight-bold" for="firstName">First Name</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="firstName" name="firstName" placeholder="<first name>" required>
                        <span class="validity"></span>
                    </div>
                    <div class="small text-danger messages"></div>
                </div>
                <div class="form-group">
                    <label class="font-weight-bold" for="lastName">Last Name</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="lastName" name="lastName" placeholder="<last name>" required>
                        <span class="validity"></span>
                    </div>
                    <div class="small text-danger messages"></div>
                </div>

                <div class="form-group">
                    <label class="font-weight-bold" for="active">Status</label>
                    <span><i class="fa fa-server fa-fw"></i></span>

                    <select class="custom-select d-block w-100" name="active" id="active"
                            required>
                        <option value="true" selected="selected">Active</option>
                        <option value="false">Inactive</option>
                    </select>
                    <div class="small text-danger messages"></div>
                </div>

                <hr class="mb-4">
                <!-- Prefer something similar to this
                <button type="button" class="btn btn-success" onclick="simpleService.clearForm(this.form)">New</button>
                <button type="button" class="btn btn-primary" onclick="simpleService.save(this.form)">Save</button>
                <button type="button" class="btn btn-primary" onclick="simpleService.remove(this.form)">Delete</button>
                -->

                <button id='cfButt' type="button" class="btn btn-success">New</button>
                <button id='saveButt' type="button" class="btn btn-primary">Save</button>
                <button id='delButt' type="button" class="btn btn-primary">Delete</button>
            </form>
        </div>
    </div>
</main>
<br>
<script type="module">
    import SimpleService from "./simpleForm.js";
    let simpleService = new SimpleService("simpleForm");
    simpleService.test();

    // Is there a way to bind these to the DOM like in ES6

    document.getElementById("cfButt").addEventListener('click', () => {
        simpleService.clearForm();
    });

    document.getElementById("saveButt").addEventListener('click', () => {
        simpleService.save();
    });

    document.getElementById("delButt").addEventListener('click', () => {
        simpleService.remove();
    });

</script>
</body>
</html>

es6module\simpleForm.js

class SimpleService {

    constructor(formName) {
        this.formName = formName;
        this.form = document.forms[formName];
    }

    clearForm() {
        this.form.reset();
    }

    save (form) {

        let caller = this;

        let data = new FormData();

        data.append("firstName", form.firstName.value);
        data.append("lastName", form.lastName.value);
        data.append("active", form.active.value);

        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4) {
                if (this.status == 200 || this.status == 201) {
                    alert('Record is saved');
                    caller.clearForm(form);
                } else {
                    //alert(this.responseText);
                    alert('Imagine the path exist and the record is saved');
                }
            }
        }
        xhttp.open("POST", "/saveSimpleData", true);
        xhttp.send(data);
    }

    remove (form) {

        let caller = this;
        let data = new FormData();

        if (form.firstName.value && form.lastName.value) {
            data.append("firstName", form.firstName.value);
            data.append("lastName", form.lastName.value);
        } else {
            alert("Cannot delete a non-existing record");
            return;
        }

        let xhttp = new XMLHttpRequest();

        xhttp.onreadystatechange = function () {
            if (this.readyState == 4) {
                if (this.status == 200 || this.status == 201) {
                    caller.clearForm(form);
                } else {
                    // alert(this.responseText);
                    alert('Imagine the path exist and the record is deleted');
                }
            }
        }
        xhttp.open("POST", "/deleteSimpleData", true);
        xhttp.send(data);
    }

    test() {
        console.log('Class Object is loaded');
    }
}

将函数绑定到 DOM 有没有更好的方法？谢谢

Answer 1

如果您喜欢那种风格，您仍然可以将您的原始方法用于全局变量和内联 html 属性处理程序。您只需要显式创建全局变量，不能在模块范围内使用 let 声明：

<script type="module">
    import SimpleService from "./simpleForm.js";
    window.simpleService = new SimpleService("simpleForm");
    simpleService.test();
</script>

但是，onclick="…" attributes are discouraged for good reasons，通过 DOM 绑定处理程序要干净得多。您可以稍微缩短语法：

<script type="module">
    import SimpleService from "./simpleForm.js";
    const simpleService = new SimpleService("simpleForm");

    document.getElementById("cfButt").onclick = e => simpleService.clearForm();
    document.getElementById("saveButt").onclick = e => simpleService.save();
    document.getElementById("delButt").onclick = e => simpleService.remove();

    simpleService.test();
</script>

将 class 函数绑定到 HTML DOM 元素

Binding class function to HTML DOM Element

javascript

ecma

es6-modules