자바 스크립트 개체의 부분을 별도로 포함합니다.

Question

자바 스크립트 개체를 사용하여 다양한 기능과 변수 데이터를 보유하는 사이트가 있습니다.

var Site = { 
    Page: { 
    ...some functions... 
    }, 
    Player: { 
    ...more functions and variables... 
    } 
} 

제가 직면 한 문제는 스크립트가있는 헤더 파일이 약 500 줄의 코드로 커졌습니다. 페이지와 플레이어 같은 부분을 별도의 파일로 나누어서 조작하기 쉽도록하고 싶습니다. 이 기능의 일부는 PHP의 출력에 의존하며 기본 페이지에 있어야한다는 것이 장애물입니다. 객체에 별도의 파일을 포함하고 구조를 이미 보존 할 수있는 방법이 있습니까?

Answer 1

대문자로 시작하는 변수는 생성자 용으로 예약되어 있습니다.

파일 1 :

var Site = Site || {}; 

Site.Page = {  
    ...some functions... 
} 

파일 2 :

var Site = Site || {}; 

Site.Player = { 
    ...more functions... 
}; 

당신은 또한 객체 리터럴을 선언 할 수 있도록 다음에, 확장 기능을 사용하여 기본 객체에 proerties와 값을 복사 할 수 있습니다. 또는 IIFE를 사용하여 기능을 할당 할 수 있습니다. 이 기능은 기능 감지를 수행하고 결과에 따라 다른 기능을 만드는 경우 편리합니다.

var Site = Site || {}; 

(function(global) { 

    function Player() { 
    // stuff 
    } 

    global.Site.Player = Player; 

    if (test) { 
    global.Site.someFn = function() { 
     // stuff 1 
    }; 

    } else { 
    global.Site.someFn = function() { 
     // stuff 2 
    }; 
    } 

    ... 

}(this)); 

또는 일부 버전.

Answer 2

로직과 데이터를 혼합하지 마십시오. 즉, "일부 기능은 PHP의 출력에 의존합니다"는 코드 냄새입니다. 다음과 같은 코드가있는 경우 :

setSomeContent("<? echo $myobj->title() ?>"); 
setMoreContent("<? echo $myobj->description() ?>"); 

그런 다음 약간 백업 할 시간입니다.

먼저 JS를 깨뜨리는 것이 쉽습니다. 이렇게 각 파일에 스크립트 태그를 만드십시오.

<script src="main.js"></script> 
<script src="page.js"></script> 
<script src="player.js"></script> 

지금 그들은 순서로로드하는, 그래서 우리는 main가 처음로드 확신 할 수 있습니다. 당신이 당신의 JS에서 선언 한 어떤 기능에 완전히 전달

var myObj = <? echo myObj->toJSON() ?>; 
Site.Page.setContentForObject(myObj); 

: PHP에서 당신의 데이터, 그것의 자신의 변수에 저장 JSON과 같은 페이지, 수출을위한 등 지금

// main.js 
var Site = { 
    // functions 
}; 

// page.js 
Site.Page = { 
    // functions 
}; 

// player.js 
Site.Player = { 
    // functions 
}; 

파일. 데이터와 로직의 분리는 이런 방식으로 상당히 깨끗합니다.