Question

我精通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作为设置。

第一个问题是，课程是我正在寻找的吗？如果是的话，哪里有学习的好地方？

如果没有，我该怎么做才能改进功能？

Answer 1

当一个持久对象包含一些数据，然后你想用多种不同的方法对这些数据进行操作时，一个类（或javascript中的“原型”实际上是更正确的术语）是合适的。

该类允许您巧妙地指定数据的存储方式以及对数据执行的操作方法。

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

在javascript中，当函数有很多选项且它们可能是变量时，有时候传递一个包含指向函数操作的属性的选项对象是很常见的。然后，该函数可以检查存在哪些属性以及它们具有哪些值来选择它应该如何表现。使用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"};

Answer 2

对于直接类的实现，我喜欢这样：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/

Answer 3

我同意其他人的意见，因为这个功能完全是没有状态的行为。您可以考虑将函数与相关的UI帮助函数一起放入命名空间，但这绝对是为了更好地组织和在多个页面上使用。

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

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声明内联保留以符合您的风格，但您应该知道their declarations are hoisted to the top of the function。在这里没关系，但它可能会在以后更复杂的功能中咬你。

在javascript中为初学者构建类

3 个答案: