laydate.js 로딩 중laydate.css 경로 오류에 대한 자세한 설명

laydate.js는 Javascript 시리즈에 속하는 날짜 제어 및 시간 플러그인으로 IE6을 포함한 주류 ​​브라우저와 호환됩니다. Xianxin이laydate.js를 대대적으로 재작성한 후 점점 더 강력해지고 사용이 유연해졌으나, Angle+ocLazyLoad 기반 프로젝트에서 문제가 발생했습니다. 날짜 및 시간 선택 플러그인인laydate.js는 다들 익숙하실 거라 생각합니다. 이번 글에서는laydate.js 로딩 중laydate.css의 경로 오류 문제를 해결하는 방법에 대한 관련 정보를 주로 소개합니다. 예제 코드를 통해 자세히 설명되어 있어 누구에게나 매우 유용합니다. 공부하거나 일할 때 참고할 만한 가치가 있고 필요한 친구는 아래에서 살펴보세요.

문제 발견

laydate.js가 ocLazyLoad 비동기 로딩을 통해 도입되었기 때문에, 경로 오류를 살펴보니, 코드를 열어보니 다음과 같이 작성되어 있었습니다.

getPath:function(){
 var e=document.scripts,
 t=e[e.length-1],
 n=t.src;
 if(!t.getAttribute("merge"))
 return n.substring(0,n.lastIndexOf("/")+1)
}()

먼저laydate.js에 대한 경로를 얻은 다음,laydate.css 섹션을 추가하여 최종적으로 완전한 경로로 연결해야 합니다.

laydate.js의 경로를 얻기 위해 작성자가 사용한 아이디어는 다음과 같습니다. 경로를 결정하는 js 코드는 일반적으로 함수가 아닌 js 파일에 직접 배치되므로 해당 명령문은 다음과 같은 경우 즉시 실행됩니다. js 파일이 로드되고 실행됩니다. 이 명령문에서 얻은 js 파일 수는 정확히 e.length-1입니다. 페이지 뒤쪽의 js 파일은 아직 로드되지 않았기 때문에 그곳에서 얻은 js 파일 수는 다음과 같습니다. 페이지의 모든 js 파일 수가 아닙니다. 이렇게 하면 경로를 얻기 위해 경로를 탐색할 필요가 없고, 파일 판단에 파일 이름이 필요하지 않으므로 판단이 더 정확해집니다(e.length-1은 항상 파일 자체입니다).

하지만 이 방법에는 결함이 있습니다. html 페이지에서 script 태그로 직접 도입해도 문제 없습니다. document.write("

그러다가 한 단계로 완료할 수 있지만 특정 호환성 문제가 있는 document.currentScript가 생각났습니다.

var curSrc = document.currentScript.src;
return curSrc.substring(0,curSrc.lastIndexOf("/")+1);

결국 다음과 같은 간단하고 조잡한 방법을 사용했습니다.

getPath:function(){
 var e=document.scripts, n;
 for(var i=e.length;i>0;i--){
 if(e[i-1].src.indexOf("laydate.js")>-1){
 n=e[i-1].src.substring(0,e[i-1].src.lastIndexOf("/")+1);
 }
 }
 return n;
}()


이 방법의 아이디어는 매우 명확합니다. 파일명을 보고 판단하고 가로채면 됩니다. 그러나 이 방법에는 다음과 같은 두 가지 단점이 있습니다. 

1. 페이지의 모든 js 파일을 탐색해야 하므로 때로는 비효율적일 수 있습니다. (제 페이지에는 js 파일이 많지 않네요 ㅎㅎ) 

2. 페이지 내 다른 디렉터리에 같은 이름의 js 파일이 있으면 판단이 틀릴 수도 있습니다. 
관련 추천: 

js 시간 플러그인_html/css_WEB-ITnose
JS 대체 및 시간 플러그인_자바스크립트 기술의 결합
jQuery_jquery로 구현된 입력 상자 선택 시간 플러그인 사용 예  
위 내용은 laydate.js 로딩 중laydate.css 경로 오류에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!