Git Product home page Git Product logo

moloco's Introduction

MoLoCo

What is MoLoCo?:

MoLoCo stands for Module Loader Component. A small piece of script, aimed to automate the process of loading and injection of external snippets (or components) and the needed dependencies in a static page where you cannot add it by yourself.

It can load JS scripts and CSS styles with ease.

Motivation:

MoLoCo was created to supply the need of injecting dynamic content in an environment where the pages are static and generated by a CMS in which we have no control.

How it works:

MoLoCo looks in the current page for a specific hidden element and loads synchronously the module(s) listed in the value attribute of this element (comma separated)

How to use:

To use MoLoCo, just put a and include the moloco.js script in your page.

MoLoCo will then, look for the files named yourmodule.js, module2.js and snippet3.js in the modules subfolder and load them synchronously.

The modules format:

A module is a simple javascript file that tells MoLoCo what files to load, in which order and under which condition.

MoLoCo uses the same syntax of loaderr (in fact it is an automated version of loaderr)

Example:

var styles = [
    "/static/css/my_snipet/main.css" ,
    "/static/css/dist/some_lib/some_lib_style.css"
],

scripts = [
    ["/static/js/dist/jquery-1.10.2.min.js", !window.jQuery ],
    ["/static/js/dist/underscore-1.5.1.min.js", !window._ ],
     "/static/js/dist/some_mobile_detection_lib_or_routine.js", /* no condition, it is always loaded */
    ["/static/js/my_libs/my_utils.js", !window.myUtils ],
     "/static/js/my_snipet/main.js", /* no condition, it is always loaded */
    [ "/static/js/my_snipet/mobile_specific.js", window.isMobile ], /* loads only if mobile */
];

moloco.loadStyles(styles, function() {
    /* loadStyles callback */

    moloco.loadScripts(scripts, function(){
        /* loadScripts callback */
        
        /* at this point all dependecies are already loaded and you can safely start your application */
        mySnippet.init(); 
    });
});

For a complete description and examples check the loaderr documentation.

Demo:

To see MoLoCo in action check the demo page.

License:

Use it as you wish. I would greatly appreciate if you keep the credits though.

MoLoCo is made by Renato Rodrigues and shared with you for free. Enjoy it!

moloco's People

Contributors

rerodrigues avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.