자바 스크립트의 중앙 관리

Question

큰 웹 사이트에서 어떻게 자바 스크립트 콘텐츠를 관리하나요? 나는 특히 다양한 $ (document) .ready()와 그 모든 id ($ ('id')) 문자열을 juggle해야한다는 사실에 고심하고있다. 필자는 필요한 $ (document) .ready()를 사용하는 각각의 "모듈"과 결합 할 것을 생각했지만 더 이상 각 페이지의 맨 아래에 자바 스크립트가 없으므로 가시적 인 속도 저하가 발생합니다.

상당히 큰 사이트의 자바 스크립트를 효율적으로 관리하고 유지 관리하기 좋은 방법은 무엇입니까?

Answer 1

환경이 어떤지 알 수 없습니다. 하지만 스크립트를 여러 부분으로 나누는 것 같습니다. 특정 페이지 또는 함수에 대한 모든 코드는 자바 스크립트 파일에 있어야합니다.

다음은 적절한 이름 지정 규칙 및 표준입니다.

마지막으로 가장 중요한 모든 것을 문서화하십시오. 페이지가 바뀌면 문서에서 어떤 스크립트가 효과가 있는지 살펴볼 수 있습니다. 같은 방법으로 문서는 어떤 스크립트가 어떤 페이지에서 무엇을하는지 알려줄 수 있어야합니다.

본인의 질문에 대한 직접적인 대답은 아니지만 장기적으로는 유지 관리가 더 쉬울 것이라는 것을 알고 있습니다. 특히 당신이 많은 사람들이 같은 프로젝트에 종사하고 있다면.

유지 보수 가능한 코드의 경우 이름 지정 규칙이 다시 중요합니다. html과 javascript 부분에서 둘 다. 또한 자바 스크립트 변수와 함수는 가능한 한 HTML 코드를 반영해야합니다. 예를 들어, id = "banana"라는 형식을 사용하는 경우 "apple"이라는 변수를 지정하지 마십시오.

Answer 2

이것은 현재로서는 나에게 일어난 일이며, 당신이 도울 수 있기를 바랍니다. 각 모듈의 질서있는 호출 방법에 대한 책임을지며, 모두 하나의 이벤트 준비 상태로 호출됩니다. 경우에 어떤 수준 당신은 도장과는 ExtJS와 같은 라이브러리는 아이디어이를 관리하는 방법에서 다른

// Call the initial organizer of each modules 
var modules = (function(){ 

    var level_0 = new Array(); 
    var level_1 = new Array(); 
    var level_2 = new Array(); 

    return { 
     add: function(method, level){ 
      var returned = true; 
      try{ 
       switch(level){ 
        case 0: 
         level_0.push(method); 
         break; 
        case 1: 
         level_1.push(method); 
         break; 
        case 2: 
         level_2.push(method); 
         break; 
       }; 
      }catch(ex){returned=false;} 
      return returned; 
     }, 
     callAll: function(){ 
      var returned = true; 
      var returned_0 = true; 
      var returned_1 = true; 
      var returned_2 = true; 
      try{ 
       returned_0 = this.call(0); 
       returned_1 = this.call(1); 
       returned_2 = this.call(2); 
      }catch(ex){returned=false;} 
      return ((returned && returned_0 && returned_1 && returned_2) || false); 
     }, 
     call: function(level){ 
      var returned = true; 
      var level_call = null; 
      try{ 
       switch(level){ 
        case 0: 
         level_call = level_0; 
         break; 
        case 1: 
         level_call = level_1; 
         break; 
        case 2: 
         level_call = level_2; 
         break; 
       }; 

       if (level_call!=null) 
        for(xcall in level_call) 
         level_call[xcall].call(); 

      }catch(ex){returned=false;} 
      return returned; 
     } 
    }; 
})(); 

//in each file JS with ini method in module 
modules.add(function(){alert("method file/module A in level 1 a");}, 1); 
modules.add(function(){alert("method file/module B in level 1 b");}, 1); 
modules.add(function(){alert("method file/module C in level 0 a");}, 0); 
modules.add(function(){alert("method file/module D in level 0 b");}, 0); 
modules.add(function(){alert("method file/module E in level 2 a");}, 2); 
modules.add(function(){alert("method file/module F in level 2 b");}, 2); 
modules.add(function(){alert("method file/module G in level 2 c");}, 2); 
modules.add(function(){alert("method file/module H in level 0 c");}, 0); 


// single call to the event ready 
$(function(){ 
    //call all 
    modules.callAll(); 

    // OR 

    //call in other order 
    modules.call(0); 
    modules.call(2); 
    modules.call(1); 
}); 

Answer 3

살펴보기 전에 어떤 모듈을 호출해야합니다. require()와 같은 함수를 사용하여 동적으로 의존하는 스크립트를 가져오고 이러한 공통 라이브러리가 두 번로드되지 않도록합니다. 그것들은로드 의존성을 처리하기위한 이벤트를 정의합니다. 예를 들어 큰 목록의 .ready() 문을 일부 위치에서 리팩터링하여 중요한 라이브러리를 초기화 한 다음 하나 이상의 이벤트를 발생시켜 특정 작업이 준비되었음을 나타낼 수 있습니다. 다른 라이브러리는 초기화하기 위해 큐로 사용합니다.

여러 코드 작성자가 동일한 코드베이스에 대해 코딩을하면 상호 계약으로 HTML/DOM을 사용하고 인라인 이벤트를 허용하는 대신 선택기로 코드를 묶는 것이 좋습니다.

예를 들어 img 태그에 onclick이있는 캘린더 컨트롤에 캘린더를 표시해야한다면이 캘린더 컨트롤에 2 개의 다른 라이브러리가 나타나서 "캘린더 컨트롤이 팝업 "이벤트입니다. 반면에 라이브러리가 CSS className "calendarPick"이있는 항목을 찾고 이벤트를 연결하면 다른 DOM 라이브러리를 열어서 공유하고있는 동일한 DOM으로 할 일을 수행하고 거의 비슷하게 조정할 수 있습니다 코더 (코더 조정을 요구하는 코드 작성은 코딩 속도를 늦추고 무언가가 깨질 기회를 증가시키는 경향이 있습니다).

동일한 캘린더 라이브러리에서 일부 이벤트를 제공하면 다른 코더가 작업을 완료하는 데 도움이됩니다. 이벤트가 이미 존재하는 경우 해당 이벤트가 깨끗하게 작성되기 때문입니다. 그렇지 않은 경우 프로세스를 해킹하여 코드 기반의 유연성이 떨어질 가능성이 큽니다.

예를 들어 Calendar.getCalendars()와 같은 싱글 톤 메소드를 제공하면 사람들이이 메소드의 고유 버전을 작성하지 못하게하고 함께 구현할 때 특정 클래스의 클래스 이름, DOM 순서, 또는 더 취약한 상황으로 인해 모든 사람의 버전이 계속 작동합니다.

Answer 4

좋은 JS를 작성하는 데 유용한 자료를 찾고 있다면 더글러스 Crockford의 책 JavaScript: The Good Parts에서 코드 구조를 잘 만드는 방법에 대한 팁을 비롯하여 유용한 정보를 얻을 수 있습니다.

JS를 많이 사용하는 앱을 작성할 때 일반적으로 전역 네임 스페이스를 어지럽히 지 않도록 단일 개체를 만든 다음이를 다양한 응용 프로그램 데이터 및 동작 비트가 포함 된 하위 개체로 나눕니다. 작은 예 :

var PandaApp = {}; 
PandaApp.setup = {}; 
PandaApp.setup.init = function init() { 
    // do something neat 
}; 
PandaApp.utils = {}; 
PandaApp.utils.showMessage = function showMessage(msg) { 
    // do some jQuery goodness or something 
}; 

내가 그 안에 데이터와 모든 모든과 정확히 하나의 전역 객체가 그 방법은 나의 선택의 방식으로 깔끔하게 - 네임 스페이스.