这个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;
可能吗?
答
当然,你可以改变一些调用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');
});
答
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);
});
答
不是。当然不足以抵消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);
};
答
就能避免脚本注入直接在页面放置脚本甚至删除一些无用的变量,即:
<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>
哦,是的,你必须添加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