javascript 모듈 패턴은 jsbin에서 작동하지만 내 서버/브라우저에서는 작동하지 않습니다.

저는 백엔드 개발자입니다. 필요한 경우에만 자바 스크립트를 작성하고 최선의 방법은 아닙니다. 그러나 저는 제 자신을 구제하고 필자가 할 수있는만큼 베스트 프랙티스를 조직하고 잘 쓰고 싶었습니다.javascript 모듈 패턴은 jsbin에서 작동하지만 내 서버/브라우저에서는 작동하지 않습니다.

일부 기능을 캡슐화하고 마크 업에서 UI 이벤트를 바인딩하기 위해 모듈 패턴을 시작했습니다. 이는 꽤 많은 시도와 오류가 있었기 때문에 프론트 엔드 개발자 인 친구의 제안에 따라 jsbin을 사용했습니다.

내 개념이 jsbin에서 작동하지만 서버에서 js 파일로 옮겼습니다. 모듈 패턴 내부에 캐시 된 jQuery 객체의 범위가 느슨하게 보입니다.

http://jsbin.com/ciwomeve/7/edit

기능성 내가 두 개의 선택 요소 (이 작품) 나는 그 선택에 대한 변경 이벤트에 바인딩 및 트리거 될 때 나는 결국을해야 할 몇 가지 함수를 호출한다의 옵션을 채우는 아주 기본적인 것입니다 내 백엔드에 아약스 요청을하고 데이터를 얻을.

코드에 대한 조언을 해주시고 제가 잘못하고있는 것을 알려주십시오.

출처

2014-07-25 orlybg

서버가 보내는 페이지에 jQuery가 링크되어 있습니까? 귀하의 사이트에 대한 링크를 제공 할 수 있습니까? – ebenpack

VPN 뒤에 있으므로 슬프게도 아니오,하지만 jq populateHostLists fn에서 사용합니다. jQuery와 그 중 하나가 작동합니다. – orlybg

몇 가지 생각 : 브라우저에서 HTML 페이지 (예 : 파일이 제공되지 않고 URL이 'file : //')를 볼 경우 jQuery에 대한 프로토콜 기준 경로는 작업. 네가 네가 그들을 섬겼다 고 말한 걸 나는 안다.하지만 나는 단지 그것을 언급 할 것이라고 생각했다. 또는 스크립트 태그의 순서를 잘못 지정했을 수 있습니다. – ebenpack

여기에 대해서는별로 중요하지 않지만 귀하의 문제는 귀하의 스크립트 태그가 <head>이며 콘텐츠가로드되기 전에 실행되고 있다는 것이 확실합니다. 이 경우 아직 존재하지 않는 DOM의 요소에 액세스하려고 시도 할 것입니다 (예 :이 행이 실행될 때 $hostSelect1: $('#host-select-1') id가 host-select-1 인 select 요소는 아직 존재하지 않지만 jQuery는이를 찾습니다. 자동으로 실패).

</body> 직전에 스크립트를 페이지 맨 아래로 이동할 수 있습니다.이 경우 스크립트가 실행될 때 모든 콘텐츠가로드 될 것입니다. 이 방법에는 성능상의 이점도 있습니다. 또는 $().ready(function(){DbDiff.init()});과 같이 DbDiff.init()으로 전화를 걸어 $().ready(function(){DbDiff.init()});과 같은 효과를 낼 수 있습니다 (단, settings은 이미 평가되었습니다 ... $('#host-select-1') 등을 확인하기 위해 약간의 구조 조정이 필요함). DOM 콘텐츠가로드 된 후에 만 평가되고 $hostSelect1에 할당됩니다.

출처

2014-07-25 22:51:17 ebenpack

javascript 모듈 패턴은 jsbin에서 작동하지만 내 서버/브라우저에서는 작동하지 않습니다.

답변

관련 문제