자바 스크립트 파일을 작은 조각으로 구성하는 방법은 무엇입니까?

Question

현재 페이지에서 사용되는 하나의 큰 외부 자바 스크립트 파일이 있습니다. 내가 아약스 탭을 사용하여로드 된 다른 섹션을 가지고 있기 때문에 현재 자체 호출 함수에서 코드를 래핑하므로 다른 외부 js 파일과의 충돌을 피하기를 원합니다.

파일의 코드는 다음과 같이 구성되어 있습니다. 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 
}(); 

업데이트

가 어떻게 작은 외부 JS 파일로 plannerTab 변수 내에서 부품을 분리 할 수, 그들이 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' 
     } 
    }; 

Answer 1

찾는

<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

I가 plannerTab 셀프 실행 기능의 목적 복귀 결과가된다라고 가정하고있다. 해당 객체에 속성이나 메소드를 동적으로 추가해야하는 경우 jQuery.extend()를 살펴볼 수 있습니다.

기존의 속성 및 메서드에 jQuery 확장 메서드를 사용하려면 외부 JS를 수정해야합니다 plannerTab. plannerTab을 전역 변수로 유지하는 한 더 많은 외부 js 파일을 가져올 때 계속 추가 할 것입니다.

plannerTab에서 개인 변수를 유지 보수하기 위해 모듈 패턴을 사용하는 경우 jQuery.extend()를 사용하면 해당 값의 작동 방식을 테스트해야합니다.