PDA

View Full Version : Load javascript MVC files in head or body of index.html?



bweiler
18 Apr 2011, 2:48 PM
Does anyone know the pros and cons of putting the MVC script tags in the head vs the body of the index.html file?

Putting the files in div tags in the body seems to add additional levels of nesting with no apparent benefit as opposed to putting the script tags in the head.

PhoneGap MVC Example:



<!DOCTYPE html>
<html>
<head>
<title>Contacts</title>
<scripttype="text/javascript"src="lib/touch/sencha-touch.js"></script>
<linkhref="lib/touch/resources/css/sencha-touch.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="phonegap.js"></script>
<scripttype="text/javascript">
document.addEventListener("deviceready", function () {alert('PhoneGap ready');}, false);
</script>
</head><body></body>
</html>



Contacts MVC Example:



<!doctype html>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>Sencha Application</title>
<metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<metaname="apple-mobile-web-app-capable"content="yes"/>
<linkrel="apple-touch-icon"href="apple-touch-icon.png"/>
<linkrel="stylesheet"href="../../../Sencha/touch/resources/css/sencha-touch.css"type="text/css">
<linkrel="stylesheet"href="resources/css/application.css"type="text/css">

</Head>



<body>



<!--

This is your development file. This should load the debug versions of third party library, and load
your application file by file (the Sencha Command generators help automate this). See deploy/index.html for the production version of this file

-->





<scripttype="text/javascript"src="lib/touch/sencha-touch-debug.js"></script>
<script type="text/javascript" src="../../../../Sencha/touch/pkgs/platform/mvc.js"></script>

<divid="sencha-app">
<scripttype="text/javascript"src="app/routes.js"></script>
<scripttype="text/javascript"src="app/app.js"></script>

<!-- Place your view files here -->
<divid="sencha-views">
<scripttype="text/javascript"src="app/views/Viewport.js"></script>
<scripttype="text/javascript"src="app/views/contact/ContactListPanel.js"></script>
<scripttype="text/javascript"src="app/views/contact/ContactDetails.js"></script>
<scripttype="text/javascript"src="app/views/contact/ContactForm.js"></script>
</div>
<!-- Place your model files here -->
<divid="sencha-models">
<scripttype="text/javascript"src="app/models/Contact.js"></script>
</div>
<!-- Place your controller files here -->
<divid="sencha-controllers">
<scripttype="text/javascript"src="app/controllers/Contact.js"></script>
</div>
</div>
</body>
</html>

jay@moduscreate.com
19 Apr 2011, 6:03 AM
I agree with you and have alerted the team to the less than optimized code example.

Check out http://senchatouchinaction.com/examples/chapter02 for an MVC example that I'm publishing.