Comment organiser un fichier javascript en plus petits morceaux?

Question

J'ai actuellement un grand fichier javascript externe qui est utilisé sur la page. J'enveloppe actuellement le code dans une fonction auto-invoquant parce que j'ai d'autres sections qui sont chargées en utilisant des onglets ajax, donc je veux éviter de nommer les collisions avec ces autres fichiers js externes.

Le code dans le fichier est organisé comme ci-dessous. Je voudrais diviser une partie du code à l'intérieur de l'espace de noms de plannerTab en fichiers plus petits, tout en conservant une partie de cet espace de noms.

Comment est-ce que je pourrais faire ceci? Ou, les gars, vous recommandez une approche différente? Merci!

// 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 
}(); 

Mise à jour

Comment pourrais-je séparer les parties de l'intérieur de la variable plannerTab en petits fichiers js externes, et maintenir encore qu'ils font partie de l'espace de noms plannerTab? Un petit exemple ci-dessous.

// 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' 
     } 
    }; 

Answer 1

Regardez cet exemple (de Google)

<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> 

Answer 2

Je suppose que plannerTab devient un résultat de retour d'objet de l'auto fonction d'exécution. Si vous avez besoin d'ajouter dynamiquement des propriétés ou des méthodes à cet objet, vous pouvez jeter un oeil à jQuery.extend() http://api.jquery.com/jQuery.extend/

Vous devez modifier le JS externe pour utiliser la méthode jQuery extend à ajouter aux propriétés et méthodes existantes de plannerTab. Tant que vous maintenez plannerTab comme variable globale, vous continuerez à l'ajouter lorsque vous importerez plus de fichiers js externes.

Si vous utilisez le modèle de module pour gérer des variables privées dans plannerTab, veillez à tester le comportement de ces valeurs lorsque vous utilisez jQuery.extend(). Est-ce pour faciliter le développement ou le déploiement?