카테고리 보관물: JavaScript

콘솔에서 VUE 객체 사용하기

전에 콘솔에서 AngularJs의 스코프에 접근하기 위한 코드를 올렸는데, 이번에는 VUE에서 내부 객체에 접근하기 위한 방법입니다.
다음과 같이 __vue__ 를 참조하여 VUE 객체에 접근이 가능합니다.

var myVue1 = document.getElementById("myVueId").__vue__
var myVue2 = document.getElementsByClassName("myVueClass")[0].__vue__;

아래 포스트와 같이 Custom JavaScript를 사용하면 더욱 쉽게 디버깅 할 수 있습니다.
크롬에서 cjs로 AngularJS 디버깅하기

AngularJS 에서 동적으로 디렉티브 생성

처음부터 생성할 필요가 없는 요소를 나중에 동적으로 생성하기 위한 코드입니다.
페이지 로딩 시에 초기화하는 객체의 수를 줄여서 조금이라도 빠르게 페이지가 실행되도록 하고, 필요할 때 해당 객체를 생성할 수 있습니다.
아래 코드는 브라우저 콘솔에서 실행하기 위한 것으로, 실제 필요한 부분은 마지막 줄입니다.

var $body = angular.element(document.body);
var $scope = $body.scope();
var injector = $body.injector();
var $compile = injector.get("$compile");
 
angular.element("#wrapper").append( $compile("<my-directive></my-directive>")($scope) );

URL의 파라메터를 오브젝트로 변환하기

PHP와 같은 서버스크립트는 URL의 파라메터 값을 구하기가 편한데, 자바스크립트에서는 좀 번거롭죠. 그래서 오브젝트로 변환하는 코드를 찾아봤습니다.

var replaceMap = {'"':'\\"', '&':'","', '=':'":"'};
var repRegExp = new RegExp(Object.keys(replaceMap).join("|"), "gi");
function replaceFunc(str){
	return replaceMap[str];
}
if(decodeURI(location.search.substring(1)).length > 0){
	console.log(JSON.parse('{"' + decodeURI(location.search.substring(1)).replace(repRegExp, replaceFunc) + '"}'));
}else{
	console.log({});
}

숫자에 1000단위 콤마 넣기

구글해서 찾은 소스입니다. 정규식도 제대로 공부를 해야 할 듯…

/**
 * 통화 형식 만들기
 * @param {Number} 가격
 */
function convertCurrency(n){
	n = "" + n;
	if( /\d{3}\d+/.test(n) ){
		return convertCurrency(n.replace(/(\d{3}?)(,|$)/, ',$&'));
	}
	return n;
}