在插件中處理多個JavaScript對象

Question

我創建了一個簡單的JavaScript插件，它允許我從特定的html元素收集數據。一個頁面可以有x個元素（通常最多20個），每個元素都有自己的設置。我的問題是返回的對象不是有效的JSON格式，因爲我收到錯誤「多個JSON根元素」。

我認爲原因是因爲我在插件裏面使用了每個函數，它爲每個對象創建一個新的對象，我試圖解決這個問題;結果不好。

所有的幫助將不勝感激，在此先感謝！

樣本插件

(function($) { 

$.fn.collect_data = function() { 


    this.each(function() { 

     var id = "#" + ($(this).attr("id")); 

     // Get numerical value of id 
     var get_package_id = function() { 
      var package_id = id.replace(/[^0-9]/g, ''); 
      return package_id; 
     }  

     // Packages is the top level container 
     var get_packages = function() { 
      var packages = {}; 

      packages = ({[get_package_id()]: {}}); 
      return packages; 
     } 


     // Demo information for each invidual package 
     var get_package_info = function() { 
      var info = {}; 

      $(id).each(function() { 

       info = ({ 
        value: 'Some value', 
        another_value: 'Another value' 
       }); 
      }); 

      return info; 
     } 

     // Demo information for each invidual package 
     var get_more_info = function() { 
      var more_info = {}; 

      $(id).each(function() { 

       more_info = ({ 
        value_more_info: 'Some value', 
        another_value_more_info: 'Another value' 
       }); 
      }); 

      return more_info; 
     }   

     // Combine the demo information 
     var result = function() { 

      var packages = get_packages(); 
      var info = get_package_info(); 
      var more_info = get_more_info(); 

      packages[get_package_id()].info = info; 
      packages[get_package_id()].more_info = more_info; 

      return packages; 
     } 

     $("#show-data").append(JSON.stringify(result(), null, 2)); 

    }); 
    return this; 
} 

}(jQuery));  

無效的結果

   { 
    "33": { 
    "info": { 
     "value": "Some value", 
     "another_value": "Another value" 
    }, 
    "more_info": { 
     "value_more_info": "Some value", 
     "another_value_more_info": "Another value" 
    } 
    } 
}{ 
    "74": { 
    "info": { 
     "value": "Some value", 
     "another_value": "Another value" 
    }, 
    "more_info": { 
     "value_more_info": "Some value", 
     "another_value_more_info": "Another value" 
    } 
    } 
}{ 
    "99": { 
    "info": { 
     "value": "Some value", 
     "another_value": "Another value" 
    }, 
    "more_info": { 
     "value_more_info": "Some value", 
     "another_value_more_info": "Another value" 
    } 
    } 
}{ 
    "124": { 
    "info": { 
     "value": "Some value", 
     "another_value": "Another value" 
    }, 
    "more_info": { 
     "value_more_info": "Some value", 
     "another_value_more_info": "Another value" 
    } 
    } 
}{ 
    "124": { 
    "info": { 
     "value": "Some value", 
     "another_value": "Another value" 
    }, 
    "more_info": { 
     "value_more_info": "Some value", 
     "another_value_more_info": "Another value" 
    } 
    } 
} 

所有的數據也許應該是頂級{}容器，而不是每個對象內部正在裏面自己添加{} 。

感謝您提前提供的所有幫助

Answer 1

談論完全過度設計的代碼。所有那些只曾被稱爲一次的功能有什麼意義？爲什麼要製作一個你不能重複使用的插件？

讓我們縮小你的代碼到其實際作用：

var data = $("foo").map(function() { 
    return { 
     package_id: "#" + this.id.replace(/[^0-9]/g, ''), 
     info: { 
      value: 'Some value', 
      another_value: 'Another value' 
     }, 
     more_info: { 
      value_more_info: 'Some value', 
      another_value_more_info: 'Another value' 
     } 
    }; 
}).toArray(); 

$("#show-data").text(JSON.stringify(data, null, 2)); 

---

旁註：

不要使用數據結構是這樣的：

{ 
    "uniqueID1": {"some": "data"}, 
    "uniqueID2": {"some": "data"}, 
    "uniqueID3": {"some": "data"} 
} 

多數民衆贊成濫用的對象作爲數組。

你真正想在這種情況下創建的是一個數組。這將使所有相關方更容易生活。

[ 
    {"id": "uniqueID1", "some": "data"}, 
    {"id": "uniqueID2", "some": "data"}, 
    {"id": "uniqueID3", "some": "data"} 
]