구글 캘린더 연동간 흥미로운 소스를 발견함
<script async defer src=”https://apis.google.com/js/api.js"
onload=”this.onload=function(){};handleClientLoad()”
onreadystatechange=”if (this.readyState === ‘complete’) this.onload()”>
</script>script 에 온갖 속성들이 다 들어가 있다.
(ansyc, defer, onload, onreadystatechange)
그래서 이를 한번 분석해보기로 했다.
1. script
HTML <script> 요소는 HTML 또는 XHTML 문서내에서 실행 가능한 스크립트를 포함하거나 참조하기 위해 사용됩니다.
2. src
외부 스크립트의 URI를 지정, 문서에 직접 스크립트를 포함시킴
3. async
boolean 속성, 브라우저 비동기적으로 실행 할건지, src 속성이 없으면 무시
4. defer
브라우저 파싱이 완료 된 후 로딩, src 속성이 없으면 무시
5. onload
객체가 로드되었을때 발동하는 이벤트
* 이벤트가 중복 로드 되는걸 방지하기 위해 this.onload = function(){} 를 이용하여 현재 엘리먼트의 onload 이벤트를 제거
6. onreadystatechange
- 서버로 요청에 있어 몇가지 응답을 기초로 하여 작업을 수행
- onreadystatechange 이벤트 마다 readyState 상태 변화를 트리거
- readyState의 속성은 XMLHttpRequest 상태를 갖고 있다.
- readyState (XMLHttpRequest의 상태를 보유)
* uninitialized : 초기화 요청 전
* loading : 서버 연결이 설정
* loaded : 요청이 접수
* interactive : 요청 완료 중, 충분히 로드, 사용자가 상호 작용 할수 있음
* complete : 요청 완료, 응답이 준비됨 - status
* 200 : 성공
* 404 : 페이지를 찾을 수 없습니다. - readyState가 4일때만 응답
- this.readyState === ‘complete’ 즉 script의 async 혹은 defer 이벤트로 로드가 완료 되고 onload 이벤트 실행
기존 JQUERY에서 $(document).ready 를 이용하여 스크립트를 구현하는것을 Native 하게 구현하면 저렇게 된다.
참고
- 꼼꼼히 살펴보는 SCRIPT 엘리먼트
- SCRIPT ELEMENT
- Onload Event
- OnReadyStateChange Event(
