-
Notifications
You must be signed in to change notification settings - Fork 1
BASE In Your Project
Now that you have BASE in the root of your project, your folder structure should look something like this. There will be a lot more files than this because BASE is really a set of useful libraries. Don't worry, we don't load them unless you require them. The scripts are just there for your convenience. If you get done with your application and don't want all the extra files feel free to just delete them. It won't affect BASE.
Project Folder | -->lib | | | -->BASE.js | --> index.html
To get started, your index.html file should look something like this.
<html>
<body>
<script src="lib/BASE.js"></script>
<script>
//This configures how BASE will load other scripts.
//Here we set where the root of all the scripts will be.
//This sets it to all the libraries that BASE supplies.
BASE.require.loader.setRoot("lib/");
//Now we can load the Url class like so.
BASE.require(["BASE.web.Url"], function(){
var url = new BASE.web.Url("http://www.leavitt.com/");
url.getHost(); //-->"wwww.leavitt.com"
});
</script>
</body>
</html>
Usually when you start a project, you will need to write code that is specific to your application. This is where BASE shines. In order to set that up you will need to decide on the namespace your app will use. In this example we will use "app" as our root namespace.
First we need to set up our custom namespace to the right folder. Our folder structure will now look like this, with a Main.js file that has our Main class.
Project Folder | -->app | | | -->Main.js | -->lib | | | -->BASE.js | --> index.html
<html>
<body>
<script src="lib/BASE.js"></script>
<script>
//This configures how BASE will load other scripts.
//Here we set where the root of all the script we are going to use will be.
//This sets it to all the libraries that BASE supplies.
BASE.require.loader.setRoot("lib/");
//Here we tell BASE that for the namespace "app" go to the app folder instead of the root.
BASE.require.loader.setNamespace("app","app/");
//Now we can load the Main class that is in the Main.js
BASE.require(["app.Main"], function(){
var app = new app.Main(document);
app.start();
});
</script>
</body>
</html>
Now your Main.js file may look like this.
NOTE: It is really important that your object takes that namespace that it should or BASE will never think that it's loaded. BASE looks to see if the namespace is ready for the scripts that needed it. If it doesn't find the namespace taken then it will do nothing. To find out if there are scripts pending use BASE.require.sweeper.getStatus().
BASE.require([
"BASE.web.Url"
], function(){
//Set up your app namespace.
BASE.namespace("app");
//Now that BASE safely made your namespace you can use app.
app.Main = function(){
var self = this;
self.start = function(doc){
//BASE.web.Url is now here because we required it to run.
var url = new BASE.web.Url(doc.referrer);
console.log(url.getHost());
};
};
});
Now you can break your application into as many files as you need. Use the app folder to collect scripts that are specific to your application. Now code away in a nice and clean manner. :)
In the code above you'll notice the use of BASE.require.loader.setRoot and BASE.require.loader.setNamespace. These functions along with a few more allow you to configure BASE for your project.
We will be talking about and explaining the need for these methods.
- BASE.require.loader.setRoot
- BASE.require.loader.setNamespace
- BASE.require.loader.setObject
- BASE.require.loader.getPath
BASE.require.loader.setRoot is used to tell BASE that most of my scripts are in this folder. This usually points to the BASE library, but it doesn't necessarily have to. If your folder structure looked like this.
project | -->scripts | -->index.html
Your code would like this in the index.html file.
<html>
<body>
<script src="scripts/BASE.js"></script>
<script>
BASE.require.loader.setRoot("scripts/");
</script>
</body>
</html>
Like the example above using setNamespace, we usually need to tell BASE where to look for a namespace. BASE uses folder structures to represent namespaces. So you may have something like this.
project | -->scripts | -->app | | | -->model | | | | | -->Person.js | | | -->Main.js | -->index.html
Now if you set the namespace of app like so.
BASE.require.loader.setNamespace("app", "app/");
And if you wanted to load the Person class by using Require like this.
BASE.require.loader.setNamespace("app", "app/");
BASE.require([
"app.model.Person"
], function(){
var person = new app.model.Person();
});
Since you configured app to live in the folder app/ BASE will translate your namespace like so.
app.model.Person --> app/model/Person.js app.Main--> app/Main.js
If you are ever curious as to where BASE is going to find a namespace use BASE.require.loader.getPath.
BASE.require.loader.setRoot("scripts/");
BASE.require.loader.setNamespace("app", "app/");
BASE.require.loader.getPath("app.model.Person"); //-->"app/model/Person.js"
BASE.require.loader.getPath("BASE.web.Url"); //-->"scripts/BASE/web/Url.js"
These configurations are to help you organize you code in a logical manner. But there are times where you don't have a choice in that matter and you can't place your scripts where you want. Or some are here and some are there. BASE.require.loader.setObject in conjunction with BASE.require.laoder.setNamespace helps with this.
Project Folder
|
-->app
| |
| -->Main.js
|
-->lib
| |
| -->BASE.js
|
|
-->plugins
| |
| -->jQuery.js
| |
| -->jQueryTransitionPlugin.js
|
--> index.html
Let's say we want to include jQuery and the transition plugin with the above structure. Here is how we would configure BASE.
BASE.require.loader.setRoot("lib/");
BASE.require.loader.setNamespace("app", "app/");
BASE.require.loader.setObject("jQuery", "plugins/jQuery.js");
BASE.require.loader.setObject("jQuery.fn.transition", "plugins/jQueryTransitionPlugin.js");
BASE.require.loader.getPath("BASE.web.Url"); //--> "lib/BASE/web/Url.js"
BASE.require.loader.getPath("jQuery"); //--> "plugins/jQuery.js"
BASE.require.loader.getPath("jQuery.fn.transition"); //--> "plugins/jQueryTransitionPlugin.js"
BASE.require.loader.getPath("jQuery.fn.draggable"); //--> "lib/jQuery/fn/draggable.js"
BASE.require.loader.getPath("app.model.Person"); //--> "app/model/Person.js"
Now the rest of your app doesn't need to worry about where the files live. They just need to worry about the namespace that it uses when it's loaded.