Question

我有一个名为parseData的函数，用于从主js文件中返回的json数据中呈现html表示。

var data = {
  "title": "This is news"
};


$("button").click(function(){
    var feedformat = $(this).data('format');
    item_html = parseData(feedformat, data);
    $('.feedback').append(item_html);
});    

function parseData(type, data) {
   var item_html = ''; 
   switch(type) { 
       case 'story':
       item_html = '<h5>'+data.title+'</h5>';
       break;
  }
    return item_html; 
}

我的问题是，是否可以使用$.extend从使用getscript点击动态提取的其他脚本文件中添加更多案例？假设我有一个名为oldnews的新案例。那个案例包含很多html标签，但不经常使用，所以我不想把它存放在主js文件中，只想在人们想要的时候把它带进来。调用我在另一个脚本文件中使用类似下面的内容来扩展主js文件中的parseData？

(function($){
    var addcase = $.fn.parseData;
    $.fn.addcase = function( type,data ) {
            case 'oldnews':
       item_html = '<div>'+data.title+',but outdated</div>';
      break;

   };
}(jQuery));

Answer 1

实际上这听起来很简单。您真正想要做的是将数据格式的名称映射到生成HTML输出的函数。您可以使用此功能轻松编码您已在此处演示的内容：

var parseFunctions = {

    story: function(data) {
        return '<h5>' + data.title + '</h5>';
    },

    oldnews: function(data) {
        return '<div>' + data.title + ', but outdated</div>';
    }

}

当需要输出一些html时，你可以这样做：

$("button").click(function(){
    var format = $(this).data('format');
    if (typeof parseFunctions[format] == 'function')
        $('.feedback').append( parseFunctions[format](data) );
});

这是有效的，因为Javascript将函数视为任何其他值。您可以将它们分配给变量，复制它们等。使用此技术，您可以使用包含函数的另一个对象扩展基础parseFunctions对象。你需要注意的主要事情是关键碰撞。（两个人试图为数据类型定义函数＆＃39; some_type＆＃39;。）

Answer 2

而不是switch / case语句，你可以做一些更具扩展性的事情，比如循环一个新闻项限定符及其相关数据的容器。在JSON中，这可能看起来像：

{
  "story": {
    "html": "<h5>%s<\/h5>"
  },
  "oldnews": {
    "html": "<div>%s, but outdated<\/div>"
  }
}

如果你有一个像这样的JavaScript对象，你可以让它对parseData可见，它获取与“type”匹配的“html”值并用标题替换“％s”。每当引入新的“案例”时，使用_.extend或$ .extend添加到结构中。

使用$ .extend（）在jQuery中为switch语句函数添加更多个案？

2 个答案: