Javascript 개발가이드

  • 쇼핑몰은 여러 App을 사용할 수 있기 때문에 전역자원(객체, 함수, 변수)에 대한 Javascript의 네이밍 가이드 및 네임스페이스의 정의와 사용을 권장하고 있습니다. (Script, Jquery 포함)

Javascript 네임스페이스 사용 목적

  • 쇼핑몰은 여러 App을 선택/설치하여 사용할 수 있습니다. 이러한 경우 각 App에서 제공하는 스크립트에서 사용하는 전역자원(객체, 함수, 변수 등)에 대한 네이밍이 각 App, 모듈, 나아가 파일명까지 일관성을 유지할 수 없습니다.
  • 이에 따라 App 상호간의 충돌로 인한 불가피한 오류나 동작불능 상태가 발생할 수 있습니다.
  • 이를 미연에 방지하기 위하여 네이밍 및 네임스페이스 사용에 대한 가이드를 제공하고 권장하고 있습니다.
  •  
  • 본 가이드에서 제공하는 내용에 대한 목표는 아래와 같습니다.
  •  1) 각 App간의 스크립트 충돌 예방 및 개발을 위한 네이밍 등에 대한 일관성 유지
  •  2) 동일 이름의 전역자원(변수, 함수) 사용에 대한 기능 오류 방지

Javascript 네이밍 가이드

  • 스크립트의 네이밍 가이드는 스크립트 네이밍으로 인한 상호간의 충돌 예방을 목적으로 권장하는 사항입니다.
  • 파일 경로 및 파일명 네이밍 룰
파일 경로 및 파일명 네이밍 룰
구분 네임스페이스 형식 네임스페이스 예제 파일명 예제
App에 종속적인 JS {{App이름}}_ADMIN_{{세부경로명}}_{{파일명}} SMARTVIEW_ADMIN_MENU_LNB {{도메인}}/admin/menu/lnb.js
{{App이름}}_FRONT_{{세부경로명}}_{{파일명}} SMARTVIEW_FRONT_AUTH_CS {{도메인}}/front/auth/cs.js
{{App이름}}_UTIL_{{세부경로명}}_{{파일명}} SMARTVIEW_UTIL_DATE_DIFF {{도메인}}/util/date/diff.js

Javascript 네임스페이스 가이드

  • 스크립트의 네임스페이스 사용 가이드는 전역 객체의 생성에 따른 상호간의 충돌 예방을 목적으로 권장하는 사항입니다.
  • 일반적으로 충돌이 발생할 수 있는 패턴
// 위험한 패턴

var MYAPP = {};
 

// 개선된 패턴

if(typeof MYAPP === 'undefined') {
   var MYAPP = {};
}
 

// 더 짧게 쓸 수 있다.

var MYAPP = MYAPP || {};

  • 기본적으로 권장하는 자바스크립트 사용에 대한 패턴
    즉시실행이 가능한 함수 내부에 전역변수를 선언하고 전역변수를 사용하는 자원들을 실행함수 안에다가 넣어두면 해당 함수가 지역변수화가 됨에 따라 네이밍의 충돌을 막을 수 있다.
// 최대한 라이브러리 의존성 없이 자바스크립트를 작성할 수 있는 방법

(function(){
   // 실행될 자바스크립트 입력
})();

  • 객체를 이용하여 네임스페이스를 정의한 패턴

var MYAPP = MYAPP || {};

MYAPP.makenamespace = function (ns_string) {
var parts = ns_string.split('.'),
    parent = MYAPP, i;

// 처음에 중복되는 전역 객체명은 제거한다.
if(parts[0] === 'MYAPP') {
     parts = parts.slice(1);
   }

for (i = 0; i < parts.length; i +=1 ) {
     // 프로퍼티가 존재하지 않는다면 생성한다.
     if(typeof parent[parts[i]] === 'undefined') {
       parent[parts[i]] = {};
     }
     parent = parent[parts[i]];
   }
return parent;
   };

// 네임스페이스 생성 함수를 사용한다.
MYAPP.makenamespace('MYAPP.modules.module2');

// 위 네이스페이스 함수는 다음과 같은 결과를 반환한다.

var MYAPP = {
   modules : {
     module2 : {}
   }
};

window.onload 처리방법

  • 스크립트 삽입시에 window.onload 태그를 이용하여 스크립트를 호출하는 경우 다른 앱이나 서비스의 영향을 받을 수 있습니다.
  • 이를 방지하기 위해 아래와 같이 처리할 것을 권장하고 있습니다.
샘플 : 권장하지 않는 사용방법 > onload 사용

window.onload = function(event) {
   // 동작 코드
}


샘플 : 권장하지 않는 사용방법 > addEventListener 사용

window.addEventListener("load",function(event) {
   // 동작 코드
},false);


샘플 : 권장하는 사용방법 > document.readyState 사용 (추천)

var appName_funcName = function () {
   //동작코드
};

if (document.readyState == 'complete') {
   appName_funcName();
} else {
   window.addEventListener('load', appName_funcName);
}


샘플 : 권장하는 사용방법 > setTimeout 사용

var appName_funcName_flag = false;
var appName_funcName = function () {
   //동작코드
   appName_funcName_flag = true;
};

setTimeout(function(){
   if (appName_funcName_flag != true) {
      appName_funcName();
   }
}, 100);

주의사항
  • appName_funcName 변수명은 절대 그대로 사용하시면 안됩니다.
  • 그대로 사용하시게 되면 개발사 스크립트의 변수명이 겹칠경우 충돌 위험성이 있습니다.(구별되는 변수명 사용)