2011-12-01 4 views
4

J'ai une question sur le rechargement des fichiers JavaScript. Je développe des frontaux de pages web et je fais beaucoup de codage dans JS. Chaque fois que je veux vérifier le flux d'une application est correct (ou faire un peu de débogage), je dois appuyer sur la touche F5 pour recharger toute la page et ses scripts, et je dois attendre. Le temps d'attente dépend du poids de la page et parfois je m'impatiente. Par conséquent, je me demande s'il existe un moyen de recharger uniquement le fichier de script modifié * .js? ou peut-être il y a un plugin pour que Chrome recharge le script choisi? Cela pourrait être un moyen très pratique de faciliter le développement. Merci pour les réponses.comment recharger le fichier javascript

celui-ci utilise jQuery, il est ici par exemple:

var scs=$('script[type*=javascript]'); 
var scsl = scs.length; 
var scsi = 0; 
var o = []; 
var oi = 0; 
var ol = 0; 
var s = ''; 
var fws = 0; 
var sws = 0; 
var v = {}; 

function i1(){ 
fws = window.setInterval(function(){ 
        v = $(scs[scsi]); 
         
        s = v.attr('src'); 
        if(typeof s!='undefined' && s.indexOf('http')==-1 && s.indexOf('index')==-1){ 
                console.log([scsl,scsi,s]); 
                o.push({src:s}); 
                v.remove(); 
        } 

        if(scsi==scsl){ 
                console.log(o); 
                window.clearInterval(fws); 
                ol = o.length; 
i2(); 
        } 
        else{ 
                scsi++; 
        } 
},800); 
} 

function i2(){ 
                sws=window.setInterval(function(){ 
                        v = o[oi]; 
                        sc = $('<script>').attr({type:'text/javascript',src:v.src+'?t='+(new Date().getTime())}); 
                        console.log([ol,oi,v.src]); 
                        $('head').append(sc); 

                        if(oi==ol-1){ 
                                window.clearInterval(sws); 
                        } 
                        else{ 
                                oi++; 
                        } 
                },800); 

} 
i1(); 
+1

Si possible, un moyen d'accélérer votre développement js est d'utiliser des outils en ligne comme jsfiddle ou jsbin. Ensuite, vous n'aurez pas besoin de recharger une page entière et de travailler sur vos scripts individuellement, puis de les implémenter sur votre site. – Paparappa

Répondre

4

Pour autant que je sache, il n'y a aucun moyen de le faire. Le problème est, vous ne pouvez pas décharger un script d'une page, une fois qu'il a été évalué.

Même si vous supprimez le noeud <script>, il ne changera pas le comportement. Cela pourrait être possible avec un plugin tiers, par exemple, mais je suis presque sûr que ce n'est pas possible avec n'importe quelle implémentation de vanilla js.

Bien sûr, vous pouvez simplement charger le même fichier de script à partir de votre serveur et l'exécuter (eval), mais encore une fois, vous n'avez toujours pas déchargé le code précédent, ce qui pourrait entraîner un comportement inattendu. Donc, vous devez garder votre clé F5 sur ses orteils.

+0

Merci pour votre réponse, c'est que vous avez raison. J'ai parlé à mon collègue et il a écrit en un rien de temps une simple fonction qui supprime toutes les balises

0

Vous pourriez essayer la nouvelle fonction Scratchpad dans Firefox (je pense que c'est dans les versions depuis 7.0).

Lorsque je suis en train de faire un petit tour sur un nouveau morceau de javascript, je le fais dans le bloc-notes, puis je le copie dans mon éditeur quand je l'aime. Fondamentalement, je fais tout mon travail dans des fonctions et des objets qui peuvent être redéfinis à la volée (n'est-ce pas tout le monde?). De cette façon, je peux juste réexécuter la définition de la fonction ou réaffecter une méthode/donnée d'objets et c'est beaucoup plus rapide que d'attendre les cycles d'actualisation.

0

Dans les frameworks basés sur Dojo ou CommonJS, ce n'est pas du tout un problème. Le code Javascript est généralement maintenu dans un module.

Dans notre IDE basé sur le Web, nous recharger les scripts tout le temps comme celui-ci (@reloadCustomMobileStack):

define([ 
    'dojo/_base/declare', 
    'require' 
], function(declare,require) 
{ 
    return dojo.declare("xappstudio.manager.DynamicScriptMixin", null, 
    { 
     _reloadModule:function(module,reload) 
     { 
      require.undef(module); 
      var scripts = document.getElementsByTagName('script'); 
      for (var i = scripts.length - 1; i >= 0; i--) 
      { 
       var script = scripts[i]; 
       if (script.getAttribute('src') && script.getAttribute('src').length > 0 && script.getAttribute('src').indexOf(module)!=-1) 
       { 
        script.parentNode.removeChild(script); 
        break; 
       } 
      } 

      if(reload) 
      { 
       require([module], function(_moduleIn) 
       { 
        console.error('got module' + _moduleIn); 
       }); 
      } 
     }, 
     reloadCustomMobileStack:function() 
     { 
      var modulesToReload = [ 
       'cxapp/delegates/BootDelegate', 
       'cxapp/delegates/FormDelegate', 
       'cxapp/delegates/HeaderToolbarDelegate', 
       'cxapp/delegates/ImageResizeDelegate', 
       'cxapp/delegates/ServiceDelegate', 
       'cxapp/delegates/UrlDelegate', 
       'cxapp/manager/Context', 
       'cxapp/manager/CustomApplication', 
       'cxapp/manager/DataManager', 
       'cxapp/types/Types', 
       'cxapp/utils/RPCProxyPOSTEnvelope' 
      ]; 

      for(var i = 0 ; i < modulesToReload.length ; i++) 
      { 
       this._reloadModule(modulesToReload[i],true); 
      } 

     } 
    }); 
}); 

Pour utiliser "require.undef (module);" , vous devez ajouter ceci ici à votre config Dojo: "a: {'dojo-undef-api': vrai}"

Bien sûr cela ne fonctionnera pas avec n'importe quel Javascript puisque le Javascript de Dojo/Common-JS est différent mais vous permet également une sorte d'injection de dépendance ou de résolution.

Questions connexes