Amélioration du code JavaScript

Question

Je ne suis pas un grand gourou de la performance JavaScript. Je me demande simplement si je peux rendre le code suivant plus compact? Pas comme l'emballer ou le compresser, mais comme c'est écrit.

(function() { 
    var jq = document.createElement('script'); 
    var an = document.createElement('script'); 
    var cm = document.createElement('script'); 
    var ga = document.createElement('script'); 
    var domain = 'http://example.com/'; 

    jq.src = domain + 'jquery.1.3.2.js'; 
    an.src = domain + 'jquery.alphanumeric.js'; 
    cm.src = domain + 'common.js'; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    ga.setAttribute('async', 'true'); 

    document.documentElement.firstChild.appendChild(jq); 
    document.documentElement.firstChild.appendChild(cm); 
    document.documentElement.firstChild.appendChild(an); 
    document.documentElement.firstChild.appendChild(ga); 
})(); 

Cheers les gars!

Answer 1

'https:' == document.location.protocol ? 'https://ssl' : 'http://www' 

peut devenir:

'http' + 'https:'==document.location.protocol ? 's://ssl' : '://www' 

C'est la seule amélioration que je peux voir, à moins que vous êtes prêt à aller pour javascript non standard, plutôt que de créer des éléments, mais les éléments HTML réels dans une chaîne , puis l'ajouter aux documents .innerHTML

Answer 2

La compacité dans la façon dont il est écrit et la performance ne sont pas liées. Mais pour l'écrire dans un plus compact, réutilisable ainsi:

function appendScript(url, async) { 
    var el = document.createElement('script'), 
     root = document.documentElement; 
    el.async = async; 
    el.src = url; 
    // avoid an IE6 bug by using insertBefore (http://bugs.jquery.com/ticket/2709) 
    root.insertBefore(el, root.firstChild); 
} 


appendScript('http://example.com/js/jquery.1.3.2.js', false); 
appendScript('http://example.com/js/jquery.alphanumeric.js', false); 
appendScript('http://example.com/js/common.js', false); 
appendScript(('https:' == document.location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'), true); 

Answer 3

var child1 = document.documentElement.firstChild; 
child1.appendChild(jq); 
child1.appendChild(cm); 
child1.appendChild(an); 
child1.appendChild(ga); 

Answer 4

Vous pouvez créer une fonction addScriptElement() pour faire de cette façon moins répétitive.

Answer 5

Je suis sûr que cela va se downvoted pour « enfler », mais le partage juste comment je le ferais:

D'abord, je vais définir une telle fonction qui sera très extensible:

function addElements(objlist) { 
    // One or many 
    objlist = [].concat(objlist); 

    while(objlist.length > 0) { 
     var current = objlist.pop(); 

     var node = document.createElement(current.element || 'div'); 
     for(attr in current.attributes) 
      node.setAttribute(attr, current.attributes[attr]); 

     if(current.parent) 
      current.parent.appandChild(node); 
    } 
} 

Ensuite, pour l'utiliser:

addElements([ 
    { 
     parent: document.documentElement.firstChild, 
     element: 'script', 
     attributes: { 
      src: 'http://example.com/jquery.1.3.2.js' 
     } 
    }, 
    { 
     parent: document.documentElement.firstChild, 
     element: 'script', 
     attributes: { 
      src: 'http://example.com/jquery.alphanumeric.js' 
     } 
    }, 
    { 
     parent: document.documentElement.firstChild, 
     element: 'script', 
     attributes: { 
      src: 'http://example.com/common.js' 
     } 
    }, 
    { 
     parent: document.documentElement.firstChild, 
     element: 'script', 
     attributes: { 
      src: ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js', 
      async: true 
     } 
    } 
]); 

C'est ce qu'on appelle les « fonctions de puissance ». C'est très lisible, et même s'il y a répétition, c'est exprimé avec puissance.

Vous pouvez même automatiser la création d'objets:

var elements = [ 
    'jquery.1.3.2.js', 
    'jquery.alphanumeric.js', 
    'common.js', 
    ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js' 
]; 

for(var i=0; i<4; ++i) { 
    elements[i] = { 
     element: 'script', 
     parent: document.documentElement.firstChild, 
     attributes: { 
      src: 'http://example.com/' + elements[i] 
     } 
    }; 
} 

elements[3].attributes.async = true; 

addElements(elements); 

Answer 6

Ok, voici mon coup à ce sujet. Je ne suis pas sûr que cela économise tellement en ce moment, mais si vous avez fini avec plus d'actifs sur example.com cela accélérerait les choses.

(function(){ 
    var scripts = ['jquery.1.3.2', 'jquery.alphanumeric', 'common'], 
     head  = document.documentElement.firstChild, 
     domain  = 'http://example.com/', 
     add_script = function(url, async){ 
      var script = document.createElement('script'); 
      script.src = url; 
      if(async === true) script.setAttribute('async', 'true'); 
      head.appendChild(script); 
     }; 

    for(script in scripts) add_script(domain + scripts[script] + '.js'); 

    add_script(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js', true); 
})(); 

Answer 7

est ici une approche. Espérons que cela le rend facile d'ajouter ou de supprimer des scripts (qui ne ou ne nécessitent pas l'attribut async:..

({ 
    DOMAIN : 'http://example.com/', 
    SCRIPTS : [ {file:'jquery.1.3.2.js'}, 
      {file:'jquery.alphanumeric.js'}, 
      {file:'common.js'}, 
      {file: ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js' 
       , async: 'true'} ], 
    init: function() { 
     for (var i in this.SCRIPTS) { 
      var script = this.SCRIPTS[i]; 
      var sc = document.createElement('script'); 
      sc.src = (script.file.match(/^http/gi)) ? sc.src = script.file : sc.src = this.DOMAIN + script.file; 
      if (typeof script.async !== 'undefined') { 
       sc.setAttribute('async', script.async); 
      } 
      document.documentElement.firstChild.appendChild(sc); 
     } 

    } 
}).init();