일부 JSON 데이터를 입력하거나 붙여넣어 올바른지 확인할 수 있습니다. Tab 키를 누르면 자동으로 전체 텍스트를 들여쓰고 서식을 지정합니다. JSON 편집기핵심 코드 코드 복사 코드는 다음과 같습니다. <!-- <BR>/* <BR>주 개체 <BR>*/ <BR>JE={ <BR>데이터:{ },/* 관련 데이터*/ <BR>code:false,/* 형식화된 코드*/ <BR>oldCode:[],/* 기록 코드*/ <BR>editUI:null,/* 관련 편집 상자 */ <BR>msgUI:null,/* 정보 표시 창*/ <BR>treeUI:null,/* 트리 창*/ <BR>name:'JE',/* 인스턴스 이름*/ <BR>root:' <b> ;JSON Worry-free</b>',/* 루트 노드 제목*/ <br>checkbox:0,/* 체크박스 추가 여부*/ <br>hot:null,/* 노드 선택*/ <br> indent:' ',/*인덴트 문자 't' 또는 4 ' '*/ <br>firstUp:true,/*처음으로 자동으로 새로 고침*/ <br>onclick:Array,/*트리 클릭 알림 */ <br>countInfo:'',/*통계 정보*/ <br>formating:false,/* 형식 지정(트리 재구성 금지) */ <br>ico:{/* 트리 아이콘*/ <br>//폴더 구조 라인<br>r0:'img?uuid=20166b3094daba4bc6e18817b8301b093a', <br>r0c:'img?uuid=208018827ed877e31810e838d33e4ac2b0', <br>r1:'img uuid=20 94c793496278bde84be80bb6cb2117f5', <br>r1c 5bc8544cecd8b7f82fcdb', <br>//접두사 이미지<br>nl:'img? uuid=20f508bdc9bb8d98f4529e0fa2475b91bb', <br>vl:'img?uuid=20d5de63f4e6927bbb23c377bd1073d26f', <br>//파일 구조 줄 <br>f1:'img?uuid= 202ccc63 9afd44130a3946e9837672479c', <br>f2:'img?uuid=20900ceb0053a2f7bd07a22337c4e4c72c ', <br>루트:'img?uuid=2069cf3fd1e53a2bb365f 771eac65b50a2', <br>//폴더<br>arr:'img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b', <br>arrc:' img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b', <br>obj:'img?uuid=20c34d1d5d5a4639061e08165c61a97e63', <br>objc:'img?uuid= 20c34d1d5d5a4639061e08165c61a97e63', <br>//파일<br>arr2:' im g?uuid=20327500502b71ed0278a0cc1bf8f8bb41', <br>obj2:'img ?uuid=203346cafeedac1fb7628bc886b9b7fb47' <br>}, <br>toTree:function(){/* 코드 형식을 지정하는 동안 JSON을 트리 HTML로 변환*/ <br> var draw=[],This=this,ico=this.ico <br>JE.firstUp=false;/*첫 번째 자동 생성 완료*/ <br>var inform(prefix/*Prefix HTML*/, lastParent/*상위 노드가 꼬리 노드인지 여부(아이콘이 비어 있는지 확인 | 구조 선)*/,name /*노드 이름*/,value/*노드 값*/,formObj/* 상위가 객체인지 여부( 하위 아이콘 결정) */){/* 하위 노드 구성*/ <br>var rl= prefix==''?ico.r0:lastParent?ico.r1:ico.r2;/* 루트 노드 아이콘 구성 */ <br>if(value&&value.constructor==Array){/* 배열 노드 처리*/ <br>draw.push('<dl><dt>',This.draw(prefix,rl,ico .arr,name,''),'</dt><dd>');/* 폴더 그리기*/ <br>for (var i=0;i<value.length>알림 (prefix This.img(lastParent?ico.nl:ico.vl),i==value.length- 1,i,value[i]) <br>draw.push('</dd></ dl>'); <br>}else if(value&&typeof value=='object'){/* 객체 노드 처리*/ <br>draw.push('<dl><dt>',This.draw( prefix,rl,ico.obj,name,''),'</dt><dd> ');/* 폴더 그리기*/ <br>var len=0,i=0>for( var key in value)len;/* 객체 구성원의 총 수 가져오기*/ <br>for(var key in value)notify(prefix This.img(lastParent?ico.nl:ico.vl), i==len ,key,value[key],true); <br>draw.push('</dd>< /dl>') <br>}else{/* 프로세스 리프 노드(그리기 파일) */ <br>draw.push('<dl><dt>',This.draw(prefix,lastParent?ico .f1:ico.f2,formObj?ico.obj2:ico.arr2,name,value),'< ;/dt></dl>'); <br>}; <br>};/* [ ] 또는 {}가 그려지지 않음 */ <br>if(typeof this.data=='object') {notify('',true,this.root,this.data);}; <br>if(this.treeUI )this.treeUI.innerHTML=draw.join('');/* 트리 창에 표시*/ <br>this.msg('트리 뷰가 성공적으로 생성되었습니다!') <br>}, <br>draw:function (prevfix,line,ico,name,value){/* 하위 HTML 생성자*/ <br>var cmd=false,J=this.ico,imgName=false; <br>스위치(줄) {//패스 스위치 아이콘<br>case J.r0:imgName='r0';break <br>case J.r1 :imgName='r1';break; <br>case J.r2:imgName='r2'; <br>} <br>if(imgName)cmd=' onclick="' this.name '.show(this, '' imgName '')" ';/* 접기 명령 추가*/ <br>var type=typeof name= ='string'?'(객체 멤버)':'(배열 인덱스)'; <br>return prevfix this .img(line,cmd) <br> (this.checkbox?'<input type="checkbox" onclick ="' this.name '.select(this)" />':'') <br> this .img(ico) ' <a href="javascript:void(0)" href="javascript:void (0)" onclick="' this.name '.click(this);" ' <BR> '키 ="' 이름 '" val="' 값 '" >' <br> 이름 유형(값== ''?'':' = ') 값 '<br>}, <br>img:function(src,attr){/* img HTML 구성*/ <br>return '<img src="' src '" src="' src '" ' (attr||'') ' /> ;'; <BR>}, <BR>click:function(item){/* 하위 항목 클릭 통합 콜백 */ <BR>if(this.hot)this.hot.className=''; .hot=item; <BR>this.hot.className='hot';/* 선택한 항목 전환*/ <BR>this.onclick(item) <BR>}, <BR>format:function(txt,compress) /*압축 모드인지 여부*/){/* JSON 소스 코드 형식 지정(객체가 JSON 텍스트로 변환됨) */ <BR>if(/^s*$/.test(txt))return this.msg('The 데이터가 비어 있어 형식을 지정할 수 없습니다! '); <BR>try{var data=eval('(' txt ')' );} <BR>catch(e){ <BR>JE.editUI.style.color='red'; <BR>return this.msg('数据源语法错误,格式化失败! 错误信息: '+e.description,'err'); <BR>}; <BR>JE.editUI.style.color='#000'; <BR>var draw=[],last=false,This=this,line=compress?'':'\n',nodeCount=0,maxDepth=0; <BR>var notify=function(name,value,isLast,indent/*缩进*/,formObj){ <BR>nodeCount++;/*节点计数*/ <BR>for (var i=0,tab='';i<indent;i++ )tab+=This.indent;/* 缩进HTML */ <BR>tab=compress?'':tab;/*压缩模式忽略缩进*/ <BR>maxDepth=++indent;/*缩进递增并记录*/ <BR>if(value&&value.constructor==Array){/*处理数组*/ <BR>draw.push(tab+(formObj?('"'+name+'":'):'')+'['+line);/*缩进'[' 然后换行*/ <BR>for (var i=0;i<value.length;i++) <BR>notify(i,value[i],i==value.length-1,indent,false); <BR>draw.push(tab+']'+(isLast?line:(','+line)));/*缩进']'换行,若非尾元素则添加逗号*/ <BR>}else if(value&&typeof value=='object'){/*处理对象*/ <BR>draw.push(tab+(formObj?('"'+name+'":'):'')+'{'+line);/*缩进'{' 然后换行*/ <BR>var len=0,i=0; <BR>for(var key in value)len++; <BR>for(var key in value)notify(key,value[key],++i==len,indent,true); <BR>draw.push(tab+'}'+(isLast?line:(','+line)));/*缩进'}'换行,若非尾元素则添加逗号*/ <BR>}else{ <BR>if(typeof value=='string')value='"'+value+'"'; <BR>draw.push(tab+(formObj?('"'+name+'":'):'')+value+(isLast?'':',')+line); <BR>}; <BR>}; <BR>var isLast=true,indent=0; <BR>notify('',data,isLast,indent,false); <BR>this.countInfo='共处理节点<b>'+nodeCount+'</b>个,最大树深为<b>'+maxDepth+'</b>'; <br>return draw.join(''); <br>}, <br>msg:function(text,type){/* 编辑状态或者错误通知 */ <br>if(!this.msgUI)return alert(text); <br>with(new Date)var now=([getHours(),getMinutes(),getSeconds()].join(':')).replace(/\b\d\b/g,'0$&'); <br>this.msgUI.innerHTML='<div>['+now+'] '+text.replace(/\n/g,'<br/>')+'</div>'; <br>this.msgUI.className=type; <br>}, <br>show:function (ico,id){/* 트리 노드 표시 및 숨기기*/ <br>var subView=ico.parentNode. parentNode .childNodes[1].style,J=this.ico; <br>if(subView.display=='none'){ <br>subView.display='' <br>ico.src=J[id ] ; <br>}else{ <br>subView.display='none'; <br>ico.src=J[id 'c'] <br>}, <br>선택:함수 ( 보낸 사람){ <br>var sub=sender.parentNode.parentNode.getElementsByTagName("INPUT") <br>for (var i=0;i<sub.length;i ) {sub[i].checked=sender .checked;} <BR>} <BR>}; <BR>JE.add=function(){ <BR>this.msg('함수를 추가하는 중입니다...*_^') <BR> JE.editItem=function(){ <BR>this.msg('함수를 추가하는 중입니다...*_^') <BR>} <BR>JE.begin=function(){/* UI 제어 관련 응답 */ <BR>var $=function (id){return document.getElementById(id)} <BR>/* 관련 UI */ <BR>JE.editUI=$("json_eidit"); 🎜>JE.msgUI=$("json_editInfo"); <BR>JE.treeUI=$("tree") <BR>var updateUI=$("update") <BR>var auto=$("autoUpdate "); <BR>varfontSize=$("fontSize"); <BR>/* 트리 항목 클릭*/ <BR>JE.onclick=function(item){ <BR>var key='키 이름: <input value ="' item.getAttribute('key') '" />', <br>val=' 키 값: ' (item.getAttribute('val')==''?'회원 목록' :'< 입력 값="' item.getAttribute('val') '" />'), <br>add='<button onclick="' this.name '.add(this)"> New< /button>', <br>edit='<button onclick="' this.name '.editItem(this)">Modify</button>' <br>JE.msg(key val add edit , 'info'); <br>} <br>/* 코드 변경 이벤트 수신*/ <br>JE.editUI.oninput=JE.editUI.onpropertychange=function (){ <br>if(JE.formating) return; /* 형식을 지정해도 트리가 새로 고쳐지지 않습니다.*/ <br>if(/^s*$/.test(this.value))return JE.msg('JSON 형식으로 코드를 입력하세요!'); 🎜>clearTimeout( JE.update); <br>try{JE.data=eval('(' this.value ')') <br>}catch(e){ <br>JE.editUI.style.color ='red' ; <br>return JE.msg("소스 코드에 오류가 있습니다: " e.description ' , 편집 중인 경우 이 메시지를 무시하세요!','err'); ; <br>JE.editUI.style.color='#000'; <br>if(auto.checked||JE.firstUp){/*동기화된 경우*/ <br>JE.msg('구문이 정확합니다. , 트리가 재구성되는 중입니다. <br>JE.update=setTimeout(function(){ <br>JE.toTree(); <br>},450); 🎜>}else{ <br>JE.msg('구문이 정확합니다. 새로고침을 클릭하거나 보기 동기화 스위치를 켜거나 계속 편집하세요!') <br>} <br>return true; ; <br>if(window.ActiveXObject) <br>document .execCommand("BackgroundImageCache", false, true); <br>/* 탭 가로채기, 자동 서식*/ <br>JE.editUI.onkeydown=function () { <br>if(event.keyCode==9) {$('format_indent').onclick();event.returnValue=false;} <br>JE.code=this.value; <br> >/* 형식화*/ <br>var format= function(compress){ <br>var code=JE.format(JE.editUI.value,compress) <br>JE.formating=true <br>if( code)JE.editUI.value=code; <br>JE.editUI.focus(); <br>setTimeout(function(){JE.formating=false;},1000) <br>반환 코드; } <br>/* 도구 모음 버튼*/ <br>$('format_indent').onclick=function (){if(format())JE.msg('전체 들여쓰기 스타일 변환,' JE.countInfo)} <br>$('format_compress').onclick= function (){if(format(true)!=undefine)JE.msg('컴팩트 스타일 변환 완료,' JE.countInfo);} <br>updateUI.onclick=function ( ){ <br>JE.firstUp=true ; <br>JE.editUI.onpropertychange()?JE.msg('보기가 새로 고쳐졌습니다!'): JE.msg('데이터가 잘못되었습니다. 새로 고치지 못했습니다!','err ') <br>JE.firstUp=false ; <br>}; <br>$('clear_txt').onclick=function (){JE.editUI.value=JE.treeUI.innerHTML='';JE.editUI .focus();} <br>auto .onclick=function (){JE.msg('뷰 기능 자동 동기화' (this.checked?'On':'Off!'));}; * 다른 이름으로 저장*/ <br>if(/ *@cc_on !@*/true){$('save_as').style.display='none'} <br>$('save_as').onclick=function (){ <br>var d=document, w=d.createElement('IFRAME') <br>w.style.display="none"; <br>d.body.appendChild(w); setTimeout(function(){ <br>var g =w.contentWindow.document; <br>g.charset = 'utf-8'; <br>g.body.innerHTML=JE.editUI.value; <br>g .execCommand("saveas",'', " json.txt") ; <br>},1); <br>} <br>}; 여기서 시작*/ <br>window.onload= 함수(){ <br>JE.begin() <br>} <br>// -->
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
