这个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缩短吗？

回答

相关问题