How to build your own framework : Step-by-step

Hello, my name is Kurome. Today I'll show you a step-by-step about how to build your own JavaScript framework such as jQuery, Prototype.js, MooTools, etc.

I. Configuring the framework

In this example, assume we'll build a new framework called 'ExampleLib' or something. You may figure out the name yourself.
Two. Does our framework will prefer to 'design' or 'utilities'? If design, then we would have [ic]ExampleLib('idhere').bold();[/ic], etc. Although the 'design' part was unnecessary, let's work on 'utilities' in this tutorial. There's a tutorial in BinaryIntellect which will show you the 'design' mode of framework.
The very important thing was: selector. This is a real 'something' in the framework. Do you want it to be like this? [ic]YourLibName.get(function() {[/ic], or like this? [ic]$_.get(function() {[/ic]? If you rather pick the first one, then right. That's the most easier thing to do. For the selector defining, oh no, it's something. But let's go through this later.

II. Building Cores

Let's build our cores. Building cores is very important step to do, if not then the new framework would just fail.

Code:

var $_ = null;

First we make our new selector, such as jQuery that have the dollar sign [ic]$[/ic] as the selector.
You might change the selector as you wish. Ignore this step if you didn't want to use selector.

You might also want to implement a function and another difficult things, but it's more difficult.. nah, up to you.

Code:

function $_(id) {
 if(window === this) {
  return new $_(id);
 }
 return this;
}

But I strongly recommend the wrapper function part, since it would be useful. For the variable part, we might need to setup some advanced things that you might didn't love. Take a peek at BinaryIntellect for this.

III. Building a prototype

After proceeding, there's another thing you must knew. A prototype was.. uh, I think you might want to search for it at Google or somewhere. I'm too confused to explain it.

The syntax of the prototype itself was this :

Code:

Function.prototype.blablabla = function(param) {
 return param;
};

If I aren't mistaken. Now let's enter the funny part!

Code:

$_.prototype = {
 isArray: function(array) {
  /* code here */
 };
}

You can add many things you did like on that prototype.
Congratulations! You'd already made your own framework.

[offtopic]Actually, I found out the code doesn't work. I think you can keep this in the WfM section until I fix the code.[/offtopic]

I would rather use a different selector to separate between 'design'-related framework and 'utilities'-related framework. Like for the utilities-related will use [ic]$_.[/ic] selector, and for the design-related would use [ic]$_[/ic]. Simple.

I won't move this to the Tutorials section except if it's already updated.