'유지 가능 한 자 바스 크 립 트 작성' 노트 3

copy from  작은 포크 http://ciaoca.com/#!diary?id=233
 
 
-----------------------------------------------------------------------------
[제5 장 UI 층 의 소나무 결합]
웹 개발 에서 사용자 인터페이스 (User Interfaoe, UI) 는 세 개의 서로 격 리 되 고 상호작용 하 는 층 에 의 해 정의 된다.
HTML 은 페이지 의 데이터 와 의 미 를 정의 하 는 데 사용 된다.
CSS 는 페이지 에 스타일 을 추가 하고 시각 적 특징 을 만 드 는 데 사 용 됩 니 다.
JavaScript 는 페이지 에 행동 을 추가 하여 더욱 상호작용 을 하 게 합 니 다.
 
5.1 자 바스 크 립 트 를 CSS 에서 분리
CSS 표현 식 사용 하지 않 기 (CSS 표현 식)
※ IE9 에 서 는 CSS 표현 식 을 지원 하지 않 습 니 다
 
5.2 CSS 를 자 바스 크 립 트 에서 분리
DOM 요 소 를 수정 하 는 className 이지 DOM 요 소 를 수정 하 는 style 이 아 닙 니 다.

//      
element.className += "newclass"; 
 
// HTML5 
element.classList.add("newclass"); 
 
// YUI 
Y.one(element).addClass("newclass"); 
 
// jQuery 
$(element).addClass("newclass"); 
 
// Dojo 
dojo.addClass(element, "newclass");

※ 원소 위 치 를 다시 정할 때 는 스타일 의 top, left, bottom, right 속성 을 직접 변경 할 수 있 습 니 다. CSS 에 서 는 완성 할 수 없 기 때 문 입 니 다.CSS 에서 요소 의 기본 속성 을 정의 할 수 있 으 며, 자바 스 크 립 트 에서 이 기본 속성 을 수정 할 수 있 습 니 다.
 
5.3 HTML 에서 자 바스 크 립 트 빼 기
이벤트 처리 프로그램 을 연결 하기 위해 on 속성 (예: onclick) 을 사용 하지 마 십시오:

//       
<botton onclick="doSomething()" id="action-btn">Click Me</button>

JavaScript 방법 으로 이벤트 처리 프로그램 을 추가 합 니 다. 더 좋 은 방법:

function addListener(target, type, handler) { 
    if (target.addEventListener) { 
        target.addEventListener(target, type, handler); 
    } else if (target.attachEvent) { 
        target.attachEvent("on" + type, handler); 
    } else { 
        target["on" + type] = handler; 
    } 
} 
 
function doSomething(){ 
    //    
} 
var btn = document.getElementById("action-btn"); 
addListener(btn, "click", doSomething);

흔히 볼 수 있 는 라 이브 러 리 방법:

// YUI 
Y.one("#action-btn").on("click", doSomething); 
 
// jQuery 
$("#action-btn").on("click", doSomething); 
 
// Dojo 
var btn = dojo.byId("action-btn"); 
dojo.connect(btn, "click", doSomething);)

 
5.4 HTML 을 JavaScript 에서 추출
방법 1: 서버 에서 불 러 오기
템 플 릿 을 서버 에 두 고 Ajax 방법 으로 서버 에서 템 플 릿 을 읽 습 니 다.
 
방법 2: 간단 한 클 라 이언 트 템 플 릿
일부 표 지 를 통 해 자 바스 크 립 트 를 통 해 내용 을 교체 합 니 다.
 
방법 3: 복잡 한 클 라 이언 트 템 플 릿
템 플 릿 엔진 사용: Handlebars http://handlebarsjs.com.
 
 
【 제6 장 전역 변 수 를 사용 하지 않 기 】
브 라 우 저 에서 window 대상 은 전역 대상 과 같 기 때문에 전역 역할 영역 에서 설명 하 는 변수 와 함 수 는 window 대상 의 속성 입 니 다.
var 성명 변 수 를 항상 사용 합 니 다 네 임 스페이스 사용 사용 모듈  
"비동기 모듈 정의" (AMD)
AMD 규범: https://github.com/amdjs/amdjs-api/wiki/AMD
 
0 전역 변수 (익명 함수)

(function(win){ 
    var doc=win.document; 
    //            
    //        
})(window);

 
 
【 제7 장 사건 처리 】
이벤트 가 실 행 될 때 이벤트 대상 (이벤트 대상) 은 이벤트 처리 프로그램 에 리 셋 매개 변수 로 전 송 됩 니 다.이벤트 대상 은 이벤트 와 관련 된 모든 정 보 를 포함 하고 이벤트 의 숙주 (target) 및 기타 이벤트 형식 과 관련 된 데 이 터 를 포함 합 니 다.
마우스 이 벤트 는 이벤트 대상 에 위치 정 보 를 노출 합 니 다.
키보드 이 벤트 는 버튼 의 정 보 를 이벤트 대상 에 노출 합 니 다.
터치 스크린 이 벤트 는 터치 위치 와 지속 시간 (duration) 을 이벤트 대상 에 노출 합 니 다.
 
규칙:
격 리 응용 논리 사건 대상 을 나 누 어 주지 마 세 요  
 
[제8 장 '빈 비교' 피하 기]
8.1 원시 값 검출
문자열, 숫자, 불 값 또는 undefine 를 검사 합 니 다. 가장 좋 은 선택 은 type: of 연산 자 를 사용 하 는 것 입 니 다.
문자열 에 대해 type: of 는 "string" 을 되 돌려 줍 니 다 숫자 에 대해 type of 는 "number" 를 되 돌려 줍 니 다.
불 값 에 대해 type of 는 "boolean" 을 되 돌려 줍 니 다.
undefined 에 대해 type: of 는 "undefined" 로 되 돌아 갑 니 다  
8.2 참조 값 검출
인용 값 도 대상 (object) 이 라 고 합 니 다.
자 바스 크 립 트 에서 원본 값 을 제외 한 값 은 모두 참조 입 니 다.
내 장 된 참조 형식: Object, Array, Date, Error.
type: of 연산 자 는 이 인용 유형 을 판단 할 때 "object" 로 돌아 갑 니 다.
어떤 인용 값 의 종 류 를 검사 하 는 가장 좋 은 방법 은 instanceof 연산 자 를 사용 하 는 것 입 니 다.instanceof 의 기본 문법 은:

value instanceof constructor 
 
//   ：     
if (value instanceof Date) { //    } 
 
//   ：        
if (value instanceof RegExp) { //    } 
 
//   ：   Error 
if (value instanceof Error) { //    }

instanceof 는 대상 의 구조 기 를 검사 할 뿐만 아니 라 원형 체인 도 검사 합 니 다.기본적으로 모든 대상 이 Object 에서 계승 되 기 때문에 모든 대상 의 value instanceof Object 는 true 로 돌아 갑 니 다.
※ 인 스 턴 스 of 는 크로스 프레임 을 지원 하지 않 습 니 다
 
8.2.1 검 측 함수
함 수 를 검사 하 는 가장 좋 은 방법 은 type: of 연산 자 를 사용 하 는 것 입 니 다.
함수 에 대해 type of 는 "function" 을 되 돌려 줍 니 다.
※ IE 8 이하 IE 에 서 는 type: of 를 사용 하여 DOM 노드 (예: document. getElement ById ()) 의 함 수 를 'function' 이 아 닌 'object' 로 되 돌려 줍 니 다.
 
8.2.2 검 측 배열
ECMAScript 5 는 Array. isArray () 를 자 바스 크 립 트 에 정식으로 도입 합 니 다.

//           
function isArray(value) { 
    if (typeof Array.isArray === "function") { 
        return Array.isArray(value); 
    } else { 
        return Object.prototype.toString.call(value) === "[object Array]"; 
    } 
}

※ IE 9 +, Firefox 4 +, Safari 5 +, Opera 10.5 +, Chrome 모두 Array. isArray () 방법 을 구현 하 였 습 니 다.
 
8.3 검 측 속성
속성 이 존재 하 는 지 여 부 를 판단 하 는 가장 좋 은 방법 은 in 연산 자 를 사용 하 는 것 이다.
in 연산 자 는 속성 이 존재 하 는 지 여 부 를 간단하게 판단 할 뿐 속성의 값 을 읽 지 않 습 니 다.대상 의 속성 이 존재 하거나 선 에 대한 원형 을 계승 하면 in 연산 자 는 true 로 돌아 갑 니 다.
 
인 스 턴 스 대상 의 속성 이 존재 하 는 지 확인 하려 면 hasOwnProperty () 방법 을 사용 하 십시오.인 스 턴 스 에 이 속성 이 존재 하면 true 로 돌아 갑 니 다. (이 속성 값 이 원형 에 존재 하면 false 로 돌아 갑 니 다.)
※ IE 8 이하 IE 에 서 는 DOM 대상 이 오 브 젝 트 로부터 물 려 받 은 것 이 아 닙 니 다.