1

我有这个代码：

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();
    }
}

使用打字稿，我看到了更多使用类。在这种情况下，如果像这样的函数被实现为类会更容易维护吗？如果是这样，我将如何执行此操作以及如何调用该类？

我现在这样称呼它：

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

2 回答 2

1

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

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();

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

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

该类可在许多项目中重用，该功能与特定的 HTML 实现（特定的 id）紧密耦合。

于 2012-11-14T17:14:30.003 回答
-2

将其封装为函数会更好。

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

于 2012-11-16T11:58:58.573 回答