theBeast example 1: module declaration

theBeast.js

theBeast is a mini-framework (1.5 KB minified) that lets you organize your javascript in modules, have them speak to each other and linked to the dom, greatly improving maintainability.

Fork me! https://github.com/standup75/theBeast

new! jQuery dependency removed. All the examples here are using jQuery but jQuery is not required to use theBeast anymore

Add module

Actually, the obvious pre-requisite is to have jQuery and theBeast.js:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="/theBeast.js" type="text/javascript"></script>

Let's add a module that would make an element fade in and out:

  <script>
   theBeast.add({
    fadeIn: function(){
     console.log("loading fadein module");
     $("#example-1").click(function(){
      $('[data-theBeast="fadeIn"]').fadeIn(500, function(){
       var $this = $(this);
       setTimeout(function(){$this.fadeOut(500)}, 500)});
     });
    }
   });
  </script>

< button with id=example-1
This is the div that fades in and out!
This is another div that fades in and out!

Now, let's look at the code and see that the DIVs have an attribute data-theBeast="fadeIn":

<div data-theBeast="fadeIn">This is the div that fades in and out!</div>
<div data-theBeast="fadeIn">This is another div that fades in and out!</div>

This tells theBeast to load the module fadeIn (if it exists) on document ready. Even if 2 elements have the module declared in there attributes, the module will be loaded only once. You can check the console, "loading fadein module" is displayed only once

Once you've added the modules call theBeast load function on document ready:$(function(){ theBeast.load(); });

And you don't have to use jQuery so you can also do:window.onload = function(){ theBeast.load(); };

This example shows already the 2 main reasons to use theBeast:

1 2 3 4 5  next >>