为初学者构建JavaScript中的类

Building Classes in javascript for beginner

本文关键字：JavaScript 初学者 构建      更新时间：2023-09-26

我精通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 对象进行编码可能会干净得多。

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

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"};

对于像实现这样的直接类，我喜欢这个： http://ejohn.org/blog/simple-class-instantiation/

但听起来你想创建一些在jQuery术语中被称为"小部件"的东西，它给你很多你要求的东西，以及更多： http://ajpiano.com/widgetfactory/#slide1 http://wiki.jqueryui.com/w/page/12138135/Widget%20factory http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/

我同意其他人的观点，因为这个函数完全是没有状态的行为。可以考虑将该函数与相关的 UI 帮助程序函数一起放入命名空间中，但这严格来说是为了更好地组织和在多个页面上易于使用。

此外，您可以通过存储append返回的 jQuery 对象并重用它们进行进一步调用来提高此函数的可读性和性能。

function launchOverlay(method, content, width, closeBtn) {
    var $overlay = $("body").append('<div id="overlay-backdrop" style="display:none"></div>');
    $overlay.css({
        width: $(document).width(),
        height:$(document).height()
    }).fadeIn();
    var $canvas = $overlay.append('<div id="overlay-canvas-area"><div class="inner-canvas-area"></div><div>');
    if (typeof closeBtn == 'undefined') {
        $canvas.append('<div class="close-btn"><a class="close" onClick="closeOverlay()">Close</a></div>');
    }
    if (method == "load") {
        $("#overlay-canvas-area .inner-canvas-area").load(content);
    }
    else if (method == "append") {
        $("#overlay-canvas-area .inner-canvas-area").append(content);
    }
    var canvasAreaWidth = width + $canvas.width();
    var canvasAreaHeight = $canvas.height();
    $canvas.animate({
        top: (($(document).height() - canvasAreaHeight) / 2),
        left: (($(document).width() - canvasAreaWidth) / 2)
    }, 700);
}

请注意，我已将var声明保留为内联以匹配您的样式，但您应该知道它们的声明被提升到函数的顶部。在这里没关系，但它可能会在以后更复杂的函数中咬你。

相关文章：