JavaScript 코드 개선

Question

나는 거대한 JavaScript 성능 전문가가 아니다. 간단히 궁금해서 다음 코드를 더 작게 만들 수 있습니까? 그것을 포장하거나 압축하는 것과는 달리, 쓰여지는 방식으로 말입니다.

(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); 
})(); 

건배!

Answer 1

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

이 될 수 있습니다 : 문자열로

오히려 요소를 만드는 대신 비표준 자바 스크립트를 갈 의향이 아니라면, 내가 볼 수있는 유일한 개선의

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

하지만, 실제 HTML 요소 , 문서 .innerHTML에 추가하십시오.

Answer 2

작성 방법이 간결하고 성능은 관련이 없습니다. 그러나 컴팩트, 재사용 가능한 방법으로 그것을 쓰기 :

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

당신이 방법은 덜 반복하게하는 addScriptElement() 함수를 만들 수 있습니다.

Answer 5

나는이 '팽창',하지만 그냥 내가 그것을 얼마나 공유을 downvoted 얻을 것이다 확신 :

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); 
    } 
} 

:

첫째, 나는 매우 확장 될 것 같은 함수를 정의합니다

그런 다음,이 기능을 사용하려면

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 
     } 
    } 
]); 

을 나는 '전원 기능'을 부르는 그. 매우 읽기 쉽고 반복이 있더라도 권력으로 표현됩니다.

당신은 객체의 생성을 자동화 할 수 :

이

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

좋아, 여기에 나의 기회입니다. 현재 많은 돈을 절약하고 있는지 확신 할 수 없지만 example.com에 더 많은 자산으로 끝나면 속도가 빨라질 것입니다.

(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

하나의 접근법이 있습니다. ..

({ 
    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();