Question

我正在构建一个jQuery插件，我的JS文件中有一些标准设置。

我希望人们在我的HTML文件中更改这些设置。它目前仅适用于一小部分。我已经可以更改HTML文件中的设置，但是当我将HTML文件中的设置留空时，它将保持空白。

假设我希望图像的宽度为100px。我在HTML中输入imageWidth = "100px"，imageWidth实际上是100px。但是当我这样离开imageWidth = ;时，imageWidth将为0，因为我没有给它宽度。

我希望如果imageWidth我的imageWidth将变为我的标准设置imageWidth = "";。

这是我在HTML中的JS代码：

$(function() {
    $(document).jqueryPlugin({
        frontImage: "",
        backImage: "",
        imageHeight: "",
        imageWidth: ""
    }, {
        dialogHeight: "",
        dialogWidth: ""
    });
});

这是我的js代码的一部分：

(function($) {
    $.fn.jqueryPlugin = function(optionsImage, optionsDialog) {
        var imageSettings = {
            frontImage: "http://www.c-and-a.com/iview/FRONT_ZOOM2X/148243_1.jpg",
            backImage: "http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg",
            imageHeight: "400px",
            imageWidth: "auto"
        };

        optionsImage = optionsImage || imageSettings.frontImage;

        var dialogSettings = {
            dialogHeight: "auto",
            dialogWidth: "auto"
        };

        if (optionsImage) {$.extend(imageSettings, optionsImage)}
        if (optionsDialog) {$.extend(dialogSettings, optionsDialog)}

Answer 1

一般情况下，我建议不要将设置对象中的空字符串重置为默认值。如果有人将空字符串设置为设置，则可能有充分的理由这样做。或者你可以像这样启动你的插件

$(document).jqueryPlugin({
    frontImage: undefined,
    backImage: undefined,
    imageHeight: undefined,
    imageWidth: undefined
}, {
    dialogHeight: undefined,
    dialogWidth: undefined
});

...并且所有设置都将被视为默认值。

如果您坚持使用处理空字符串的方法，则可以使用将空白对象的每个属性转换为undefined的函数：

function empty2Undefined(obj) {
    $.each(obj, function(idx) {
      if(!obj[idx]) obj[idx] = undefined;
    });   
}

然后，在你的插件中：

empty2Undefined(optionsImage);
empty2Undefined(optionsDialog);

这样做有效，因为undefined会忽略$.extend。来自jQuery文档：

当两个或多个对象参数提供给$ .extend（）时，所有对象的属性都将添加到目标对象中。忽略null或undefined的参数。

Answer 2

如果您在调用插件时不想指定任何选项，则不需要提及为空白。使用下面的代码。它将采用默认的imageHeight：＆＃34; 400px＆＃34;和imageWidth：＆＃34; auto＆＃34;

  $(function() {
    $(document).jqueryPlugin({
      frontImage: "http://www.c-and-a.com/iview/FRONT_ZOOM2X/148243_1.jpg",
       backImage: "http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg",
    }, {
      dialogHeight: "100px",
      dialogWidth: "100px"
    });
 });

如何使我的jQuery插件使用标准设置？

2 个答案: