javascript - 面向初学者的JavaScript构建类

我精通javascript和jQuery。我之前从未建立过课程。也许上课甚至不是我想要的。

我调用了一个函数来启动叠加层，该函数使用了很多并且包含一些参数。

function launchOverlay(method, content, width, closeBtn) {

    $("body").append('<div id="overlay-backdrop" style="display:none"></div>');

    $("#overlay-backdrop").css({
        width: $(document).width(),
        height:$(document).height()
    }).fadeIn();

    $("#overlay-backdrop").append('<div id="overlay-canvas-area"><div class="inner-canvas-area"></div><div>');

    if(typeof closeBtn == 'undefined'){
        $("#overlay-canvas-area").append('<div class="close-btn"><a class="close" onClick="closeOverlay()">Close</a></div>');
    }

    if (method == "load"){
        $("#overlay-canvas-area .inner-canvas-area").load(content);
    }if(method == "append"){
        $("#overlay-canvas-area .inner-canvas-area").append(content);
    }

    var canvasAreaWidth = width+($("#overlay-canvas-area").width());
    var canvasAreaHeight = $("#overlay-canvas-area").height();

    $("#overlay-canvas-area").animate({
        top:((($(document).height())-(canvasAreaHeight))/2),
        left: ((($(document).width())-(canvasAreaWidth))/2)
    },700);

}

我发现自己不断进行修改以满足自己的需求，然后回到旧实例并修改函数调用。我也想通过json作为函数的设置。

第一个问题是，我在寻找什么课程？
如果是这样，哪里有学习的好地方？

如果不是，我应该怎么做才能改善功能？

最佳答案

当存在一个包含一些数据的持久对象，然后您希望随时间使用多种不同的方法对该数据进行操作时，一个类（或者在javascript中，“原型”实际上是更正确的术语）是合适的。

该类使您可以整齐地指定如何存储数据以及对数据进行操作的方法。

如果您只有一个操作会产生输出并且可以接受各种不同的输入数据，那么您将不会真正从类中受益。您只需要一个具有各种参数的函数，然后根据传递给它的内容来选择其操作。

在javascript中，当一个函数有很多选项并且它们可能是可变的时，有时通常会传入一个options对象，该对象包含指示函数操作的属性。然后，该函数可以检查存在哪些属性以及必须选择哪些值以选择其行为方式。使用options对象可以在您想要添加或修改参数的任何时候进行更简单的维护，而不必继续添加越来越多的函数参数。这样的选项对象也可以更轻松地传递，而不是分别传递每个参数。您还可以为options对象创建一个默认状态，该状态包含参数的所有默认值（如果未传递，则其值应为）。尽管可以使用多个传统函数参数来完成所有这些操作，但是使用options对象进行编码可能会更加简洁。

选项对象的用法如下所示：

function doWhatever(mainData, options) {
    if (options.foo) {
        // do it one way
    } else {
        // do it the other way
    }
}

doWhatever(myData, {foo: true, output: "commas", fee: "whatever"};