1

我精通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 作为该函数的设置传递。

第一个问题是，我要找的是课程吗？如果是这样，哪里是学习的好地方？

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

4

3 回答 3

2

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

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

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

在javascript中，当一个函数有很多选项并且它们可能是可变的时，有时通常会传入一个选项对象，该对象包含指导函数操作的属性。然后，该函数可以检查存在哪些属性以及它们必须选择哪些值来选择它的行为方式。任何时候您想添加或修改参数，而不是继续添加越来越多的函数参数，使用选项对象可以让维护变得更简单。像这样的选项对象也可以更容易地传递，而不是单独传递每个参数。您还可以为选项对象创建一个默认状态，其中包含参数的所有默认值（如果它们没有被传递，它们的值应该是什么）。

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

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"};
于 2012-08-13T17:22:53.143 回答
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/

于 2012-08-13T17:45:01.487 回答
1

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

此外，您可以通过存储返回的jQuery 对象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声明保留为内联以匹配您的样式，但您应该知道它们的声明被提升到 function 的顶部。在这里没关系，但以后可能会在更复杂的功能中咬你。

于 2012-08-13T17:59:19.183 回答