Javascript 如果在typescript中实现为类或函数，那么维护会更容易吗？

我有以下代码：

function setSidebar(visible) {
    "use strict"
    if (visible === "show") {
        $("#sidebar-width-switch").prop('title', 'Hide Sidebar');
        $("#sidebar").show();
    } else {
        $("#sidebar-width-switch").prop('title', 'Show Sidebar');
        $("#sidebar").hide();
    }
}

通过typescript，我看到了类的更多使用。在这种情况下，如果像这样的函数被实现为类，那么维护起来会更容易吗？如果是这样，那么我将如何做？我将如何调用该类

我现在这样称呼它：

    $('#sidebar-width-switch')
        .click(function (e) {
            if ($("#sidebar").is(':hidden')) {
                setSidebar("show");
                localStorage.setItem('Sidebar', 'show');
            } else {
                setSidebar("hide");
                localStorage.setItem('Sidebar', 'hide');
            }
        });

---

类允许您将数据与行为分开，有点像这样：

class SideBar {
    private sidebarElement: JQuery;
    private switchElement: JQuery;

    constructor(sidebarId: string, switchId: string) {
        this.sidebarElement = $('#' + sidebarId);
        this.switchElement = $('#' + switchId);
    }

    show() {
        this.sidebarElement.show();
        this.switchElement.prop('title', 'Hide Sidebar');
    }

    hide() {
        this.sidebarElement.hide();
        this.switchElement.prop('title', 'Show Sidebar');
    }
}

var sidebar = new SideBar('sidebar', 'sidebar-width-switch');
sidebar.show();
sidebar.hide();

这将允许您使用侧边栏类，而无需将其焊接到特定ID，并且允许您在页面上有多个侧边栏，每个侧边栏都是一个新的侧边栏

构造函数确保使用所需的数据设置类，这意味着方法不需要接受参数。这减少了调用代码中的重复

---

该类在许多项目中都是可重用的，函数与特定的HTML实现（特定的ID）紧密耦合。

将其封装为函数更好

---

要理解的代码更少，使用的仪式也更少。

+1史蒂夫。快速提问，

.show（）/.hide（）

是否会干扰jQuery中已经建立的显示/隐藏？或者，因为这些是原型，所以它们不调用jQuery吗？（因为侧边栏本身不是jQuery对象）它不会干扰，所以sidebar.show（）调用jQuery show函数。@Marilou我很高兴它有帮助。