如何將JavaScript文件組織成更小的片段？

我目前有一個大的外部JavaScript文件，在頁面上使用。我目前將代碼包裝在一個自調用函數中，因爲我有其他部分使用ajax選項卡加載，所以我想避免與其他外部js文件命名衝突。如何將JavaScript文件組織成更小的片段？

該文件中的代碼組織如下。我想將plannerTab命名空間中的一些代碼拆分爲更小的文件，但它仍然是該命名空間的一部分。

我該怎麼做？或者，你們是否推薦了一種不同的方法？謝謝！

// Document Ready 
$(function() 
{ 
    // initializes table 
    plannerTab.plannerTable.init(); 
}); 


var plannerTab = (function() 
{ 
    // All the code for the page is in here. I would like to extract sections 
    // from in here and put them into their own external files while still keeping 
    // the namespacing 
}();

更新

我怎麼會從plannerTab變量中獨立的部分到更小的外部JS文件，並仍然認爲他們是plannerTab命名空間的一部分嗎？下面是一個小例子。

// Scope: plannerTab.config - Would like to store configuartion into a separate file 
    var config = { 

     selectors: { 
      tableId: '#plannerTable', 
      addTaskId: '#AddTask', 
      editTaskSelector: '#plannerTable .edit', 
      dateFilterSelector: '#plannerTable_TimeFilter li', 
      deleteTaskClass: '.delete', 
      searchFilter: '#plannerTable_filter', 
      selectedDateFilter: 'selected-dateFilter', 
      taskCellSelector: '#plannerTable .task-col', 
      taskClass: '.taskId' 
     }, 

     urls: { 
      addTaskFormURL: '/Planner/Planner/LoadAddTaskForm', 
      editTaskFormURL: '/Planner/Planner/LoadEditTaskForm', 
      deleteTaskURL: '/Planner/Planner/DeleteTask', 
      getTasksByDateRangeURL: '/Planner/Planner/GetTasksByDateRange', 
      viewTaskURL: '/Planner/Planner/ViewTask' 
     } 
    };

來源

2011-02-14 chobo

這是爲了簡化開發還是部署？我建議你保留一個文件，以減少HTTP請求。 – 2011-02-15 00:16:10

看看這個例子（從谷歌）

<script type="text/javascript"> 
function importScript(url){ 
    var tag = document.createElement("script"); 
    tag.type="text/javascript"; 
    tag.src = url; 
    document.body.appendChild(tag); 
} 
window.onload = function(){ 
    // imports go here 
    importScript("foo.js"); // example 
}; 
</script>

來源

2011-02-14 22:05:07 Dapaintballer331

我假定plannerTab成爲自我執行功能的一個目的返回結果。如果您需要動態添加屬性或方法到該對象，您可以看看jQuery.extend（）http://api.jquery.com/jQuery.extend/

您需要修改外部JS以使用jQuery擴展方法添加到現有屬性和方法plannerTab。只要您將plannerTab保留爲全局變量，您將在導入更多外部js文件時繼續添加它。

如果您使用模塊模式來維護plannerTab中的私有變量，請務必在使用jQuery.extend（）後測試這些值的行爲方式。

來源

2011-02-14 22:42:23 AlexRage

是的，plannerTab是一個包含許多其他對象的對象，例如這樣的頁面事件，配置等......將這個變量添加到Jquery對象或向對象本身添加更多屬性會更好嗎（這是可能的嗎？） – chobo 2011-02-14 22:49:36

如何將JavaScript文件組織成更小的片段？

回答

相關問題