Announcing Bootstrap – a simple JS library for loading scripts

I ran into a problem, more than once. The problem was, I needed to use a JavaScript library on only a few pages in a site. It didn’t make any sense to load the library on pages where it wasn’t being used, it just added to the page load time. So I had two options:

  1. Make sure that I only included the library on the pages that needed it. – This wouldn’t work very well because my users could create new pages based on my template. Some would need the library and some would not.
  2. Dynamically inject the script into the DOM only when I needed it from my JavaScript

Script tag injection is nothing new, it’s been around for a long time. Neither are dynamic script loaders. YUI has had one for years, renamed to “get” in YUI3, that I’ve used quite a few times. LabJS and Require.JS are both full featured, well supported script loaders and work great in a wider variety of use cases. NBL was recently updated.

So why did I bother making this one?

Well, it’s really not that hard to do for one thing. I love making micro-libraries like this. It has no external dependencies and the list of possible features I’d like to add is very short.

What I really wanted to do was be able to modify and existing script to dynamically load a script it was dependent on. I could see doing this in several different pages, so I put it in a library.

bootstrap("myLibrary.js", "ScriptTagId");

//or

$b("myLibrary.js","ScriptTagId");

The road map looks a little bit like this.

  • Add a “script loaded” event or , more likely, allow a callback to be passed in and executed once the script has loaded.
  • Add the ability to dynamically load CSS files
  • make the “script tag id” parameter an optional parameter and auto-generate an ID if none is provided
  • Make a cool icon for the project

So, to summarize, this library is really simple. The code is easy to understand right now. I believe is releasing early and releasing often. I didn’t want the lack of features to stop me from releasing. 😉

The code is licensed under the Apache 2.0 license.

Bootstrap on Bitbucket.org

How simple could it be? Lemme post the source code for you.

/**
Copyright 2010 Scott Koon

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
**/

var bootstrap = (function() {
        var bootstrap = function(scriptSrc, id) {
            var scriptTag = document.createElement("script");
            scriptTag.setAttribute("type", "text/javascript");
            scriptTag.setAttribute("charset", "utf-8");
            scriptTag.setAttribute("src", scriptSrc);
            scriptTag.setAttribute("id", id);
            var head = document.getElementsByTagName("head").item(0).appendChild(scriptTag);

        };
        return (window.bootstrap = window.$b = bootstrap);
    }());