Question

我尝试用一些PHP代码编写简单的jquery插件，用于显示数据库中的表。插件允许用户搜索，浏览页面和排序。我知道那里有一些很好的插件，但我是一个新手（6个月的任何编程）我尝试学习一些东西。

实际上一切都已完成，但我停止尝试做多层次＆＃34;选项。

用户看起来最简单的选项（几乎所有选项都是这样）：

$('#main').ableTable({
    mode :'sqlite'
})

然后它会覆盖默认设置：

var settings = $.extend({
    mode : 'mysql' 
} ,options);

那很简单。

但如果我有一些更复杂的选项，如：

var settings = $.extend({
    translate :{
        navigation :{
            prev :'previous' ,
            next :'next'
        } ,
        search :'search' ,
        no_result :'nothing was found' ,
        from :'from' ,
        total :'total'
    }
    // other options
} ,options);

然后，如果用户仅声明：

$('#main').ableTable({
    translate :{
        navigation :{
            prev :'poprzedni'
        }
    }
})

它会覆盖settings.translate

中的所有内容

如果我想仅覆盖settings.navigation.prev（在此示例中）并保留其余的默认设置，如何处理用户定义的选项？

Answer 1

你需要在重载的deep函数中使用extend()参数 - 它基本上是同一函数的另一个版本，但它使它递归，因此它在对象内部而不仅仅是顶部级...

var settings = {
    translate :{
        navigation :{
            prev :'previous' ,
            next :'next'
        } ,
        search :'search' ,
        no_result :'nothing was found' ,
        from :'from' ,
        total :'total'
    }
}

var options = {
    translate: {
        navigation: {
            prev: "something else"
        }
    }
};

$.extend(true, settings, options);

查看extend()的文档，了解更多信息......

https://api.jquery.com/jquery.extend/

Answer 2

对于（一个简单的，人为的）示例，使用deep可用的jQuery.extend()布尔选项似乎可以解决这个问题：

var defaults = {
    'fruits': {
      'bananas': 1,
      'plums': 2
    },
    'drinks': {
      'coffee': 1,
      'milk': 2
    }
  },
  userOptions = {
    'fruits': {
      'cherries': 30,
      'strawberries': 10,
      'plums': 0
    },
    'drinks': {
      'coffee': 2,
      'cola': 1
    }
  },
  results = $.extend(true, defaults, userOptions);

$('body').text(JSON.stringify(results));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

外部JS Fiddle demo，用于实验和开发。

布尔开关使jQuery.extend()方法使用提供的对象的顶级和嵌套对象对此目标对象（此处为defaults）执行递归修改（此处为userOptions）。

参考文献：

jQuery.extend()。

Answer 3

这很容易做到没有任何jQuery，特别是你要了解更多，只需使用递归搜索：

var params = {
  translation: {
    level1: {
      level2: {
        setting: 'my luxury setting'
      }
    }
  }
};

var defaults = {
  translation: {
    level1: {
      level2: {
        setting: 'my poor setting'
      }
    },
    level0: 'I don\'t know what I am doing here'
  }
};

// this function is called against every property in params
function recursive(thisparams,thisdefault) {
  for (var prop in thisparams) {
    if (thisparams.hasOwnProperty(prop)) {
      // if both params and defaults have this property as an object, search deeper
      if (thisparams[prop] instanceof Object && defaults[prop] instanceof Object) {
        recursive(thisparams[prop], thisdefault[prop])
      // one of properties is not an object, just override the default thing
      } else { 
        thisdefault[prop] = thisparams[prop];
      }
    }
  }
}

recursive(params, defaults);

console.log(defaults);

Fiddle

我编写简单的jquery插件时覆盖设置

3 个答案: