bejson 在線格式化json代碼，算是比較好用的一款，經(jīng)常會(huì)有項(xiàng)目需要編寫(xiě)提交json格式的數(shù)據(jù)。所以在這里分析一下它的代碼格式以及實(shí)現(xiàn)方式恭金！
一點(diǎn)點(diǎn)拆，如果有錯(cuò)誤的地方歡迎指正褂策。
首先chorm按f12調(diào)試：
很明顯的一個(gè)textarea標(biāo)簽横腿。但是隱藏掉了，我們先把它展開(kāi)斤寂。
展開(kāi)后修改耿焊，發(fā)現(xiàn)并不會(huì)影響，代碼部分的展示遍搞，即便刪掉后罗侯，功能也是正常的。暫不明白作者用這個(gè)標(biāo)簽的意圖溪猿，可能是混淆視聽(tīng)钩杰？
接著往下看纫塌，先從使用方面分析：
每當(dāng)我們切換鼠標(biāo)位置時(shí)，代碼的著兩處會(huì)發(fā)生改變讲弄，仔細(xì)觀察就可以知道措左，這兩處，第一處是用來(lái)輸入字符避除，第二處則是展示光標(biāo)怎披。
光標(biāo)實(shí)現(xiàn)非常簡(jiǎn)單，div元素的 border瓶摆，利用visibility屬性閃爍形成光標(biāo)：
而第一處的輸入字符就比較復(fù)雜點(diǎn)：
這個(gè)地方有個(gè) textarea 標(biāo)簽钳枕，標(biāo)簽上有個(gè)div這個(gè)元素使用了overflow: hidden;我們把它脫掉就可以直觀的看到，它實(shí)際上是在你點(diǎn)擊的時(shí)候修改了div的位置赏壹，把textarea 標(biāo)簽挪到你輸入的地方鱼炒。所有你的輸入其實(shí)是在這個(gè)textarea 中進(jìn)行的。
好了蝌借，目前已經(jīng)知道了輸入的實(shí)現(xiàn)昔瞧，我們?cè)谕罂瓷刹糠帧?/p>
從上面的圖片實(shí)驗(yàn)得知，每輸入一行代碼菩佑，他會(huì)生成一個(gè)div標(biāo)簽自晰，div 里標(biāo)簽包含了，行號(hào)稍坯、以及代碼片段酬荞。
那它是怎么實(shí)現(xiàn)的呢？我們先猜測(cè)一下瞧哟。
首先它有一個(gè)CodeMirror-code 的div容器混巧，用來(lái)填充代碼片段。先把代碼刪干凈勤揩，發(fā)現(xiàn)它默認(rèn)會(huì)有一個(gè)子div咧党，也就是默認(rèn)1行。
每當(dāng)我們按下回車(chē)時(shí)陨亡，則會(huì)自動(dòng)插入一行div到容器中傍衡，所以這里我猜測(cè)它監(jiān)聽(tīng)了onmousedown 事件進(jìn)行插入。
前面提到我們寫(xiě)入用的是textarea负蠕，所以事件自然綁定在它上面蛙埂，因此我們找到了這個(gè)添加行的代碼
它在一個(gè)min.js文件中，雖然混淆了遮糖，但是并不能阻止我了解它绣的，我先猜測(cè)它是這個(gè)編輯器的js主文件，看看能否不往下拆解獲取這個(gè)編輯器的功能。因此我們先解析這個(gè)js文件被辑。
在
Ide中精簡(jiǎn)后可以看到，這其實(shí)是一個(gè)自執(zhí)行文件敬惦。因此在這個(gè)app里面應(yīng)該就是主方法,所以我們先看看這里面究竟是啥盼理。
根據(jù)內(nèi)容，里面有editor俄删、form宏怔、query、code畴椰。
然后在我們一個(gè)個(gè)分解
editor: 根據(jù)里面的內(nèi)容臊诊，很明顯它是一個(gè)方法類(lèi)。
form: 應(yīng)該是放IDE的dom斜脂。
query: 目前還不清楚具體作用抓艳。
code: 寫(xiě)入的代碼就存放在這里。
現(xiàn)在非常確定它就是我們要找的功能帚戳，那我們?cè)趺慈ナ褂盟?br>
既然它的dom是form玷或，那我們先從form上做文章。
很明顯的有個(gè)
name="main" 片任，然后我們?cè)趈s文件中查找偏友。很遺憾并沒(méi)有找到有用的信息，那么它是怎么獲取到這個(gè)
from的呢对供？接著往下看位他。我們把js文件拷貝下來(lái)，自己跑一遍产场。
發(fā)現(xiàn)了一個(gè)報(bào)錯(cuò)鹅髓，根據(jù)報(bào)錯(cuò)往上看。
from 應(yīng)該是從w.forms.main 中取得京景。在它上面迈勋，我發(fā)現(xiàn)了
這樣一來(lái)我們就知道了
form = document.forms.main
我們先給他加上from
再往下走，發(fā)現(xiàn)它還是會(huì)報(bào)錯(cuò)醋粟，還是上面的錯(cuò)誤靡菇，缺少code。
然后這里尷尬的發(fā)現(xiàn)我js引用的早了- -米愿，要在dom 加載完引用js厦凤。
現(xiàn)在我們的頁(yè)面已經(jīng)ok啦。
嘗試使用一下
非常完美育苟！接下來(lái)我把它搬到我的vue項(xiàng)目中去较鼓。
完成的效果圖！ 以上完畢。
最后附上扒好的html版源碼
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" >
</head>
<body>
<div style="height: 400px;">
<form name="main" onsubmit="return false" style="margin-top: 10px;">
<textarea id="code" name="code" style="display: none;resize:both"></textarea>
<div class="grippie" id="btnShouOrFang" onclick="" style="">點(diǎn)擊俺最大化</div>
<div class="validate">
<div class="left1 validate" id="btn2019040416" style="float:left">
<div class="btn-group" role="group" aria-label="...">
<button class="copy hide" data-ga="copy"></button>
<input name="validate" data-ga="validate" type="submit" id="validate" class="btn btn-primary"
value="格式化校驗(yàn)">
<input type="button" onclick="show(1)" class="btn btn-default" value="新版">
<input type="button" value="壓縮" id="btnYasuo" class="btn btn-default" />
<input type="button" value="轉(zhuǎn)義" id="btnZhuanyi" class="btn btn-default" />
<input type="button" value="去除轉(zhuǎn)義" id="btnRemoveZhuanyi" class="btn btn-default" />
<input type="button" value="unicode轉(zhuǎn)中文" id="btnToChar" class="btn btn-info" />
<input click-type="copy" onclick="$(this).attr('data-clipboard-text',app.editor.getValue())"
class="btn btn-default" type="button" value="復(fù)制" />
<input name="validate" class="btn btn-default"
onclick="javascript:json_input.value='';$('#json_input').focus(); " type="reset"
value="清空" />
</div>
</div>
<div>
<a rel="external nofollow"
target="_blank"><span class="tg1" style="background: #118eab;">C語(yǔ)言在線編程訓(xùn)練題庫(kù)</span></a>
<a rel="external nofollow"
target="_blank"><span class="tg1" style="background: #009688;">layuiAdmin-通用后臺(tái)管理模板</span></a>
</div>
</div>
</form>
</div>
</body>
</html>
<script src="http://upyun.bejson.com/js/bejson/bejson_index20190109.min.js" type="text/javascript"></script>
<style>
* {
font-family: "Microsoft YaHei", 微軟雅黑, "MicrosoftJhengHei", 華文細(xì)黑, STHeiti, MingLiu;
}
</style>
原創(chuàng)不易博烂，轉(zhuǎn)載請(qǐng)注明出處香椎！
