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 安心</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:'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>root:'img?uuid=2069cf3fd1e53a2bb365 f771eac65b50a2', <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> vardraw=[],This=this,ico=this.ico; <br>JE.firstUp=false;/*最初の自動構築を完了*/ <br>var Notice=function(prefix/*Prefix HTML*/, lastParent/*親が末尾ノードかどうか (アイコンが空白であることを確認してください | 構造 Line)*/,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>notify (prefix This.img(lastParent?ico.nl:ico.vl),i==value.length- 1,i,value[i]); 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; 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>};/* Not [ ] または {} は描画しません */ <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; :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> 'key ="' 名前 '" val="' 値 '" >' <br> 名前の種類 (値== ''?'':' = ') 値 '</a>' >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>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>}else{ <br>subView.display='none'; <br>}, <br>select:function ( sender){ <br>var sub=sender.parentNode.parentNode.getElementsByTagName("INPUT"); <br>for (var i=0;i<sub.length .>} <br>}; <br>JE.add=function(){ <br>this.msg('関数が追加されています...*_^'); 🎜> 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=$("update"); "); <br>var fontSize=$("fontSize"); <br>/* ツリー項目をクリック*/ <br>JE.onclick=function(item){ <br>var key='キー名: <input value ="' item.getAttribute('key') '" />', <br>val=' キー値: ' (item.getAttribute('val')==''?'メンバーリスト' :'< input value="' 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('構文は正しいです、ツリーが再構築中です、お待ちください。 🎜>}else{ <br>JE.msg('構文は正しいです。更新をクリックするか、ビューの同期スイッチをオンにするか、編集を続行してください。') <br>} <br>return <br>} ; <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>var format= function(compress){ <br>var code=JE.format(JE.editUI.value,compress); <br>if( code)JE.editUI.value=code; <br>JE.editUI.focus(); <br>戻りコード <br> } <br>/* ツールバー ボタン*/ <br>$('format_indent').onclick=function (){if(format())JE.msg('完全なインデント スタイル変換,' JE.countInfo)} <br>$('format_compress').onclick= function (){if(format(true)!=unknown)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=''; .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>} <br>}; function (){ <br>JE.begin (); <br>} <br>// -->
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
