Question

我有一个Java脚本用来给我一些图表。

代码如下。

data:text/html,<html>
<hhref="https://dl.dropboxusercontent.com/u/11433463/habrahabr/starfield.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/11433463/habrahabr/js/TweenMax.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/11433463/habrahabr/js/easing/EasePack.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/11433463/habrahabr/js/plugins/CSSPlugin.min.js"></script>
</head>
<body>
<script>
$(document).ready( function() {
     TweenMax.to($('#bg1'), 9, {css:{backgroundPosition: "-314 0px"}, repeat:-1, ease:Linear.easeNone});
     TweenMax.to($('#bg2'), 30, {css:{backgroundPosition: "-269 30px"}, repeat:-1, ease:Linear.easeNone});
});
</script>
<div class="starfield" id="sample">
     <div class="stars" id="bg1"></div>
     <div class="stars" id="bg2" style="background-position: 20 30px"></div>
</div>
</body>
</html>


data:text/html,<!DOCTYPE html><head>    <title>Speedometer</title>    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Play:300,300' type='text/css'>        <script type="text/javascript" src="http://iop.io/js/vendor/d3.v3.min.js"></script>    <script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerEvents/pointerevents.js"></script>    <script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerGestures/pointergestures.js"></script>    <script type="text/javascript" src="http://iop.io/js/iopctrl.js"></script>        <script>        var TableauInput = "3201,49";var TableauParse = JSON.parse("[" + TableauInput + "]");        </script>        <style>        body {            font: 16px arial;            background-color: #515151;        }        .unselectable {            -moz-user-select: -moz-none;            -khtml-user-select: none;            -webkit-user-select: none;            -ms-user-select: none;            user-select: none;        }        /* css formats for the gauge */        .gauge .domain {            stroke-width: 2px;            stroke: #fff;        }        .gauge .tick line {            stroke: #fff;            stroke-width: 2px;        }                .gauge line {            stroke: #fff;        }        .gauge .arc, .gauge .cursor {            opacity: 0;        }        .gauge .major {            fill: #fff;            font-size: 20px;            font-family: 'Play', verdana, sans-serif;            font-weight: normal;        }                .gauge .indicator {            stroke: #EE3311;            fill: #000;            stroke-width: 4px;        }        /* css formats for the segment display */        .segdisplay .on {            fill: #00FFFF;        }        .segdisplay .off {            fill: #00FFFF;            opacity: 0.15;        }    </style></head><body>    <div>        <span id="speedometer"></span>    </div>        <script>                    var svg = d3.select("#speedometer")                .append("svg:svg")                .attr("width", 300)                .attr("height", 300);        var gauge = iopctrl.arcslider()                .radius(120)                .events(false)                .indicator(iopctrl.defaultGaugeIndicator);        gauge.axis().orient("in")                .normalize(true)                .ticks(12)                .tickSubdivide(3)                .tickSize(10, 8, 10)                .tickPadding(5)                .scale(d3.scale.linear()                        .domain([0, 160])                        .range([-3*Math.PI/4, 3*Math.PI/4]));        var segDisplay = iopctrl.segdisplay()                .width(80)                .digitCount(6)                .negative(false)                .decimals(0);        svg.append("g")                .attr("class", "segdisplay")                .attr("transform", "translate(130, 200)")                .call(segDisplay);        svg.append("g")                .attr("class", "gauge")                .call(gauge);        segDisplay.value(TableauParse[0]);        gauge.value(TableauParse[1]);        </script></body>ead>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link >

有些人可以指导我理解为什么在脚本中使用某些链接吗？

与https://dl.dropboxusercontent.com/u/11433463/类似，以及脚本的作用。

谢谢！

Answer 1

您需要了解，随着您的应用程序变得越来越大，它将难以维护;现在，如果你把这些东西分成不同的文件，对你作为开发人员来说会更好，因为它真的很容易管理。

以script结尾的所有.js代码，都会导入此类JavaScript文件;每个都包含一些逻辑。

想象一下：如果你必须要吃东西，你会逐渐添加成分，以获得你想要的成分;你不要马上把它。类似于软件的情况，如果你有一个巨大的Web应用程序，如果你将代码分解成小的单个块，然后使用它，它会更聪明。这也将提高代码的可维护性。

因此，例如，如果你有20个类（类是JS中的devil同义词），你可以将它们保存在20个单独的文件中，因为它更容易知道哪个文件包含哪个类而不是制作意大利面条代码并将所有代码粘贴在一个文件中。

前几个script标签导入其他库/代码块;接下来你有一些jQuery代码，最后是一些HTML。

Answer 2

src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>中的链接将文档引用到其他信息来源：

I.E。：$(document).ready( function(){});将文档路由到jQuery库，以便您可以在脚本中编写jQuery，而不仅仅是JavaScript（即.social a { text-decoration: none; }

有人可以解释一下，这些脚本用简单的英语做了什么？

2 个答案: