laydate.js에서 경로를 로드하는 중 오류가 발생했습니다.

날짜 및 시간 선택 플러그인인laydate.js는 다들 익숙하실 거라 생각합니다. 이번 글에서는laydate.css 로딩 중 발생하는 경로 오류 문제를 해결하는 방법에 대한 내용을 주로 소개합니다. 샘플 코드를 통해 매우 자세하게 설명되어 있습니다. 모든 사람의 학습이나 업무에 대한 특정 참고 자료와 학습 가치가 필요한 친구는 아래에서 살펴볼 수 있습니다.

Foreword

laydate.js는 Javascript 시리즈에 속하는 날짜 제어 및 시간 플러그인입니다.laydate.js는 IE6을 포함한 주류 ​​브라우저와 호환됩니다. Xianxin이laydate.js를 대대적으로 재작성한 후 점점 더 강력해지고 사용이 유연해졌으나, Angle+ocLazyLoad를 기반으로 한 프로젝트에서 문제가 발생했습니다.

문제를 발견했습니다

laydate.js가 ocLazyLoad 비동기 로딩을 통해 도입되었습니다. 결과적으로, 경로 오류를 살펴보니, 해당 코드를 열어보니 해당 파일이laydate.css 파일을 로드할 수 없었습니다.

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는 항상 파일입니다). 그 자체). e.length-1永远都是其文件本身)。

但是这种方法有缺陷，直接在html页面中用script标签引入没得问题，如果通过document.write("91f2bd488afe105e35022aa7562b416b2741de978ca9534a64c89c2f5d96aaf2< /script") 또는 document.createElement("script")동적 로딩 또는 비동기 로딩으로 얻은 경로는 현재 js 파일의 경로가 아닌 마지막 js 파일의 경로입니다. .

그러다가 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;
}()

이 방법의 아이디어는 매우 명확합니다. 파일 이름을 기반으로 참조 파일의 src 속성을 가져오고 판단하고 차단하세요. 그러나 이 방법에는 다음과 같은 두 가지 단점이 있습니다.

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

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

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Vuejs의 nextTick()을 통해 비동기 업데이트 대기열 구현

Angular CLI 설치 튜토리얼

ReactNative를 사용하여 Toast를 구현하는 방법

🎜CommonsChunkPlugin을 사용하여 공용 모듈을 추출하는 방법 🎜🎜

위 내용은 laydate.js에서 경로를 로드하는 중 오류가 발생했습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!