使用普通JS的列表组件

Question

这里是初学者网页开发。我在普通的JS/HTML中创建了一个自定义列表组件(带有编辑功能)。

我有几个问题想得到答案(除了你们在网站上做的正常反馈外)：

• 这是在使用普通JS时创建和使用组件的标准/正确方法吗？
• 如果我可以创建和使用这样的对象，那么使用react.js创建这样的组件有什么好处呢？

ListComponent.js

///////
//
// ListComponent is a class which lets you create a list component
// dynamically using JS and DOM. The list component also has some features
// out of the box - e.g. editing items when clicked.
//
function ListComponent(type) {

    // Model data of the list.
    this.data = [{ name: "mona", id: 0 }, { name: "dona", id: 1 }, { name: "jona", id: 2 }],

    // Create a list component.
    this.create = function () {
        let list = document.createElement(!type ? "ul" : type);
        list.id = "customList";
        document.body.appendChild(list);
        this.draw();
    },

    this.remove = function () {
        // Remove our list component from DOM
        var elem = document.getElementById("customList");
        return elem.parentNode.removeChild(elem);

    }

    ///
    // draw
    //  Appends items to the list component.
    //  Deletes any child items first if there are any.
    //
    this.draw = function () {
        let that = this;

        // First delete all items of the list.
        let list = document.getElementById("customList");
        while (list.firstChild) {
            list.removeChild(list.firstChild);
        }

        // Now, append new items.
        that.data.forEach(function (item) {
            let listItem = document.createElement("li");

            // Listen to click event on this list item.
            listItem.addEventListener("click", function () {
                let newName = prompt("Enter item name", item.name);
                if (newName == null || newName.length == 0)
                    return;

                // Make change in the list model data.
                for (let i = 0; i < that.data.length; i++) {
                    if (that.data[i].id == item.id) {
                        that.data[i].name = newName;
                        break;
                    }
                }

                // Redraw the list.
                that.draw();
            }, false);

            listItem.innerHTML = item.name;
            listItem.id = item.id;
            list.appendChild(listItem);

        });
    }
}

index.html

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Demo site</title>
    <!-- Import our list component -->
    <script src="ListComponent.js"></script>
</head>

<script>

    document.addEventListener("DOMContentLoaded", function (event) {
        // Run this code when DOM is loaded.
        let list = new ListComponent("ol");
        list.create();    
    });

</script>

</body>

</html>

Answer 1

这是在使用普通JS时创建和使用组件的标准/正确方法吗？

这在技术上并不是错误的，但是当您编写可重用的组件时，最好使用prototype，而不是在构造函数本身中创建方法。

例如,

function listComponent(){}
listComponent.prototype.create = function() { .. };
listComponent.prototype.remove = function(){ ... };
listComponent.prototype.draw = function(){ ... };

当您在构造函数中创建方法时，这些方法将在内存中对创建的每个对象进行复制。当您使用原型时，这些方法只需要定义一次。

如果您想编写感觉像类的代码，那么使用一个实际的类。(JS现在有了)。

除此之外，不要将数据存储在创建列表的函数中。将数据传递给构造函数或创建方法。

如果我可以创建和使用这样的对象，那么使用react.js创建这样的组件有什么好处呢？

如果您只需要生成一个简单的列表，那么就没有理由使用react。React有很多您的代码没有的组件，比如交互特性等等。

如果你花几分钟的时间读到关于反应是什么，反应是什么的确切情况，那么这个问题的答案就会很清楚。

Answer 2

这是在使用普通JS时创建和使用组件的标准/正确方法吗？

既有最佳实践，也有固执己见的方法，但没有标准的做法。语言是非常灵活的，它允许不同的范例。这要看你怎么做了。

如果我可以创建和使用这样的对象，那么使用react.js创建这样的组件有什么好处呢？

框架的主要好处是减少了对渲染、路由、状态管理等普通任务的关注，而更多地关注最重要的事情:应用程序。大多数框架都是高级别的，所以您所担心的就是模板和数据。

可视化这一点的一个很好的例子是苗条，它使用框架代码并将其编译为原始的、无运行时的JS。它有一个REPL，它向您展示了在使用框架时编写的内容和每次不使用框架时必须编写的内容(单击下面的“输入”按钮在输入和输出之间切换)。