這個Javascript可以用JQuery縮短嗎？

我在查看一些新手Google Maps API教程代碼。這個Javascript可以用JQuery縮短嗎？

They have an example說，如何動態地添加一些腳本到頁面，一旦頁面完成加載。我想知道如果我使用JQuery這個代碼可以縮短嗎？

這裏的代碼...

function initialize() { 
    var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 8, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

function loadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
} 

window.onload = loadScript;

可能嗎？

來源

2010-09-05 Pure.Krome

當然，你可以改變一些調用jQuery，但我不認爲你會嚴重縮短這裏的任何東西。

它看起來像這樣的jQuery的：

function initialize() { 
    var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 8, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map($("#map_canvas").get(0), myOptions); 
} 

$(document).ready(
    function{ 
    $.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=initialize'); 
    });

來源

2010-09-05 13:50:13 Strelok

哦，是的，你必須添加24Kb的gzip jQuery才能縮短几行：D – Strelok 2010-09-05 13:53:53

我不得不用你的'var map'行代替這個點到@SimpleCoder）：'var map = new google.maps.Map（$（「＃map_canvas」）。get（0），myOptions）;' – 2010-09-05 14:34:37

@Pure，的確你是對的。我會編輯我的答案。 – Strelok 2010-09-05 23:53:44

function initialize() { 
    var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 8, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map($("#map_canvas").get(0), myOptions); 
} 

$(function{ 
    $("<script></script>").attr("type", "text/javascript").attr("src", "http://maps.google.com/maps/api/js?sensor=false&callback=initialize").appendTo("head"); 
});

或者，用@ TGR的建議：

$.getScript("http://maps.google.com/maps/api/js?sensor=false&callback=initialize", function(){ 
     var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
     var myOptions = { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map($("#map_canvas").get(0), myOptions); 
});

來源

2010-09-05 13:46:54

你大概意思是'$（「＃map_canvas」）[0]'。 – Tgr 2010-09-05 13:48:23

@Tgr是的，謝謝你，只是修好了它 – 2010-09-05 13:51:07

你忘了回答這個問題了......;） – Guffa 2010-09-05 13:51:18

jQuery有其自己的腳本裝載機，getScript()。

來源

2010-09-05 13:47:19 Tgr

不是。當然不足以抵消jQuery的50-80KB下載。

我的理由是這些代碼大部分都是使用Google的地圖庫。 jQuery無法與其中的大部分進行交互，而且，鑑於它正在做的事情，它已經非常緊湊。我沒有看到你的問題與此代碼。

你也許可以將它壓縮一點點......但它以可讀性爲代價節省了你的字節。

function initialize() { 
    var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
    var map = new google.maps.Map(document.getElementById("map_canvas"), { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
} 

window.onload = function() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
};

來源

2010-09-05 13:49:16 Oli

+1同樣的想法在這裏。 jQuery神奇地可以縮短所有JavaScript代碼的概念很有趣。 ;） – Tomalak 2010-09-05 13:50:42

當縮小jQuery只有大約24KB – 2010-09-05 13:52:15

@SimpleCoder仍然是24k與大於1kbyte的節省。 – Oli 2010-09-05 13:54:35

就能避免腳本注入直接在頁面放置腳本甚至刪除一些無用的變量，即：

<body> 
<div id="map_canvas" style="width:100%; height:100%"></div> 
<script> 
    function initialize() { 
    return new google.maps.Map(document.getElementById("map_canvas"),{ 
    zoom: 8, 
    center: new google.maps.LatLng(-34.397, 150.644), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
} 
</script> 
<script src="http://maps.google.com/maps/api/js?sensor=true&callback=initialize"> 
</script> 
</body>

來源

2010-09-05 14:28:05 Mic

通常這可能會起作用......但是，我不確定Google Map JS是否檢查DomReady。如果您在頭文件中使用了它們的庫，那麼它可能會在完整的DOM之前以及聲明'initialize（）'函數之前觸發。 – Oli 2010-09-05 14:34:05

它的工作原理是因爲它位於身體標記的末尾，加載前的所有內容。 – Mic 2010-09-05 16:57:10

但我不能假設上面的代碼將被注入到身體標記的末尾。我也沒有表現/假設我有身體標記等（我使用部分視圖，如果這是有道理的話）。有效的代碼，只是不適用於我的情況:( – 2010-09-05 23:15:23

這個Javascript可以用JQuery縮短嗎？

回答

相關問題