values, objs 관리 디자인 패턴 질문

요즘은 보통 ES6의 모듈을 사용하는데,
전통적인 방식으로 만들거나 복잡한 환경설정 없이 간단하게 구성할 때는 아래와 같이 하기도 합니다.
예시입니다.

apple.js
----------
// 메인 객체
const apple = {
// 필요하다면 프로젝트 전체에서 필요한 정보들 기술
};

apple.config.js
----------
apple.config = {
// 설정에 관련된 정보들
};

apple.sceneInfo.js
----------
apple.sceneInfo = [
// 애니메이션값 정보들(sceneInfo)
{
sectionTitle: 'intro',
scrollHeight: 5,
....
},
....
....
];

이런식으로 메인 객체(보통 프로젝트 이름으로 생성)인 apple의 속성으로 추가되는 모듈들을 만듭니다.
정보 자체가 복잡하고 많다면, 개수대로 파일을 만들어서 관리하는 방법도 있을 것 같고요.
위의 것들은 정적으로 세팅하는 정보들이고,
자기만의 메서드가 필요한 UI의 구성요소들은 아래와 같은 방식으로 해볼 수 있겠습니다.
예를들어 header를 만든다면,
apple.header.js
----------
apple.header = (() => {
func1() {
// header의 라이브러리 함수 1
}

func2() {
// header의 라이브러리 함수 2
}

return {
func1: func1,
func2: func2
};
})();

클로저의 특징을 이용해서 아래처럼 공개할 메서드들을 객체에 담아 리턴해주고,
다른 모듈에서 apple.header.func1()을 사용할 수 있게끔 합니다^^

답변을 작성하고 질문을 다시 읽어보니.. 이게 원하시는 답변이 맞나 싶네요^^;;
애니메이션은 보통 디자인에 치밀하게 맞추는 경우가 많기 때문에 노가다긴 하지만 일일이 원하는대로 직접 입력하는게 제일 좋다고 생각됩니다. 그 정보를 담고 있는 파일 관리를 어떻게 하느냐에 대한 답변이 위의 내용이 될 수 있지 않을까 싶습니다.

인프런 커뮤니티 질문&답변