Question

我试图重构一个我创建的简单JS插件，在参考JS中的各种模式之后，考虑到我是JS的新手，我能够做出一些努力。下面的代码是重构的示例。但是我的选择了Dom＆＃34; object返回null。从逻辑上讲，我无法找到错误。请指导我。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        .cross {
            background: red;
            width: 5px;
            height: 5px;
        }

        .input-field {
            height: 20px;
            width: 100px;
        }

        .input-area {
            height: 100px;
            width: 100px;
        }
    </style>
    <script>
        var InputActions = (function () {
            "use strict";
            var options = {
                textVal: ".input-field",
                crossClass: ".cross",
                border: ".input-area",
                borderNone: "1px solid #e4e5e7",
                borderShow: "1px solid #006f9e"
            };

            function InputActions() {

            };
            InputActions.prototype = {
                selectedDom: document.querySelector(options.textVal),
                cross: function () {
                    var text = this.selectedDom.value;
                    var cross = document.querySelector(options.crossClass);
                    this.selectedDom.focus();
                    (text === "") ? cross.style.opacity = "0": cross.style.opacity = "1";
                },
                clearField: function () {
                    var input = this.selectedDom;
                    input.value = '';
                    this.cross();
                },
                focusItem: function () {
                    document.querySelector(options.border).style.border = options.borderShow;
                    this.cross();
                },
                blurItem: function () {
                    document.querySelector(options.border).style.border = options.borderNone;
                }
            };
            return InputActions;
        })();

        window.inputAct = new InputActions();
    </script>
</head>

<body>
    <div class="input-area cross">
        <input type="text" class="input-field" onclick="inputAct.focusItem()" />
    </div>
</body>

</html>

Answer 1

这是因为您将script标记放在head中，并在document.body创建之前执行。

要解决此问题，您可以将script移至body的末尾或将其包装在函数中并在DOMContentLoaded事件中执行。

如果只包装DOMContentLoaded事件处理程序中的实例化部分，则必须将查询DOM移动到构造函数体。所以你的代码看起来像

// ...
function InputActions() {
    this.selectedDom = document.querySelector(options.textVal);
};
InputActions.prototype = {
    cross: function () {
        var text = this.selectedDom.value;
// ...

DOMContentLoaded处理程序部分：

document.addEventListener( "DOMContentLoaded", function () {
    window.inputAct = new InputActions();
});

无法在JS对象文字方法中获取dom元素

1 个答案: