I have tried many different ways to properly organized JavaScript in my Developments. When I'm developing I have faced following issues.
Thus i thought to work on my pattern with the help of JavaScript Loader to overcome this situation. I have used Head.js to dynamically load JavaScript's. There are few other JavaScript loaders such as
I have chosen Head.js because of performance and simplicity you can develop this pattern to work with any JavaScript loader. Head.js supports other css declaration and media queries as well. This pattern can be extended support css loading as well.
This is very simple pattern. In here you need to only refer one script in a page. So I'm sure it is saving your development time as well as script maintenance time.
How to Use the Pattern in Nutshell
When every thing is prepared you need to Only refer one script in your pages.
If you want to write a code by loading common scripts then you need to say like
<script src="Scripts/ScriptBase.js"></script>
<script>
BaseReady(function () {
// Add you code Here
});
</script>
If you want to write a code after MyScript.js is loaded then you need to say like
<script src="Scripts/ScriptBase.js" ></script>
<script>
BaseReady(function () {
IncludeScript(js.app);
ScriptReady(function () {
// Write Your code here
});
});
</script>
If you want to write a code after MyScript.js,Second.js is loaded then you need to say like
<script src="Scripts/ScriptBase.js" ></script>
<script>
BaseReady(function () {
//app: '/Js/MyScript.js'
IncludeScript(js.app);
// '/Js/Second.js'
IncludeScript(js.second);
ScriptReady(function () {
// Write your code here
});
});
</script>
With jQuery
<script src="Scripts/ScriptBase.js" ></script>
<script>
BaseReady(function () {
IncludeScript(js.app);
ScriptReady(function () {
$(document).ready(function () {
// With jQuery
});
});
});
</script>
How to Prepare the Pattern
var js =
{
Head: '/head.js', // Original Path /Scripts/head.js
jquery: '/jquery-2.0.3.js', // Original Path /Scripts/jquery-2.0.3.js
app: '/Js/MyScript.js', // Original Path /Scripts/Js/MyScript.js
second: '/Js/Second.js', // Original Path /Scripts/Js/Second.js
};
var js =
{
lst: 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js'
};
Then you can use it for your project. (Refer How to Use the Pattern in Nutshell )
Blog Link http://melick-rajee.blogspot.com/2013/07/single-reference-javascript-pattern-for.html