İç içe birleştirilmiş javascript dosyasını nasıl ayrıştırabiliriz?
Selam Tayfun abi.
Lise deneme sınavıma 2 gün kaldı ama kafamda hep bir soru :)
Belki merak eden başka arkadaşlar da olabilir.
Buraya yazmak istedim?
Büyük bir satış sitesinin tek parça app.js dosyasını incelerken gördüm.
Sitedeki tüm işlemler tek bir javascript dosyasında yazılmıştı.
Kod uzun olduğu için soruyu üstte yazayım...
Tayfun abi bu şekildeki kodları nasıl ayrıştırırız?
PHP AJAX ile ilgili dünki videoyu izleyince ben de sormak için cesaretlendim ^_^.
O video gibi örnek videosu hazırlayabilirmisin acaba?
Ya da bunları ayrıştıran siteler var mı?
Kocaman öpüyorum. <3
!function() {
function e(t, n, i) {
function r(a, s) {
if (!n[a]) {
if (!t[a]) {
var l = "function" == typeof require && require;
if (!s && l)
return l(a, !0);
if (o)
return o(a, !0);
var c = new Error("Cannot find module '" + a + "'");
throw c.code = "MODULE_NOT_FOUND",
c
}
var d = n[a] = {
exports: {}
};
t[a][0].call(d.exports, function(e) {
return r(t[a][1][e] || e)
}, d, d.exports, e, t, n, i)
}
return n[a].exports
}
for (var o = "function" == typeof require && require, a = 0; a < i.length; a++)
r(i[a]);
return r
}
return e
}()({
1: [function(e, t, n) {
t.exports = {
CART: 1,
AUTHENTICATION: 2,
SHIPPING_MODES: 3,
SELECT_SHIPPING_ADDRESS_OR_STORE: 4,
SELECT_BILLING_ADDRESS: 5,
SELECT_SHIPPING_METHOD: 6,
SHIPPING_SUMMARY: 7,
BASKET_SUMMARY: 8,
SUBMIT_PAYMENT: 9,
ORDER_CONFIRMATION: 10
}
}
, {}],
2: [function(e, t, n) {
"use strict";
function i() {
$(".header-links > li.level-1").addClass("header-link").appendTo(".navigation ul.level-1"),
$(".header-right-container > li.account-nav").addClass("header-link").appendTo(".navigation ul.level-1"),
$(".navigation").appendTo("#wrapper"),
$("ul.level-4").each(function() {
var e = $(this);
e.insertBefore(e.siblings("ul.level-3"))
}),
u(),
o()
}
function r() {
$(".navigation li.account-nav").prependTo(".header-right-container > ul.header-links");
var e = $("ul.header-links")[0];
$(".navigation li.header-link").prependTo(e),
$(".navigation").appendTo(k),
$("ul.level-4").each(function() {
var e = $(this);
e.insertAfter(e.siblings("ul.level-3"))
}),
$(".browse-by-store-content .content").removeAttr("style"),
$(".browse-by-store-content .selected").removeClass("selected"),
$("header.header, #wrapper").removeAttr("style"),
$("html").removeClass("menu-active"),
p(),
a()
}
function o() {
var e = $("#wrapper")
, t = $(".js-header-burgerMenu")
, n = t.data("current-category")
, i = $("header.header, #wrapper, .refinements, .sticky-addtocart, .size-popin, .store-popin");
if (e.on("click tap", ".js-header-burgerMenu, #js-overlay", function() {
var t = $("html");
if (t.hasClass("menu-active")) {
var n = parseInt(t.css("top"));
t.removeClass("menu-active").css({
top: 0,
"overflow-x": "hidden"
}),
$("html,body").scrollTop(-n),
i.css({
left: 0,
right: 0
})
} else {
var r = document.getElementById("js-overlay")
, n = $(window).scrollTop();
r.addEventListener("touchmove", function(e) {
e.preventDefault()
}, !1),
t.addClass("menu-active").css("top", -n),
e.outerWidth() > 378 && i.css({
left: -318,
right: 318
})
}
$(".level-current").length > 0 ? $(".level-current .back").focus() : $(".navigation a").first().focus(),
l()
}),
$(".navigation").off("click tap", "li.level-1 > a.navigation-hasSubMenu, li.level-1 > a.back"),
$(".navigation").on("click tap", "ul.level-1 a.navigation-hasSubMenu, ul.level-1 a.back", _),
null !== n) {
var r = $('li[data-menuid="' + n + '"]');
r.length ? (r.hasClass("level-2") ? r.parents(".level-1").first().children(".navigation-hasSubMenu").trigger("click") : r.hasClass("level-3") && (r.parents(".level-1").first().children(".navigation-hasSubMenu").trigger("click"),
r.parents(".level-2").first().children(".navigation-hasSubMenu").trigger("click")),
r.children(".navigation-hasSubMenu").trigger("click")) : "collections" === n && $("li.level-1.collections").children(".navigation-hasSubMenu").trigger("click")
}
$(".navigation li.level-1").removeClass("hover")
}
function a() {
var e = $("html");
if ($("#wrapper").off("click tap", ".js-header-burgerMenu, #js-overlay"),
$(".navigation").off("click tap", "ul.level-1 a.navigation-hasSubMenu, ul.level-1 a.back", _),
$(".navigation .cat-active").removeClass("cat-active"),
$(".navigation .level-current").removeAttr("style").removeClass("level-current"),
$("ul.level-1, div.level-2").removeAttr("style"),
e.hasClass("touch-device"))
$(document).on("click tap", ".navigation li.level-1 > a.navigation-hasSubMenu, .navigation li.level-1 > a.back", function(e) {
var t = $(this)
, n = t.parents("li").eq(0);
if (0 != $("ul:first", n).length) {
if (e.preventDefault(),
n.hasClass("hover"))
$("body").off("click", t.data("revert"));
else {
$(".navigation li.level-1").removeClass("hover");
var i = c(".navigation", ".navigation li.level-1", "hover");
t.data("revert", i)
}
$(this).parent().toggleClass("hover")
}
}),
$(document).on("click tap", ".header-links .account-nav > a", function(e) {
e.preventDefault();
var t = $(this).parent();
if (t.hasClass("hover"))
$("body").off("click", t.data("revert")),
t.removeClass("hover");
else {
var n = c(".account-nav", ".account-nav", "hover");
t.addClass("hover"),
t.data("revert", n)
}
});
else {
$(document).on("mouseenter focusin", ".navigation li.level-1", function() {
$(".navigation li.level-1").removeClass("hover"),
$(this).addClass("hover"),
$(this).find(".level-1.navigation-hasSubMenu").length && window.innerWidth > window.breakpoint.mobile && e.addClass("menu-hover")
}).on("mouseleave focusout", "li.level-1", function(t) {
"focusout" === t.type && !$(t.relatedTarget).is("a.search-link") && $(this).find(".level-2").length || ($(this).removeClass("hover"),
e.removeClass("menu-hover"))
}),
$(document).on("mouseenter focusin", ".account-nav > div.level-2", function(t) {
("focusin" !== t.type || $(t.relatedTarget).is("a.logo-link")) && ($(".account-nav > a").addClass("hover"),
window.innerWidth > window.breakpoint.mobile && e.addClass("menu-hover"))
}).on("mouseleave focusout", ".account-nav > div.level-2", function(t) {
("focusout" !== t.type || $(t.relatedTarget).is("a.logo-link")) && ($(".account-nav > a").removeClass("hover"),
e.removeClass("menu-hover"))
}),
$(document).on("mouseenter focusin", ".account-nav > a", function() {
$(this).addClass("hover"),
window.innerWidth > window.breakpoint.mobile && e.addClass("menu-hover")
}).on("mouseleave focusout", ".account-nav > a", function(t) {
("focusout" !== t.type || $(t.relatedTarget).is("a.logo-link")) && ($(this).removeClass("hover"),
e.removeClass("menu-hover"))
}),
$(document).on("mouseenter focusin", ".account-nav", function() {
$(this).addClass("hover"),
window.innerWidth > window.breakpoint.mobile && e.addClass("menu-hover")
}).on("mouseleave focusout", ".account-nav", function(t) {
$(this).removeClass("hover"),
e.removeClass("menu-hover")
}),
$(document).on("mouseenter focusin", ".miniwishlist", function() {
$(this).addClass("hover"),
window.innerWidth > window.breakpoint.mobile && e.addClass("menu-hover")
}).on("mouseleave focusout", ".miniwishlist", function(t) {
$(this).removeClass("hover"),
e.removeClass("menu-hover")
}),
$(document).on("mouseenter", ".minicart.empty-cart", function(t) {
$(this).addClass("hover"),
e.hasClass("transparent-header") && !e.hasClass("sticky-header-shown") && window.innerWidth > window.breakpoint.mobile && e.addClass("menu-hover")
}).on("mouseleave", ".minicart.empty-cart", function(t) {
$(this).removeClass("hover focused item-added"),
e.removeClass("menu-hover addtocart")
}),
$(document).on("focusin", ".account-nav .form-input", function() {
$(".account-nav").addClass("focused"),
e.addClass("menu-focus")
}).on("focusout", ".account-nav .form-input", function() {
$(".account-nav").removeClass("focused"),
e.removeClass("menu-focus")
}),
$(document).on("focusout", ".create-account", function(t) {
$(".account-nav > a").removeClass("hover"),
e.removeClass("menu-hover")
}),
$(document).on("focusin", ".minicart.empty-cart", function() {
$(".minicart.empty-cart").addClass("hover focused"),
e.hasClass("transparent-header") && !e.hasClass("sticky-header-shown") && window.innerWidth > window.breakpoint.mobile && e.addClass("menu-hover")
}).on("focusout", ".minicart.empty-cart", function(t) {
($(t.relatedTarget).is(".search-link") || $(t.relatedTarget).is(".header-link .level-1")) && ($(".minicart.empty-cart").removeClass("hover focused"),
e.removeClass("menu-hover addtocart"))
});
var t = $(".level-2.authenticated > ul li").last();
$(t).on("focusout", function() {
$(".header-links .account-nav > a").removeClass("hover"),
e.removeClass("menu-hover")
}),
s()
}
}
function s(e, t) {
function n(e) {
var t = $("html");
27 == e.keyCode && $.each(i, function() {
$(this).removeClass("hover") && ($(this).removeClass("hover focused"),
t.removeClass("menu-hover"))
})
}
var i = [$(".navigation li.level-1"), $(".header-links .account-nav"), $(".header-links .account-nav .level-1"), $(".header-links .authenticated.navigation-hasSubMenu"), $(".minicart"), $(".miniwishlist")];
document.addEventListener("keydown", n, !1)
}
function l() {
function e(e) {
var t = $("html");
27 == e.keyCode && t.hasClass("menu-active") && (t.removeClass("menu-active"),
$("header.header, #wrapper").removeAttr("style"),
$("button.header-burgerMenu").focus())
}
document.addEventListener("keydown", e, !1)
}
function c(e, t, n) {
var i = function i(r) {
var o = $(r.target);
$(e).has(o).length || $(e).is(o) || (r.preventDefault(),
$(t).removeClass(n),
$("body").off("click", i))
};
return $("body").on("click", i),
i
}
function d() {
$("ul.level-1, div.level-2").css({
height: "auto",
overflow: "visible"
});
var e = $("ul.level-1").outerHeight()
, t = $(".cat-active div.level-2").outerHeight()
, n = $(".level-2.cat-active div.level-3").outerHeight()
, i = 0;
0 != (i = null != t && t < e && $(".level-current").hasClass("level-2") ? t : null != n && (n < e || n < t) && $(".level-current").hasClass("level-3") ? n : $(".cat-active:last > div").outerHeight()) && $("ul.level-1, .cat-active div.level-2").css({
height: i + "px",
overflow: "hidden"
})
}
function u() {
$("#dispatcher-language").hasClass("ui-dialog-content") && $("#dispatcher-language").dialog && $("#dispatcher-language").dialog("close");
var e = $(".language-selector-content")
, t = $(".language-selector-link");
t.addClass("navigation-hasSubMenu level-1").wrap('<li class="level-1 language-container language-selector"></li>'),
$(".language-selector").insertAfter(".country-selector"),
e.addClass("level-2").insertAfter(t),
$("ul, .back", e).addClass("level-2").wrapAll('<div class="container"></div>'),
$("#dispatcher-language .page-header .text").insertBefore(".languages", e)
}
function p() {
var e = $(".language-selector-content")
, t = $(".container", e)
, n = $(".language-selector-link");
n.removeClass("navigation-hasSubMenu level-1"),
n.appendTo("li.language-container.desktop"),
$("li.language-container.desktop").insertAfter(".country-selector"),
e.removeClass("level-2").appendTo("#dispatcher-language"),
t.replaceWith(t.contents()),
$(".text", e).appendTo("#dispatcher-language .page-header"),
$(".language-selector").remove()
}
function f() {
$("#dispatcher-country").hasClass("ui-dialog-content") && $("#dispatcher-country").dialog && $("#dispatcher-country").dialog("close");
$(".country-selector-continent");
$(".country-selector-list").show(),
$(".country-selector-content").clone().addClass("js-countries level-2").appendTo(".country-selector"),
$("#dispatcher-country .text").clone().addClass("js-countries").insertBefore(".js-countries .countries-list")
}
function h() {
var e = $(".country-selector-continent")
, t = $(".country-selector-list");
$(".js-countries").remove(),
e.removeClass("expanded"),
t.hide(),
$(".country-selector-continent").off().on("click tap", function(e) {
e.preventDefault();
var t = $(this)
, n = t.parent()
, i = $(".country-selector-list", n);
t.toggleClass("expanded"),
i.slideToggle(),
$(".country-selector-list", n.siblings()).slideUp(),
$(".country-selector-continent", n.siblings()).removeClass("expanded"),
window.setTimeout(function() {
$(window).resize()
}, 400)
})
}
function m() {
var e = $(".country-selector-continent")
, t = $(".country-selector-list");
$(".js-countries").remove(),
e.addClass("expanded"),
t.show(),
$(".country-selector-continent").off().on("click tap", function(e) {
e.preventDefault();
var t = $(this)
, n = t.parent()
, i = $(".country-selector-list", n);
t.toggleClass("expanded"),
i.slideToggle(),
window.setTimeout(function() {
$(window).resize()
}, 400)
})
}
function v() {
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var e = document.createElement("div");
e.style.border = ".5px solid transparent",
document.body.appendChild(e),
1 == e.offsetHeight && document.querySelector("html").classList.add("hairlines"),
document.body.removeChild(e)
}
}
function g(e, t) {
var n = void 0;
if (e && e.length) {
var i;
e.each(function(r) {
(i = $(e[r])) && i.data("menuid") == t && (n = i)
})
}
return n
}
function y() {
if (window.pageContext && window.pageContext.menuItemId) {
var e = "object" === b(window.pageContext.menuItemId) ? window.pageContext.menuItemId.level1 : window.pageContext.menuItemId
, t = $("header .navigation ul.level-1 > li.level-1")
, n = g(t, e);
n && (n.addClass("current"),
n.find("a").first().attr("aria-current", !0),
t = n.find(".level-2 > li.level-2"),
e = window.pageContext.menuItemId.level2,
(n = g(t, e)) && (n.addClass("current"),
n.find("a").first().attr("aria-current", !0),
t = n.find(".level-3 > li.level-3"),
e = window.pageContext.menuItemId.level3,
(n = g(t, e)) && (n.addClass("current"),
n.find("a").first().attr("aria-current", !0))))
}
}
function w() {
var e = $("html");
y(),
v(),
$(document).on("desktopsAction", function() {
r(),
m()
}),
$(document).on("tabletAction", function() {
r(),
h()
}),
$(document).on("mobileAction", function() {
i(),
f()
}),
C.isTouch() && (e.addClass("touch-device"),
$(window).on("pointerover", function() {
e.removeClass("touch-device")
}).on("touchstart", function() {
e.addClass("touch-device")
}))
}
var b = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
return typeof e
}
: function(e) {
return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e
}
, C = e("./util")
, k = $("header.header")
, _ = function(e) {
var t = $(this)
, n = t.parents("li").eq(0)
, i = $("ul:first", n);
if (t.hasClass("back")) {
e.preventDefault(),
t.hasClass("level-3") ? $("ul.level-1").css("left", "-100%") : $("ul.level-1").css("left", "0");
var r = $(".level-current");
window.setTimeout(function() {
r.removeAttr("style")
}, 400),
r.removeClass("level-current"),
n.removeClass("cat-active").parents(".cat-active").children("div.level-2, div.level-3").eq(0).addClass("level-current"),
d(),
$(".navigation").animate({
scrollTop: 0
}, 400, "linear")
} else if (0 != i.length && !t.hasClass("view-all")) {
if (e.preventDefault(),
n.hasClass("cat-active"))
n.removeClass("cat-active"),
$(".level-current").removeClass("level-current");
else {
if (t.hasClass("level-1")) {
var o = $(".cat-active");
$("ul.level-1").css("left", "-100%")
} else {
var o = $(".level-2.cat-active");
$("ul.level-1").css("left", "-200%")
}
$(".level-current").removeClass("level-current"),
o.removeClass("cat-active"),
n.addClass("cat-active").children("div.level-2, div.level-3").eq(0).addClass("level-current").show()
}
d(),
$(".navigation").animate({
scrollTop: 0
}, 400, "linear")
}
};
n.init = w
}
, {
"./util": 84
}],
}, {}, [7]);
Teşekkürler <3
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
Kartal abi şöyle anlatmaya çalışayım;
css seçiciler (class'lar vs.) örnekteki gibi belli.
Benim merak ettiğim; oradaki
1:
2:
şeklinde iç içe yazılan fonksiyonları her biri nasıl dışa alınır - ayrıştırılır?
Mesela en baştaki fonksiyonda tanımlar yapılmış...
Her fonksiyonun başlangıcında (e,t,n) var.
Tayfun abim daha basit (küçük) bir örnekte anlatabilir mi diye sormak istedim. :)
Cevabınız için teşekkürler.
Mesela bütün sayfalarda kullanılan kod var mı. Header menu gibi. Onlara elleme. Mesela sadece belli sayfada çalışan kod mu var onu al ve sadece o sayfada çağır. Bunları yaparken script src lerini body nin en altına al tamamladığına ve sorun yaşamadığında bu sefer scr leri head taglarına al ve defer async leri araştır.