reflection ($object) 사용법
개요
reflection 페이지는 $object(전역 객체, syn.$ 형태의 별도 alias 없음)가 제공하는 타입 확인/복제 등 리플렉션 관련 확장 함수를 보여주는 예제입니다. $object는 syn.js 내부에서 $number, $string과 같은 방식으로 정의되어 있으며, extension_object.html과 완전히 동일한 모듈을 다루는 별도의(더 오래된) 데모 페이지입니다.
참고: 이 페이지는
$w.initializeScript({ ... })형태의 레거시(구형) 스크립트 등록 방식을 의도적으로 그대로 유지합니다.extension_object.html,template.html등 대부분의 최신 예제 페이지는let $x = { extends, hook, event, method }형태의 객체를 선언하는 새 방식을 사용하지만, HandStack은 두 방식을 모두 지원하며reflection.html은 그 대안/구형 등록 관례를 보여주기 위한 목적으로 남겨둔 페이지입니다.
로드 방법
<script src="/lib/highlight.js/highlight.min.js"></script>
<script src="/lib/showdown/showdown.min.js"></script>
<script src="/js/syn.loader.js"></script>
syn.loader.js가 페이지의 moduleScript(파일명 기준 reflection)를 읽어 reflection.js를 로드하고, 그 안의 $w.initializeScript({...}) 호출로 이벤트 핸들러를 등록합니다.
빠른 시작
$w.initializeScript({
btnGetType_click() {
syn.$l.get('txtGetType').value = $object.getType('txtGetType')
},
// ...
})
각 키는 {id}_{이벤트명} 규칙으로 대응되는 HTML 엘리먼트의 이벤트에 자동으로 바인딩됩니다.
주요 시나리오 / 사용 방법
- 타입 판별:
getType,isDefined,isNull,isArray,isDate,isString,isNumber,isFunction,isObject,isObjectEmpty,isBoolean,isEmpty - 객체 복제:
clone
실전 예제 페이지
reflection.html/reflection.js(본 페이지, 레거시 등록 방식)extension_object.html/extension_object.js(동일한$object모듈을 최신 등록 방식으로 보여주는 페이지)
주의 사항
reflection.js는 의도적으로$w.initializeScript스타일을 유지합니다. 새 예제 페이지를 작성할 때는template.html/template.js를 스캐폴드로 참고해let $x = { extends, hook, event, method }형태의 최신 방식을 사용하는 것을 권장합니다.$object에는syn.$형태의 별도 alias가 없습니다. 항상 전역$object로 접근합니다.
관련 모듈
extension_object— 동일한$object모듈의 최신 등록 방식 데모parsehtml— 이 페이지에서 markdown/코드 하이라이트 렌더링에 사용 하는 mixin
API 참조
모듈 정보
- 전역 변수:
$object(별도syn.$alias 없음,$object.extend({...})로 확장) - 이 문서는 object의 API 참조 섹션와 동일한
$object모듈을 다룹니다. 두 문서는 같은 API 표면을 설명하므로 내용이 겹치는 것이 정상이며,reflection.html은 레거시$w.initializeScript등록 방식으로,extension_object.html은 최신 등록 방식으로 이 모듈을 시연합니다.
속성/메서드
| 메서드 | 시그니처 | 설명 |
|---|---|---|
getType | getType(val) | 값의 타입을 문자열로 반환합니다 ('null', 'array', 'date', 'element', 'object' 등 세분화 포함). |
isDefined | isDefined(val) | 값이 undefined가 아닌지 확인합니다. |
isNull | isNull(val) | 값이 null인지 확 인합니다. |
isArray | isArray(val) | 값이 배열인지 확인합니다 (Array.isArray). |
isDate | isDate(val) | 값이 유효한 Date 인스턴스인지 확인합니다. |
isString | isString(val) | 값이 문자열 타입인지 확인합니다. |
isNumber | isNumber(val) | 값이 NaN이 아닌 숫자 타입인지 확인합니다. |
isFunction | isFunction(val) | 값이 함수 타입인지 확인합니다. |
isObject | isObject(val) | 값이 null이 아닌 객체 타입인지 확인합니다. |
isObjectEmpty | isObjectEmpty(val) | 값이 순수 객체({})이며 키가 없는(빈) 객체인지 확인합니다. |
isBoolean | isBoolean(val) | 값이 boolean 이거나 'TRUE'/'FALSE'/'T'/'F'/'Y'/'N'/'1'/'0' 형태의 boolean 표현 문자열인지 확인합니다. |
isEmpty | isEmpty(val) | undefined, null, NaN, 빈 문자열, 빈 배열, 빈 객체 등 "빈 값"인지 확인합니다. |
clone | clone(val, isNested = true) | 객체/배열/Date/HTMLElement를 포함해 값의 사본을 반환합니다 (isNested가 true면 재귀적으로 복제). |
같은 모듈에 존재하지만 reflection.html에서는 시연하지 않고 extension_object.html에서 시연하는 메서드:
| 메서드 | 시그니처 | 설명 |
|---|---|---|
isNullOrUndefined | isNullOrUndefined(val) | 값이 undefined 또는 null인지 확인합니다. |
toCSV | toCSV(obj, options = {}) | 객체(배열)를 CSV 문자열로 변환합니다. |
toParameterString | toParameterString(jsonObject) | JSON 객체를 @key:value; 형태의 파라미터 문자열로 변환합니다. |
defaultValue | defaultValue(type) | 타입 이름 문자열에 대응하는 기본값을 반환합니다. |
extend | extend(to, from, overwrite = true) | 두 객체를 재귀적으로 병합합니다. |
excludeKeys | excludeKeys(sourceObject, keysToExclude) | 지정한 키를 제외한 새 객체를 반환합니다. |
parseJsonValue | parseJsonValue(value, jsonType) | 지정한 JSON 타입에 맞게 값을 파싱/변환합니다. |
참고: 과거 버전의
reflection.js에는$object.method(...)를 이용해 동적으로 메서드를 추가하는 데모가 있었으나, 현재syn.js의$object에는 그런method함수가 존재하지 않아 본 갱신 작업에서 제거했습니다.