We usually arrange external JavaScript sources in an arbitrary order like this:
<html>
<head>
<script type="text/javascript" src="../javascripts/08.js"></script>
<script type="text/javascript" src="../javascripts/03.js"></script>
<script type="text/javascript" src="../javascripts/01.js"></script>
<script type="text/javascript" src="../javascripts/05.js"></script>
...
</head>
<body>
...
</body>
</html>
In general, the web pages are working fine, but this is not the case when involving jQuery API. If you loaded jQuery CDN after local jQuery files like the following, some jQuery functions might fail:
<html>
<head>
<script type="text/javascript" src="../javascripts/local_jquery.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
For correctness, you should load jQuery CDN first of all other jQuery files.
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../javascripts/local_jquery.js"></script>
</head>
<body>
...
</body>
</html>
A quite rare mistake that you might make is to load a duplicate CDN unconsciously.
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../javascripts/local_jquery.js"></script>
...
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
</head>
<body>
...
</body>
</html>
This will also ruin your local jQuery files. So be careful.
- Always load jQuery API first.
- Never load duplicate API.