2016.04.07 09:00:15

동일한 js파일을 한 페이지에서 두번 요청하면 어떻게 처리되나요?

Lv30

웹지기

이 질문은 @proto님 께서 작성해주신 댓글새로고침 팁을 모바일에 적용하면서 생긴 의문입니다.

우선 질문은 아래와 같습니다.

제가 필요에 의해 a.js 파일을 원래 위치에 있던 _header.html 파일 외에 comment.html 파일에서도 불러오게 추가 했습니다.

이럴경우 comment.html이 불려지는 문서읽기 페이지에서는 a.js 가 두번 요청이 되는데요. 이럴경우 문제가 되지는 않나요?

현재 짧은 시간 확인한 바로는 별 문제는 없어보이기는 합니다.

이렇게 한 이유는 댓글만 새로고침하다보니 댓글영역에서 요구되는 a.js 에 포함된 일부 동작이 되지 않아서 comment.html 파일에서 한번더 a.js 파일을 불러오게 했습니다. 가장 정확한 방법은 a.js 파일의 내용중 댓글에 영향을 주는 부분만 분리해 내는 거지만 제 능력밖이라... ㅡㅡ;

이렇게 했는데요....

순서적으로는 헤더에서 한번 불러온 후 코멘트에서 한번더 불러오게 될 듯 한데 그냥 두번 불러오는것 말고 차이는 없나요?

위로 아래로

Lv24

람보

2016.04.07 09:53:11
#comment_250611

두번 불러오는 정도로 끝나는게 아니라 문제가 생길지도..
원인을 파악하시고, 파일의 실행 순서를 맞춰가면서라도 수정하시길 권장합니다.

Lv24

Lv30

웹지기
질문기여자

2016.04.07 09:59:08
#comment_250629

원인은 댓글만 새로고침하면 _header.html 에서 불러왔던 js 파일의 동작이 되지 않습니다. 그래서 다시 불러오게 하려고 코멘트에서 한번 더 불러오게 한 것이지요. 해당 js 파일에 댓글쪽에 댓글 입력창 열기닫기 토글동작과 대댓글,댓글삭제,댓글추천등을 하기위한 메뉴 팝업을 열어주는 동작이 있습니다.

// <![CDATA[
jQuery(function($){
$(document).ready(function (){

var nCheck = $("div.webzine-style").find("span.author");
if(nCheck.find("img").length){
nCheck.removeClass("author").css("margin-right", "10px");
}

var list_header = $("header.list-header");

list_header.find("button.btSearch").click(function(){
$(this).toggleClass("btAdmin");
$(this).toggleClass("btBasic");
list_header.find("div.search-area").toggle();
});

list_header.find("button.btNotice").click(function(){
$(this).toggleClass("btAdmin");
$(this).toggleClass("btBasic");
$(".notice-list").toggle();
});

var flatBoard = $("section.flatBoard");

var gallery_list = flatBoard.find("div.m-gallery>ul.list>li");
gallery_list.find("img[title='file']").hide();
var webzine_list = flatBoard.find("div.m-webzine>ul.list>li");
webzine_list.find("img[title='file']").hide();

var talkbox = flatBoard.find("div.m-talkbox>ul.list>li");
talkbox.find("img[title='file']").hide();
var talkbox_body = talkbox.find("div.bubble");
talkbox_body.width(talkbox.width()-75);

var read_control = $(".read-control");

read_control.find("button.btShare").click(function(){
read_control.find("div.share").toggle();
});

read_control.find("button.btFile").click(function(){
$("section.flatBoard div.read-file").toggle();
});

var declare = flatBoard.find("div.declare");

read_control.find("button.btDeclare").click(function(){
declare.toggle();
})
declare.find("button.btLight").click(function(){
declare.hide();
})

var extra_var = $("table.xv");

if(extra_var.find("th").length == 0){
extra_var.css("margin-bottom","0");
}

var comment_write = $("div.comment-write");
comment_write.find("button.btOpenWrite").click(function(){
$(this).hide();
$(this).next().hide();
comment_write.find("form.cWrite-body").show().find("textarea").focus();
});
comment_write.find("a.btCancel").click(function(){
comment_write.find("form.cWrite-body").hide();
comment_write.find("button.btOpenWrite").show();
comment_write.find("a.btDark").show();
});

$("div.write-form>form>ul>li.exvar input.tel:not(:last-child)").after("<span class='dash'>-</span>");
function viewport(){
var e = window
, a = 'inner';
if ( !( 'innerWidth' in window ) ){
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}

var comment_el = $("div.comment-el");
var comment_control = $("table.comment-control");
var wf_list = $("div.write-form>form>ul>li");
var blogbox_body = $("section.flatBoard div.m-blogbox>ul.list>li>div.bubble");

comment_el.find("span.blind-text").click(function(){
$(this).next("div.blind-comment").toggle();
});

if (viewport().width < 768) {
comment_el.click(function(){
$("#comment-control-dummy").show();
$(this).next("table.comment-control").show();
$('body').bind('touchmove', function(e){e.preventDefault()});
});
$(".comment-body a, .secret-comment, .blind-text").click(function(e){
e.stopPropagation();
});

comment_control.find("a.bt-cc-cancel").click(function(){
$(this).closest("table.comment-control").hide();
$("#comment-control-dummy").hide();
$('body').unbind('touchmove');
});

wf_list.each(function(){
var this_width = $(this).width();
var label_width = $(this).find("label").width();
$(this).find("input[class!=tel][type!=checkbox][type!=radio]").width(this_width-label_width-48);
$(this).find("textarea").width(this_width-label_width-45);
$(this).find("select").width(this_width-label_width-50);
})
}
if (viewport().width > 767){
comment_control.find("button.btMore").click(function(){
$(this).parent().prevAll("li.phone").css("display", "inline-block");
$(this).next("button.btClose").css("display", "inline-block");
$(this).hide();
});
comment_control.find("button.btClose").click(function(){
$(this).parent().prevAll("li.phone").hide();
$(this).prev("button.btMore").css("display", "inline-block");
$(this).hide();
});
blogbox_body.find("div.left-side").width(blogbox_body.width()-340);
talkbox_body.find("div.left-side").width(talkbox_body.width()-345);
}

if (viewport().width > 567){
webzine_list.find("div.webzine-container").width(webzine_list.width()-145);
}
$(window).resize(function(){
if (viewport().width > 567){
var thumb_image = webzine_list.find("div.thumb-image");
thumb_image.width(130).css("margin-left", "12px");
webzine_list.find("div.webzine-container").width(webzine_list.width()-145);
}
if (viewport().width < 568){
var thumb_image = webzine_list.find("div.thumb-image");
thumb_image.width("28%").css("margin-left", "4%");
webzine_list.find("div.webzine-container").width("68%");
}
talkbox_body.width(talkbox.width()-75);
});

});

function cancelZoom()
{
var d = document,
viewport,
content,
maxScale = ',maximum-scale=',
maxScaleRegex = /,*maximum\-scale\=\d*\.*\d*/;

// this should be a focusable DOM Element
if(!this.addEventListener || !d.querySelector) {
return;
}

viewport = d.querySelector('meta[name="viewport"]');
content = viewport.content;

function changeViewport(event)
{
// http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/
viewport.content = content + (event.type == 'blur' ? (content.match(maxScaleRegex, '') ? '' : maxScale + 10) : maxScale + 1);
}

// We could use DOMFocusIn here, but it's deprecated.
this.addEventListener('focus', changeViewport, true);
this.addEventListener('blur', changeViewport, false);
}

// jQuery-plugin
(function($)
{
$.fn.cancelZoom = function()
{
return this.each(cancelZoom);
};

// Usage:
$('input,select,textarea').cancelZoom();
})(jQuery);

});

// ]]>

Lv30

Lv24

람보

2016.04.07 10:29:12
#comment_250665

메소드 실행이나 뭔가 실행할때 실행 순서가 꼬일경우 작동이 안되는 경우가 있습니다.. 그래서, Header에서 호출햇을때가 아닌 comment에서 호출햇을때 작동되었던 이유가 그 이유인것으로 보여집니다.

이경우 그냥 comment에 적용한순서를 보고 index조절을 통해서 호출하는게 좋아요.

그러므로 압축해주는 애드온을 제거하고 순서를 보고 호출해보도록 하세요.

Lv24

Lv30

웹지기
질문기여자

2016.04.07 10:34:17
#comment_250668

코멘트에서 호출했을때 문제가 생긴다는 질문이 아니에요.

원래 header에서 호출되구요. 댓글작성시 전체가 새로고침 되기 때문에 문제가 없구요.

다만 댓글영역만 새로고침을 적용하면 header에서 불러왔던 js동작이 되지 않는다는 거에요. 그래서 제가 추가로 댓글영역 담당하는 파일에 해당 js 파일을 한번 더 불러오게 해주었다는거구요. 이렇게 되면 댓글만 새로고침시 js파일을 다시 불러와줘 문제가 되었던게 해소된다는 겁니다.

다만 제가 궁금한건 문서를 읽을때 해당 js 파일이 header 파일에서 한번 그리고 조금 후 에 comment 파일에서 한번 읽혀질텐데 이로인한 문제가 없을 까 해서요. 클라우드플레어에서 압축을 할 것으로 예상하고 있습니다.

Lv30

Lv24

람보

2016.04.07 10:51:01
#comment_250674

네 그래서, 순서를 수정해 하나의 js파일만 호출되도록 하는것이 좋다는 의미입니다.
두개의 호출에서 위에 메소드 실행으로 인한 오류로 다른 기능이 오작동할 수 있어서요.

뭐 별다른 버그나 문제점이 보이지 않았지만, 권장하는건 1개만 호출하는것이 좋기 때문에 순서를 바꿔서라도 하나의 js파일을 호출하는것이 좋다는거죠.
(Function 메소드 호출사용등등)

Lv24

Lv30

웹지기
질문기여자

2016.04.07 10:52:01
#comment_250679

2개가 아니고 파일명과 내용이 모두 일치하는 파일을 두번 요청하는거에요.

제가 해당 파일에서 댓글에만 영향을 주는것을 따로 분리해 코멘트담당하는 파일에서 불러오게 하기 어려워서 이렇게 처리한건데요.

그러니까 굳이 제가 같은 파일을 코멘트파일에서 또 불러오게 한 것은 "댓글만새로고침" 을 동작시켰을때 이 js 파일이 또 필요해서 이에요.

소스보기로 보았을때는 처음에 불러온게 있으면 나중에 요청을 다시해도 다시 불러와적용하는게 아닌듯 해서요.

Lv24

Lv30

웹지기
질문기여자

2016.04.07 11:29:14
#comment_250705

아.. 안되는군요. 제가 div id로 감싸는 것을 빼먹고 된다고 생각했네요. 댓글만 새로고침하니 저 파일을 다시 불러와도 안되네요. 끙...

Lv30

Lv24

람보

2016.04.07 12:20:47
#comment_250752

파일을 같은 js파일을 두번 호출 (즉 두개의 동일한 파일을 호출한다) 라고 제가 질문의 내용을 인지하고 있습니다만..

이렇게 이해하고 있는것이 맞다면, 제가 설명드릴려는 의미가 동일한겁니다..;ㅁ;

파파즈

2016.04.07 12:52:38
#comment_250793

보통 자바스크립트 이벤트는 처음 문서가 열렸을 때 실행되는데

ajax로 부분 새로고침되면 그 부분은 이벤트가 초기화되어서 발생하는 문제입니다..

몇가지 방법이 있는데.. 아래 방법이 제일 간단할 것 같네요

$('#comment').on('ajaxComplete', function() {

((다시 불러올 이벤트))

});

파파즈

2016.04.07 12:56:43
#comment_250805

점심 먹고 눈이 침침해서 틀렸을 수도 있는데..
대략 아래를 $(dcoument).ready(function() 바로 윗줄에 붙여넣기 해보세요

$('#comment').on('ajaxComplete', function() {
var flatBoard = $("section.flatBoard");
var talkbox = flatBoard.find("div.m-talkbox>ul.list>li");
talkbox.find("img[title='file']").hide();
var talkbox_body = talkbox.find("div.bubble");
talkbox_body.width(talkbox.width()-75);
var read_control = $(".read-control");
read_control.find("button.btShare").click(function(){
read_control.find("div.share").toggle();
});
read_control.find("button.btFile").click(function(){
$("section.flatBoard div.read-file").toggle();
});
var declare = flatBoard.find("div.declare");
read_control.find("button.btDeclare").click(function(){
declare.toggle();
})
declare.find("button.btLight").click(function(){
declare.hide();
})
var extra_var = $("table.xv");
if(extra_var.find("th").length == 0){
extra_var.css("margin-bottom","0");
}
var comment_write = $("div.comment-write");
comment_write.find("button.btOpenWrite").click(function(){
$(this).hide();
$(this).next().hide();
comment_write.find("form.cWrite-body").show().find("textarea").focus();
});
comment_write.find("a.btCancel").click(function(){
comment_write.find("form.cWrite-body").hide();
comment_write.find("button.btOpenWrite").show();
comment_write.find("a.btDark").show();
});
});