다른 자바 스크립트에 포함 된 자바 스크립트

Question

JQuery.UI datepicker를 사용하고 있지만 실제로 플러그인을 사용하기 전에 플러그인 위젯을 업데이트해야하는 몇 가지 변경 사항이 있습니다. 테스트를 위해 JQuery와 datepicker 라이브러리를 일반 태그와 함께로드 한 다음 자체 태그에 수정 코드를 입력하고 마침내 datepicker 태그와 초기화 태그를 다른 태그에 넣습니다. 수정 된 datepicker를 사용하는 페이지가 하나 뿐인 경우 모두 작동합니다.

이제 수정 된 데이터를 여러 페이지에서 사용하기를 원하며 사용하는 각 장소에서 datepicker의 모든 수정 사항을 유지 관리하고 싶지 않습니다. 내가 뭘하고 싶은데요 수정 코드와 datepicker를 사용하는 데 필요한 포함을 포함하는 datepicker에 대한 래퍼 파일을 만들고, datepicker를 사용하는 페이지에서, 난 그냥 래퍼 스크립트 파일을 포함하고 싶습니다.

이것은 모두 포함 된 다른 자바 스크립트 파일의 자바 스크립트 파일을 포함합니다.

다른 질문이 중복되어 있다는 것을 알고 있지만 document.write 및 JQuery addScript 기술과 같은 다른 질문에 제안 된 수정 사항을 적용했을 때 작동하지 않는 것으로 보입니다. 나를 위해 Chrome에서. 첫 번째 문제는 addScript 함수가 JQuery 라이브러리에 문제가 있음을 알려주고, JQuery 라이브러리에는 메인 파일의 태그가 정상적으로로드된다는 점입니다. addScript를 주석 처리하면 오류가 발생하지 않습니다. document.write 메서드가 실행되는 것처럼 보이지만 datepicker가 작동하지 않습니다.

다른 스크립트로드 내에서 스크립트로드가 가장 좋은 방법을 알고 싶습니다. 따라서 래퍼를 만들 수 있으며 솔루션은 모든 주요 브라우저에서 작동해야합니다.

이 모든 것의 주름은 프로세스가 PHP + Ajax를 사용하여 생성 된 페이지에 적합해야한다는 것입니다.하지만 먼저 순수 HTML + Javascript + JQuery + JQuery.UI Datepicker 솔루션을 사용하려고합니다.

이 질문에 대한 답변이 이미 있고 여기에서 설명한 제약 조건과 함께 작동하는 경우 해당 솔루션을 가리 키십시오. '중복 질문'이라고 말하지 말고 그대로 두십시오. 이 포럼과 다른 사람들의 솔루션을 검토 한 결과 제대로 작동하지 않거나 올바른 오류가 발생하지 않는 간단하고 복잡한 솔루션을 많이 보았습니다.

태그가 중첩 된 포함을 지원했다면이 모든 것이 훨씬 쉬울 것이고,이 개념을 사용하면 기본 라이브러리 객체에 대한 우선 적용을 분리하는 래퍼를 지원할 수 있습니다. 따라서 CSS와 CSS를 지원하는 견고하고 크로스 브라우저 방식의 기술은 과다 기한입니다. 그것이 밖에 있다면 나는 그것을 놓쳤다. 그러나 내가 보았던 것에서 그것은 '준비가되어있는 프라임 타임'방식으로는 존재하지 않는다.

감사합니다, 하워드 브라운

Answer 1

내가보기 엔 내 제안처럼 UR거야 의심하지만 IMA는 그것을 갈 줄 어쨌든

includes.php가 THT 파일에있는 모든 물건을 넣어라는 파일을 생성

사용

<? include("includes.php"); ?>

당신이 하나 개의 파일에 모든 스크립트를 넣을 수 있습니다 및 u는 코드의 간단한 라인을 원하는 그들에게 많은 페이지에 포함되어있는이 방법이 필요

Answer 2

당신은 자식 시스템과 로컬 저장소를 사용할 수 있습니다 변경 사항을 적용하여 필요한 경우 병합을 수행 할 수 있습니다. 그게 내가 제안 할 수있을거야. 원래 분기를 포크 한 다음 변경 내용을 추가하십시오. 패치 파일이라고도합니다.

Answer 3

시도해 보셨습니까?

var Loader = function() { } 
Loader.prototype = { 
    require: function (scripts, callback) { 
     this.loadCount  = 0; 
     this.totalRequired = scripts.length; 
     this.callback  = callback; 

     for (var i = 0; i < scripts.length; i++) { 
      this.writeScript(scripts[i]); 
     } 
    }, 
    loaded: function (evt) { 
     this.loadCount++; 

     if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call(); 
    }, 
    writeScript: function (src) { 
     var self = this; 
     var s = document.createElement('script'); 
     s.type = "text/javascript"; 
     s.async = true; 
     s.src = src; 
     s.addEventListener('load', function (e) { self.loaded(e); }, false); 
     var head = document.getElementsByTagName('head')[0]; 
     head.appendChild(s); 
    } 
} 

사용

var l = new Loader(); 
l.require([ 
    "example-script-1.js", 
    "example-script-2.js"], 
    function() { 
     // Callback 
     console.log('All Scripts Loaded'); 
    }); 

당신이 (그것의 각각의 콜백의 각 하나)를 원하고 그들은 모두 여전히 작동하는 것처럼 잠재적으로 둥지가 많이 포함 할 수있다.

솔루션에 대한 CSS Tricks 크레딧