使用$ .extend（）将更多情况添加到jQuery中的switch语句函数中？

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在点击时动态拉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对象扩展为另一个包含函数的对象。 您必须要注意的主要事情是按键碰撞。 （两个人试图为数据类型“ some_type”定义一个函数。）

Answer 2

代替switch / case语句，您可以执行更可扩展的操作，例如遍历新闻项限定符及其相关数据的容器。 在JSON中，它可能类似于：

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

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