? ? 本文要推薦的[ToolFk]是一款程序員經(jīng)常使用的線上免費測試工具箱天吓，ToolFk 特色是專注于程序員日常的開發(fā)工具贿肩，不用安裝任何軟件，只要把內(nèi)容貼上按一個執(zhí)行按鈕,就能獲取到想要的內(nèi)容結(jié)果龄寞。ToolFk還支持??BarCode條形碼在線生成汰规、?QueryList采集器、?PHP代碼在線運行物邑、?PHP混淆溜哮、加密、解密色解、?Python代碼在線運行茂嗓、JavaScript在線運行、YAML格式化工具科阎、HTTP模擬查詢工具述吸、HTML在線工具箱、JavaScript在線工具箱锣笨、CSS在線工具箱蝌矛、JSON在線工具箱道批、Unixtime時間戳轉(zhuǎn)換、Base64/URL/Native2Ascii轉(zhuǎn)換朴读、CSV轉(zhuǎn)換工具箱屹徘、XML在線工具箱、WebSocket在線工具衅金、Markdown 在線工具箱噪伊、Htaccess2nginx 轉(zhuǎn)換、進制在線轉(zhuǎn)換氮唯、在線加密工具箱鉴吹、在線偽原創(chuàng)工具、在線APK反編譯惩琉、在線網(wǎng)頁截圖工具豆励、在線隨機密碼生成、在線生成二維碼Qrcode瞒渠、在線Crontab表達式生成良蒸、在線短網(wǎng)址生成、在線計算器工具伍玖。等20多個日常程序員開發(fā)工具嫩痰，算是一個非常全面的程序員工具箱網(wǎng)站。
網(wǎng)站名稱：ToolFk
網(wǎng)站鏈結(jié)：https://www.toolfk.com/
工具鏈接：https://www.toolfk.com/tool-format-javascript
代碼教學(xué)
本工具[在線JavaScript美化(格式化)/加密/解密/混淆]依賴于Codemirror,它的Github地址為：https://github.com/codemirror/CodeMirror, 加密窍箍、解密使用到http://dean.edwards.name/packer/庫,美化使用到csso-browser庫串纺，https://github.com/css/csso。使用代碼如下
STEP 1
STEP 2
核心代碼如下
beautify_start:function(options){
????if?(toolfk.beautify_default.beautify_in_progress)?{
????????return;
????}
????var?opts?=?$.extend({},toolfk.beautify_default,?options);
????var?source?=?opts.source.getValue();
????if(source==''){
????????return?layer.msg(NOT_EMPTY);
????}
????toolfk.beautify_default.beautify_in_progress?=?true;
????if?(opts.language?===?'html')?{
????????output?=?beautifier.html(source,?opts);
????}?else?if?(opts.language?===?'css')?{
????????output?=?beautifier.css(source,?opts);
????}?else?{
????????if?(opts.detect_packers)?{
????????????source?=?toolfk.beautify_unpacker_filter(source);
????????}
????????output?=?beautifier.js(source,?opts);
????}
????opts.target.setValue(output);
????toolfk.report('beautify',output);
????toolfk.beautify_default.beautify_in_progress?=?false;
},
pack_js:function(options)?{
????if?(toolfk.beautify_default.beautify_in_progress)?{
????????return;
????}
????var?opts?=?$.extend({},toolfk.beautify_default,?options);
????var?source?=?opts.source.getValue();
????if(source==''){
????????return?layer.msg(NOT_EMPTY);
????}
????toolfk.beautify_default.beautify_in_progress?=?true;
????var?packer?=?new?Packer;
????if?(opts.is_base64)?{
????????var?output?=?packer.pack(source,?1,?opts.is_shrink);
????}?else?{
????????var?output?=?packer.pack(source,?0,?opts.is_shrink);
????}
????opts.target.setValue(output);
????toolfk.report('compress',output);
????toolfk.beautify_default.beautify_in_progress?=?false;
},
dec_pack:function(options){
????if?(toolfk.beautify_default.beautify_in_progress)?{
????????return;
????}
????var?opts?=?$.extend({},toolfk.beautify_default,?options);
????var?source?=?opts.source.getValue();
????if(source==''){
????????return?layer.msg(NOT_EMPTY);
????}
????toolfk.beautify_default.beautify_in_progress?=?true;
????try?{
????????eval('var?value=String'?+?source.slice(4));
????????opts.target.setValue(value);
????????toolfk.report('deciphering-compress',value);
????}?catch?(e)?{
????????layer.msg(TEXT_ERROR);
????}
????toolfk.beautify_default.beautify_in_progress?=?false;
},
dec_pack_shrink:function(options){
????if?(toolfk.beautify_default.beautify_in_progress)?{
????????return;
????}
????var?opts?=?$.extend({},toolfk.beautify_default,?options);
????var?source?=?opts.source.getValue();
????if(source==''){
????????return?layer.msg(NOT_EMPTY);
????}
????toolfk.beautify_default.beautify_in_progress?=?true;
????try?{
????????eval('var?value=String'?+?source.slice(4));
????????var?source?=?toolfk.beautify_unpacker_filter(value);
????????output?=?beautifier.js(source,?opts);
????????opts.target.setValue(output);
????????toolfk.report('decode-code',output);
????}?catch?(e)?{
????????layer.msg(TEXT_ERROR);
????}
????toolfk.beautify_default.beautify_in_progress?=?false;
},
code_code:function(options){
????if?(toolfk.beautify_default.beautify_in_progress)?{
????????return;
????}
????var?opts?=?$.extend({},toolfk.beautify_default,?options);
????var?target?=?opts.target.getValue();
????if(target==''){
????????return?layer.msg(NOT_EMPTY);
????}
????toolfk.beautify_default.beautify_in_progress?=?true;
????new?ClipboardJS('.copy-code',?{
????????text:?function(trigger)?{
????????????layer.msg(COPY_SUCC);
????????????return?target;
????????}
????});
????toolfk.beautify_default.beautify_in_progress?=?false;
},
/*?css?*/
purify_css:function(options){
????if?(toolfk.beautify_default.beautify_in_progress)?{
????????return;
????}
????var?opts?=?$.extend({},toolfk.beautify_default,?options);
????var?source?=?opts.source.getValue();
????if(source==''){
????????return?layer.msg(NOT_EMPTY);
????}
????toolfk.beautify_default.beautify_in_progress?=?true;
????var?value???=???toolfk.purify_encode(source).replace(/\}/g,'}\n');
????opts.target.setValue(value);
????toolfk.report('purify_css',value);
????toolfk.beautify_default.beautify_in_progress?=?false;
},
purify_encode:function(text){
????var?val?=?text;
????val?=?val.replace(/\/\*(.|\n)*?\*\//g,'');??????????//去除注釋
????val?=?val.replace(/^\s+|\s+$/g,'');???????????????????//清除首尾空格
????val?=?val.replace(/(:)\s+/g,'$1');?????????????????????//去除?冒號后多個空格??????????????如?width:??100px??=>?width:100px
????val?=?val.replace(/\s{2,}/g,'?');??????????????????????//去除?多余空格2個以上?????????????如?margin:?10px???20px??30px??=>?margin:10px?20px?30px
????val?=?val.replace(/,\s+|\s+,/g,',');????????????????//去除?多個樣式共享時的多余空格????如?h1,??h2??,?h3??=>h1,h2,h3
????val?=?val.replace(/;{2,}|;\s+/g,';');???????????????//去除?多個分號或分號后面多余空格??如?width:200px;;??height:100px??=>?width:200px;height:100px
????val?=?val.replace(/\s*\{\s*/g,'{');???????????????????//去除?選擇符后面多余空格??????????如?div?{?height:100px}???=>?div{height:100px}
????val?=?val.replace(/\s*}\s*/g,'}');????????????????//去除?選擇器前面多余空格??????????如?div{height:100px}??a{}???=>?div{height:100px}a{}
????val?=?val.replace(/[\n\t\f\r]/g,'');???????????????//去除換行,制表符,分頁符,回車
????val?=?val.replace(/;}/g,'}');
????return?val;
},
optimize_css:function(options){
????if?(toolfk.beautify_default.beautify_in_progress)?{
????????return;
????}
????var?opts?=?$.extend({},toolfk.beautify_default,?options);
????var?source?=?opts.source.getValue();
????if(source==''){
????????return?layer.msg(NOT_EMPTY);
????}
????toolfk.beautify_default.beautify_in_progress?=?true;
????var?lastResult?=?csso.minify(source,?{
????????restructure:?true
????});
????var?value???=???lastResult.css;
????opts.target.setValue(value);
????toolfk.report('optimize_css',value);
????toolfk.beautify_default.beautify_in_progress?=?false;
},
值得一試的三個理由：
整合各種程序員開發(fā)中經(jīng)常使用的開發(fā)測試工具椰棘。
簡潔美觀大氣的網(wǎng)站頁面
支持 在線格式化執(zhí)行代碼纺棺、APK在線反編譯、在線高強度密碼生成邪狞、在線網(wǎng)頁截圖 等二十多種工具服務(wù)
同時還推薦一下它的姐妹網(wǎng)www.videofk.com視頻下載工具箱
