javascript - 避免多次加载相同的 javascript

Question

我想防止我的系统多次加载同一个脚本，因为可以组合不同的模块并且我使用我不想操作的第三方库。

有没有人这样做过？

Answer 1

RequireJS怎么样？似乎是您正在寻找的东西。

Answer 2

由于诸如 Require JS 之类的库没有解决我的问题，我制作了自己的解决方案，我将在下面发布。

我的系统也是由不同的模块组成的。在主模块中，我有一个用于所有模块（php、js 和 css 文件）的依赖项的加载器。加载依赖项后，应用程序会触发一个事件并设置一个全局变量，以防止双重包含文件。

希望能帮助到你。如果您有任何疑问，请告诉我。

编码：

//Main 
var main = {
    init: function(){
        //Dependencies to load (php, js or css)
        var deps = [
            '/helpers/edit/v/edit.php',                
            '/helpers/edit/css/edit.css',              
            '/helpers/validate/js/jquery.validate.js,messages_pt_BR.js'
        ];        
        //Load initial pack
        if (!window.editReady){
            //Load dependencies
            this.load('edit',deps);        

            //Bind loaded event
            $('body').on('editReady',function(){
                //Set editLoaded to avoid double ajax requests
                window.editReady = true;

                //Do whatever you need after it's loaded

            });
        }
    },
    //Load external resources
    load: function(name,data_urls){
        var url, ext;  
        var len = data_urls.length;
        var i = 0;
        $(data_urls).each(function(){
          //Get proper file
          $.get(this, function(data) {
              url = this.url;
              ext = url.split('.').pop();
              switch(ext){
                  case 'php':
                      this.appended
                      $(data).appendTo('body');
                      break;
                  case 'css':
                      $('<link/>')
                        .attr({
                          'rel':'stylesheet',
                          'href':url
                        }).appendTo('head');
                      break;
              }
              //Check if all files are included
              i += 1;
              if (i == len) {
                $("body").trigger(name+"Ready");
              }
          });
        });
    }
};

var modules = {
    themes : {
        init : function(){
            //Load dependencies
            var deps = [
                '/helpers/plupload/js/plupload.js,plupload.html5.js,plupload.flash.js' 
            ];        
            if (!window.themesReady){
                //Set themesReady to avoid double ajax requests
                window.themesReady = true;

                //Load dependencies
                main.load('themes',deps);   

                $('body').on('themesReady',function(){

                    //Do whatever you need after it's ready
                });
            }
        }
    }
}    
main.init();