복붙노트

[JQUERY] ) (jQuery를 $ .getScript를 사용하는 방법을 여러 JS 파일을 포함하는 방법

JQUERY

) (jQuery를 $ .getScript를 사용하는 방법을 여러 JS 파일을 포함하는 방법

해결법

  1. 1.당신은 getScript (과 약속을 사용하여) 모든 스크립트가로드 될 때까지 같은 뭔가를 기다릴 수 :

    당신은 getScript (과 약속을 사용하여) 모든 스크립트가로드 될 때까지 같은 뭔가를 기다릴 수 :

    $.when(
    $.getScript( "/mypath/myscript1.js" ),
    $.getScript( "/mypath/myscript2.js" ),
    $.getScript( "/mypath/myscript3.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){
    
    //place your code here, the scripts are all loaded
    
});

    깡깡이

    ANOTHER 뿐인

    위의 코드에서, 지연된 첨가) ($ 내부를 해결 $ (FUNC)처럼 jQuery를 호출 내부의 다른 기능을 배치하는 것처럼, 그것과 동일한있어

    $(function() { func(); });

    DOM을 준비 할 수 있도록 즉, 그렇게 모든 스크립트에 대한 $ .when 대기로드 할 위의 예에서와 DOM 때문에 $ .Deferred 호출 DOM에서 결의 준비 콜백의 준비를 위해, 기다립니다.

    다음과 같이 생성 할 수있는 스크립트의 배열을 수용하는 유틸리티 기능 :

    $.getMultiScripts = function(arr, path) {
    var _arr = $.map(arr, function(scr) {
        return $.getScript( (path||"") + scr );
    });
        
    _arr.push($.Deferred(function( deferred ){
        $( deferred.resolve );
    }));
        
    return $.when.apply($, _arr);
}

    이는 다음과 같이 사용할 수 있습니다

    var script_arr = [
    'myscript1.js', 
    'myscript2.js', 
    'myscript3.js'
];

$.getMultiScripts(script_arr, '/mypath/').done(function() {
    // all scripts loaded
});

    경로는 모든 스크립트 앞에 추가하고, 의미도 선택 사항입니다 될 위치를 배열도이 작업을 수행 할 수있는 전체 URL의 하나를 포함하고, 모두 함께 길을 떠날 경우 그

    $.getMultiScripts(script_arr).done(function() { ...

    같은 제쳐두고, 완료 콜백은, 스크립트 응답을 포함하는 배열을 나타내는 각 인수를 전달 일치 인자들을 포함 유의

    $.getMultiScripts(script_arr).done(function(response1, response2, response3) { ...

    각 어레이 [content_of_file_loaded, 상태 xhr_object] 같은 것을 포함 할 곳. 스크립트가 어쨌든 자동으로로드됩니다 우리가 일반적으로 액세스하는 인수를 필요로하지 않으며, 대부분의 시간은 완료 콜백이 모두가 우리가 모든 스크립트가로드 된 것을 알고 정말 후 것입니다, 난 그냥 그것을 추가 해요 완전성, 하나 개의 요구는 각 XHR 객체 또는 비슷한에 액세스 할 때로드 된 파일의 요구에서 실제 텍스트에 액세스하거나 할 수있는 드문 경우에.

    스크립트의로드에 실패 할 경우에도, 핸들러가 호출됩니다 실패 이후 스크립트를로드되지 않습니다

    $.getMultiScripts(script_arr).done(function() {
     // all done
}).fail(function(error) {
     // one or more scripts failed to load
}).always(function() {
     // always called, both on success and error
});

  2. 2.나는 병렬로 여러 스크립트를로드하는 간단한 기능을 구현 :

    나는 병렬로 여러 스크립트를로드하는 간단한 기능을 구현 :

    function getScripts(scripts, callback) {
    var progress = 0;
    scripts.forEach(function(script) { 
        $.getScript(script, function () {
            if (++progress == scripts.length) callback();
        }); 
    });
}

    getScripts(["script1.js", "script2.js"], function () {
    // do something...
});

  3. 3.같은 이전의 콜백의 후속 필요한 스크립트를로드 :

    같은 이전의 콜백의 후속 필요한 스크립트를로드 :

    $.getScript('scripta.js', function()
{
   $.getScript('scriptb.js', function()
   {
       // run script that depends on scripta.js and scriptb.js
   });
});

  4. 4.때로는 특정 순서로 스크립트를로드하는 것이 필요하다. 예를 들어 jQuery를 JQuery와 UI 전에로드해야합니다. 수단은, 실행 순서 평행 페이지로드 스크립트 (비동기)의 대부분의 실시 예는 보장되지 않는다. 모두가 성공적으로로드 된 경우 깨질 수 X에 따라 주문, 스크립트 y를하지 않고 있지만 잘못된 순서로한다.

    때로는 특정 순서로 스크립트를로드하는 것이 필요하다. 예를 들어 jQuery를 JQuery와 UI 전에로드해야합니다. 수단은, 실행 순서 평행 페이지로드 스크립트 (비동기)의 대부분의 실시 예는 보장되지 않는다. 모두가 성공적으로로드 된 경우 깨질 수 X에 따라 주문, 스크립트 y를하지 않고 있지만 잘못된 순서로한다.

    나는 의존 스크립트 + 옵션 병렬 로딩 + 연기 오브젝트의 순차적 인 로딩을 할 수있는 하이브리드 접근 방식을 제안한다 :

    / * *로드 스크립트 하나씩 재귀를 사용하여 * 반환 jQuery.Deferred * / 기능 loadScripts (스크립트) { VAR 지연된 jQuery.Deferred = (); 함수 loadScript (I) { 경우 (전 scripts.length를 <) { jQuery.ajax ({ URL : 스크립트 [I], dataType와 "스크립트" 캐시 : 사실, 성공 : 함수 () { loadScript (I + 1); } }); } 다른 { () deferred.resolve; } } loadScript (0); 연기 반환; } / * * 예를 이용하여 직렬 및 병렬 다운로드 함께 * / // 큐 # 1 - JQuery와 UI와 UI를 jQuery 국제화 파일 VAR의 D1 = loadScripts ([ "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js" ). 일 (함수 () { . jQuery를 ( "#의 ~ DATEPICKER2") 날짜 선택기 (jQuery.datepicker.regional.fr); }); // 큐 # 2 - JQuery와 cycle2 플러그인 및 타일 효과 플러그인 VAR의 loadScripts D2 = ([ "https://cdn.rawgit.com/malsup/cycle2/2.1.6/build/jquery.cycle2.min.js" "https://cdn.rawgit.com/malsup/cycle2/2.1.6/build/plugin/jquery.cycle2.tile.min.js" ). 일 (함수 () { jQuery를 ( "#의 slideshow1"). 사이클 ({ FX : "tileBlind" 로그 : 거짓을 }); }); // 트리거 모든 대기열이 완료 콜백 jQuery.when (D1, D2)되는 .done (함수 () { 을 console.log ( "모든 스크립트로드"); }); @import URL ( "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css"); # slideshow1 { 위치 : 상대; Z- 색인 : 1; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

    <입력 ID = "~ DATEPICKER2">

    두 대기열 스크립트는 병렬 다운로드한다 그러나, 각 큐 내의 스크립트 명령 실행을 보장 시퀀스 안에 것이다. 차트 폭포 :

  5. 5.yepnope.js 또는 (Modernizr.load으로 yepnope.js 포함) 모더 나이저를 사용합니다.

    yepnope.js 또는 (Modernizr.load으로 yepnope.js 포함) 모더 나이저를 사용합니다.

    최신 정보

    그냥 여기에 현재 여러 스크립트에 대한 종속성을 보여주는 yepnope를 사용하는 것을의 좋은 동등한이다, 후속 조치 :

    yepnope({
  load: ['script1.js', 'script2.js', 'script3.js'],
  complete: function () {
      // all the scripts have loaded, do whatever you want here
  }
});

  6. 6.나는 멀티 스크립트 로딩 (크롬에 적어도) 실제로 성공적으로 아약스에 의해로드 된 후 실행하지 않는 스크립트의 동일한 도메인 뜨거운 로딩이 곳 도메인 간 완벽하게 잘 작동으로 하나의 문제를 inculding에 문제의 번호로 달렸다! :(

    나는 멀티 스크립트 로딩 (크롬에 적어도) 실제로 성공적으로 아약스에 의해로드 된 후 실행하지 않는 스크립트의 동일한 도메인 뜨거운 로딩이 곳 도메인 간 완벽하게 잘 작동으로 하나의 문제를 inculding에 문제의 번호로 달렸다! :(

    원래의 질문에 선택한 답은 안정적으로 작동하지 않습니다.

    많은 많은 반복 한 후 여기에 특정 엄격한 순서에 getScript (들) 및로드 비동기 적으로 여러 스크립트 내 마지막 대답은 jQuery를 2.1과 크롬, 파이어 폭스 플러스의 현대 버전에서 테스트 스크립트로드 콜백 옵션 및 완료에 전체 콜백, 당 Internet Explorer를 버림.

    three.js를 WebGL을 글로벌 세의 onComplete에 익명 함수 호출에 전달 간격 체크를 사용 가능하게되었다 때 스크립트 렌더링 시작 후 렌더링을 위해 내 테스트 케이스는 파일을로드했습니다.

    프로토 타입 함수 (getScripts)

    function getScripts( scripts, onScript, onComplete )
{
    this.async = true;
    this.cache = false;
    this.data = null;
    this.complete = function () { $.scriptHandler.loaded(); };
    this.scripts = scripts;
    this.onScript = onScript;
    this.onComplete = onComplete;
    this.total = scripts.length;
    this.progress = 0;
};

getScripts.prototype.fetch = function() {
    $.scriptHandler = this;
    var src = this.scripts[ this.progress ];
    console.log('%cFetching %s','color:#ffbc2e;', src);

    $.ajax({
        crossDomain:true,
        async:this.async,
        cache:this.cache,
        type:'GET',
        url: src,
        data:this.data,
        statusCode: {
            200: this.complete
        },
        dataType:'script'
    });
};

getScripts.prototype.loaded = function () {
    this.progress++;
    if( this.progress >= this.total ) {
        if(this.onComplete) this.onComplete();
    } else {
        this.fetch();
    };
    if(this.onScript) this.onScript();
};

    사용하는 방법

    var scripts = new getScripts(
    ['script1.js','script2.js','script.js'],
    function() {
        /* Optional - Executed each time a script has loaded (Use for Progress updates?) */
    },
    function () {
        /* Optional - Executed when the entire list of scripts has been loaded */
    }
);
scripts.fetch();

    이 기능은 내가 이연 사용하여 발견을 위해 그대로입니다 (현재 추천되고 있지 않습니다?), 성공 및 내 시험에서 전체가 100 % 신뢰할 수있는!?, 따라서이 기능 및 예에 statusCode 사용 할 때.

    당신은 / 오류에 추가 원하는 경우 동작을 처리 실패 할 수 있습니다.

  7. 7.당신은 다음과 같은 기능을 시도하여 $ .when-방법의 사용을 만들 수 있습니다 :

    당신은 다음과 같은 기능을 시도하여 $ .when-방법의 사용을 만들 수 있습니다 :

    function loadScripts(scripts) {
  scripts.forEach(function (item, i) {
    item = $.getScript(item);
  });
  return $.when.apply($, scripts);
}

    이 기능은 다음과 같이 사용됩니다 :

    loadScripts(['path/to/script-a.js', 'path/to/script-b.js']).done(function (respA, respB) {
    // both scripts are loaded; do something funny
});

    그 약속을 사용하고 오버 헤드의 최소가 할 수있는 방법입니다.

  8. 8.멋진 대답, adeneo.

    멋진 대답, adeneo.

    (그래서 코드 정의 스크립트의 배열을로드 할 수 있음) 당신의 대답은 더 일반적인 만드는 방법을 알아 내려고하면서 나에게 조금했다. 모든 스크립트가로드 및 실행 때 콜백이 호출됩니다. 여기 내 솔루션입니다 :

        function loadMultipleScripts(scripts, callback){
        var array = [];

        scripts.forEach(function(script){
            array.push($.getScript( script ))
        });

        array.push($.Deferred(function( deferred ){
                    $( deferred.resolve );
                }));

        $.when.apply($, array).done(function(){
                if (callback){
                    callback();
                }
            });
    }

  9. 9.여기에 다른,하지만 슈퍼 간단한 방법입니다. 여러 스크립트를로드하려면 당신은 단순히 몸을 추가 할 수 있습니다.

    여기에 다른,하지만 슈퍼 간단한 방법입니다. 여러 스크립트를로드하려면 당신은 단순히 몸을 추가 할 수 있습니다.

    var scriptsToLoad = [
   "script1.js", 
   "script2.js",
   "script3.js",
]; 
    
scriptsToLoad.forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.body.appendChild(script);
});

  10. 10.당신이 찾고있는 무슨 (require.js 같은)는 AMD 준수 로더입니다.

    당신이 찾고있는 무슨 (require.js 같은)는 AMD 준수 로더입니다.

    http://requirejs.org/

    http://requirejs.org/docs/whyamd.html

    당신이 그것을 보면 많은 좋은 오픈 소스 사람이있다. 기본적으로 이것은 당신이 코드 모듈을 정의 할 수 있습니다, 그것은 코드의 다른 모듈에 의존하는 경우 그 모듈이 실행에 진행하기 전에 완성 된 다운로드가 될 때까지 기다립니다. 이 방법은 비동기 (10 개) 모듈을로드 할 수 있습니다 하나를 실행하는 다른 사람의 몇 가지에 의존하는 경우에도 문제가 없습니다.

  11. 11.이 기능은 종속 파일이 완전히로드 된 후 파일이로드되어 있는지 확인합니다. 당신은 다른 파일에 염두에 일련의 유지에 종속성을 파일을 제공해야합니다.

    이 기능은 종속 파일이 완전히로드 된 후 파일이로드되어 있는지 확인합니다. 당신은 다른 파일에 염두에 일련의 유지에 종속성을 파일을 제공해야합니다.

    function loadFiles(files, fn) {
    if (!files.length) {
        files = [];
    }
    var head = document.head || document.getElementsByTagName('head')[0];

    function loadFile(index) {
        if (files.length > index) {
            var fileref = document.createElement('script');
            fileref.setAttribute("type", "text/javascript");
            fileref.setAttribute("src", files[index]);
            head.appendChild(fileref);
            index = index + 1;
            // Used to call a callback function
            fileref.onload = function () {
                loadFile(index);
            }
        } else if(fn){
            fn();
        }
    }
    loadFile(0);
}

  12. 12.이것은 나를 위해 작동합니다 :

    이것은 나를 위해 작동합니다 :

    function getScripts(scripts) {
    var prArr = [];
    scripts.forEach(function(script) { 
        (function(script){
            prArr .push(new Promise(function(resolve){
                $.getScript(script, function () {
                    resolve();
                });
            }));
        })(script);
    });
    return Promise.all(prArr, function(){
        return true;
    });
}

    그리고 그것을 사용 :

    var jsarr = ['script1.js','script2.js'];
getScripts(jsarr).then(function(){
...
});

  13. 13.여기 마치에이 Sawicki 씨의 하나를 사용하여 콜백으로 약속을 구현하는 대답은 :

    여기 마치에이 Sawicki 씨의 하나를 사용하여 콜백으로 약속을 구현하는 대답은 :

    function loadScripts(urls, path) {
    return new Promise(function(resolve) {
        urls.forEach(function(src, i) {

            let script = document.createElement('script');        
            script.type = 'text/javascript';
            script.src = (path || "") + src;
            script.async = false;

            // If last script, bind the callback event to resolve
            if(i == urls.length-1) {                    
                // Multiple binding for browser compatibility
                script.onreadystatechange = resolve;
                script.onload = resolve;
            }

            // Fire the loading
            document.body.appendChild(script);
        });
    });
}

    사용하다:

    let JSDependencies = ["jquery.js",
                      "LibraryNeedingJquery.js",
                      "ParametersNeedingLibrary.js"];

loadScripts(JSDependencies,'JavaScript/').then(taskNeedingParameters);

    모든 자바 스크립트 파일은 주어진 순서대로 가능한 한 빨리으로 다운로드 및 실행된다. 그런 다음 taskNeedingParameters가 호출됩니다.

  14. 14.위의 앤드류 마크 뉴턴의 광범위한 대답의 짧은 버전. 이 사람은 당신이 정의되지 않은 UI의 동작을 방지하려면 어떻게해야 성공에 대한 상태 코드를 확인하지 않습니다.

    위의 앤드류 마크 뉴턴의 광범위한 대답의 짧은 버전. 이 사람은 당신이 정의되지 않은 UI의 동작을 방지하려면 어떻게해야 성공에 대한 상태 코드를 확인하지 않습니다.

    이 사람은 내가 jQuery를 보장 할 수있는 성가신 시스템했지만, 난 그것을 강요하는 경우 외부 스크립트로 떨어져 양식 할 수 없습니다하는 기술 짧은 충분를 원하므로 다른는 포함되지 않습니다. (당신은 최초의 "재귀"호출하지만 스타일 습관의 힘에 인덱스 0을 전달하여 더욱 짧게 만들 수있는 나 설탕을 추가했다).

    이 블록은 어디 포함될 수 있도록 또한, 모듈 이름에 대한 종속성 목록을 지정하고있어 당신이 필요 "모듈 1"및 스크립트와 종속 초기화 만 포함됩니다 / 당신이 콜백에서 인덱스를 기록하고 하나를 볼 수 있습니다 (한 번 실행 실행 해 AJAX 요청의 순서화 된 집합)

    if(typeof(__loaders) == 'undefined') __loaders = {};

if(typeof(__loaders.module1) == 'undefined')
{
    __loaders.module1 = false;

    var dependencies = [];

    dependencies.push('/scripts/loadmefirst.js');
    dependencies.push('/scripts/loadmenext.js');
    dependencies.push('/scripts/loadmelast.js');

    var getScriptChain  = function(chain, index)        
    {
        if(typeof(index) == 'undefined')
            index = 0;

        $.getScript(chain[index], 
            function()
            {
                if(index == chain.length - 1)
                {
                    __loaders.module1 = true;

                    /* !!!
                        Do your initialization of dependent stuff here 
                    !!! */
                }
                else 
                    getScriptChain(chain, index + 1);
            }
        );
    };

    getScriptChain(dependencies);       
}

  15. 15.jQuery의 getScript 방법을 확장 거기 플러그인이있다. 비동기 및 동기 로딩 할 수 있습니다 및 jQuery의 캐싱 메커니즘을 사용합니다. 전체 공개, 나는이를 썼다. 당신이 더 나은 방법을 찾을 경우에 기여 주시기 바랍니다.

    jQuery의 getScript 방법을 확장 거기 플러그인이있다. 비동기 및 동기 로딩 할 수 있습니다 및 jQuery의 캐싱 메커니즘을 사용합니다. 전체 공개, 나는이를 썼다. 당신이 더 나은 방법을 찾을 경우에 기여 주시기 바랍니다.

    https://github.com/hudsonfoo/jquery-getscripts

  16. 16.로드 N 스크립트 하나 하나 (예 2 파일이 1 일 필요를위한 경우 유용)

    로드 N 스크립트 하나 하나 (예 2 파일이 1 일 필요를위한 경우 유용)

    (function self(a,cb,i){
    i = i || 0; 
    cb = cb || function(){};    
    if(i==a.length)return cb();
    $.getScript(a[i++],self.bind(0,a,cb,i));                    
})(['list','of','script','urls'],function(){console.log('done')});

  17. 17.위의 @adeneo의 답변에 따라 : CSS와 JS 파일을 모두로드를 결합

    위의 @adeneo의 답변에 따라 : CSS와 JS 파일을 모두로드를 결합

    어떤 개선을위한 제안?

    // Usage
//$.getMultiResources(['script-1.js','style-1.css'], 'assets/somePath/')
//  .done(function () {})
//  .fail(function (error) {})
//  .always(function () {});

(function ($) {
  $.getMultiResources = function (arr, pathOptional, cache) {
    cache = (typeof cache === 'undefined') ? true : cache;
    var _arr = $.map(arr, function (src) {
      var srcpath = (pathOptional || '') + src;
      if (/.css$/i.test(srcpath)) {
        return $.ajax({
          type: 'GET',
          url: srcpath,
          dataType: 'text',
          cache: cache,
          success: function () {
            $('<link>', {
              rel: 'stylesheet',
              type: 'text/css',
              'href': srcpath
            }).appendTo('head');
          }
        });

      } else {
        return $.ajax({
          type: 'GET',
          url: srcpath,
          dataType: 'script',
          cache: cache
        });
      }
    });
    //
    _arr.push($.Deferred(function (deferred) {
      $(deferred.resolve);
    }));
    //
    return $.when.apply($, _arr);
  };
})(jQuery);

  18. 18.당신은 재귀를 사용하여 이것을의 시도를 제공 할 수 있습니다. 는 전체 목록의 다운로드가 완료 될 때까지이 동기화에 잇달아을 다운로드합니다.

    당신은 재귀를 사용하여 이것을의 시도를 제공 할 수 있습니다. 는 전체 목록의 다운로드가 완료 될 때까지이 동기화에 잇달아을 다운로드합니다.

    var queue = ['url/links/go/here'];

ProcessScripts(function() { // All done do what ever you want

}, 0);

function ProcessScripts(cb, index) {
    getScript(queue[index], function() {
        index++;
        if (index === queue.length) { // Reached the end
            cb();
        } else {
            return ProcessScripts(cb, index);
        }
    });
}

function getScript(script, callback) {
    $.getScript(script, function() {
        callback();
    });
}

    19. from https://stackoverflow.com/questions/11803215/how-to-include-multiple-js-files-using-jquery-getscript-method by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 jQuery를 사용하지 않도록 텍스트 선택에?  (0) 2020.10.17
[JQUERY] ASP.NET 웹 API와 JSONP  (0) 2020.10.17
[JQUERY] 동일한 클래스 요소를 통해 루프 jQuery를  (0) 2020.10.17
[JQUERY] 어떻게 jQuery를 여러 CSS 속성을 정의?  (0) 2020.10.17
[JQUERY] 어떻게 기존의 정렬되지 않은 목록에 목록 항목을 추가하는 방법?  (0) 2020.10.17
,

티스토리툴바