13 мая 2014
Кравченко Виктор

Как отформатировать фрагмент JavaScript-кода?

Пользовательские интерфейсы JavaScript HTML Хакинг
01

Бывают ситуации, когда необходимо изучить обфусцированный, либо приведенный в нечитаемый вид фрагмент JavaScript-кода. При рассмотрении кода в исходном виде задача изучения практически неосуществима. Ручное форматирование поможет лишь при небольших объемах. На помощь могут прийти сторонние приложения, либо веб-сервисы. Одним из функциональных и удобных сервисов является Online JavaScript beautifier. Обфусцирование он конечно не исправит, но восприятию поможет.

02

Пример, (одной строкой) было:

03
1
function(_){"use strict";_.uploader=function(e){function a(){e.onBeforeUpload(p)}function t(){var _;e.onAfterUpload(),_=d.clone(!0),_.val(""),d.replaceWith(_),d=_,d.removeAttr("disabled"),r=void 0}function n(){i||(i=_('<iframe name="ajax-up" id="ajax-up" src="#">').hide().appendTo("body").load(function(){var a,n=_.trim(i.contents().find("body").html()),s=_("<div />").html(n);s.first().children().remove(),a=s.text(),i.empty(),""!==a&&e.onFileUploaded(_.parseJSON(a),r),t()})),a(),o.attr({action:e.url,method:"post",enctype:"multipart/form-data",encoding:"multipart/form-data",target:"ajax-up"}).submit(),_.browser.msie||d.attr("disabled",!0),o.attr(m)}function s(n){var s=new XMLHttpRequest,i=n.files[0],o=new FormData;a(),_.browser.msie||d.attr("disabled",!0),o.append(l,i),s.open("POST",e.url),s.onload=function(a){var n;4===a.target.readyState&&(n=_.trim(a.target.responseText),""!==n&&e.onFileUploaded(_.parseJSON(n),r),t())},s.upload.onprogress=function(_){if(_.lengthComputable){var a=_.position||_.loaded,t=_.totalSize||_.total,n=a/t*100;e.onProgress(Math.round(n))}},s.send(o)}var i,r,o=_(e.form),d=_("input[type=file]",o),l=d.prop("name"),m={},p={progress:!1},c="undefined"==typeof XMLHttpRequest||"undefined"==typeof FormData;c&&_.each(["target","action","method","encoding","enctype"],function(_,e){m[e]=o.attr(e)||null}),p.progress=!c&&"onprogress"in new XMLHttpRequest,d.change(function(){var a=_(this).val(),t=a.split(".").pop().toLowerCase();if(!r&&(null===e.allowedExtensions||_.inArray(t,e.allowedExtensions)>=0)){if(!e.isUploadAllowed(a))return;r=a,c?n():s(this)}else e.onWrongExtension()})},_.fn.extend({uploader:function(e){return new _.uploader(_.extend({url:"/additem/image",allowedExtensions:["jpg","jpeg","gif","png"],form:this,isUploadAllowed:function(){return!0},onFileUploaded:function(){},onBeforeUpload:function(){},onAfterUpload:function(){},onProgress:function(){},onWrongExtension:function(){}},e))}})}
04

стало:

05 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
function (_) { "use strict"; _.uploader = function (e) { function a() { e.onBeforeUpload(p) } function t() { var _; e.onAfterUpload(), _ = d.clone(!0), _.val(""), d.replaceWith(_), d = _, d.removeAttr("disabled"), r = void 0 } function n() { i || (i = _('<iframe name="ajax-up" id="ajax-up" src="#">').hide().appendTo("body").load(function () { var a, n = _.trim(i.contents().find("body").html()), s = _("<div />").html(n); s.first().children().remove(), a = s.text(), i.empty(), "" !== a && e.onFileUploaded(_.parseJSON(a), r), t() })), a(), o.attr({ action: e.url, method: "post", enctype: "multipart/form-data", encoding: "multipart/form-data", target: "ajax-up" }).submit(), _.browser.msie || d.attr("disabled", !0), o.attr(m) } function s(n) { var s = new XMLHttpRequest, i = n.files[0], o = new FormData; a(), _.browser.msie || d.attr("disabled", !0), o.append(l, i), s.open("POST", e.url), s.onload = function (a) { var n; 4 === a.target.readyState && (n = _.trim(a.target.responseText), "" !== n && e.onFileUploaded(_.parseJSON(n), r), t()) }, s.upload.onprogress = function (_) { if (_.lengthComputable) { var a = _.position || _.loaded, t = _.totalSize || _.total, n = a / t * 100; e.onProgress(Math.round(n)) } }, s.send(o) } var i, r, o = _(e.form), d = _("input[type=file]", o), l = d.prop("name"), m = {}, p = { progress: !1 }, c = "undefined" == typeof XMLHttpRequest || "undefined" == typeof FormData; c && _.each(["target", "action", "method", "encoding", "enctype"], function (_, e) { m[e] = o.attr(e) || null }), p.progress = !c && "onprogress" in new XMLHttpRequest, d.change(function () { var a = _(this).val(), t = a.split(".").pop().toLowerCase(); if (!r && (null === e.allowedExtensions || _.inArray(t, e.allowedExtensions) >= 0)) { if (!e.isUploadAllowed(a)) return; r = a, c ? n() : s(this) } else e.onWrongExtension() }) }, _.fn.extend({ uploader: function (e) { return new _.uploader(_.extend({ url: "/additem/image", allowedExtensions: ["jpg", "jpeg", "gif", "png"], form: this, isUploadAllowed: function () { return !0 }, onFileUploaded: function () {}, onBeforeUpload: function () {}, onAfterUpload: function () {}, onProgress: function () {}, onWrongExtension: function () {} }, e)) } }) }
comments powered by HyperComments