Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
JavaScript CSS
branch: master

This branch is 53 commits ahead of josephj:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
assets/skins
lang
sample
README.md
module-analytics.js
module-intl.js
module-list.js
module-manager.js
module-popup.js
module.js

README.md

module

A YUI implementation of "Scalable JavaScript Application Architecture" theory by Nicholoas Zakas.

Features

Sandboxing

The main theory is that every module should be a sandbox and live on its own. The instance provides useful attributes and methods for developer to work.

YUI.add("module1", function (Y) {

    var module1 = new Y.module({
        selector: "#module1",
        init: function () {
            // Initial settings.
        },
        on: {
            // Triggers when this dom element is contentready.
            viewload: function () {
                module.log("viewload() is executed.");
                var node = this.get("node");
                // Bind events.
            }
        }
    });

}, "VERSION", {
    requires: ["module"]
});

Loose Coupling

You can make cross-module communication by listening and broadcating model. This approach is great for loose coupling.

  • Module 1:

    module1.listen("need-love", function (name, id, data) {
        console.log(name); // The message name.
        console.log(id);   // The caller id.
        console.log(data); // The data that caller provides.
        // Check data to see if you want to have next step.
    });
  • Module 2:

    module2.broadcast("need-love", {
        "gender": "male",
        "hobbies": ["jogging", "movie"]
    });

Page-level Control

Sometimes you may need to implement a feature that doesn't belongs to any view module. However, you still want to use the listen/broadcast model to make interaction between different modules. Y.ModuleManager is the right one to help.

var manager = new Y.ModuleManager(attrs); // It's a singleton. All instances are the same.
manager.broadcast("playing", data);
manager.listen("seek", handler)

Extensible

Developer can choose to require the extensions they need to have more useful attributes and methods.

  • module-intl - For translation.

    module.getTrans(<key>, <default_string>);
  • module-analytics - For Google Analytics.

    module.trackPageView(<path>);
    module.trackEvent(<category>, <action>, <label>);
  • module-dialog - For custom dialogs.

    module.alert(<msg>, <callback>);
    module.confirm(<msg>, <callback>);
    • You can even transform the module itself to a dialog.

        new Y.Module({
            selector: "#foo",
            dialog: true
        });

Examples

JavaScript Modular Platform

This example shows the concept of cross-module interactions. Be aware the library used there is the elder version. I will update it recently.

ModuleDialog Extension

A very convenient way to create custom alert and confirm UIs.

Questions?

Someone said I should use custom event (Y.fire and Y.on) to achieve cross-module communication. Indeed it works but it only solves one problem. What this theory solves is about team work, you need to make some constrait to developer to prevent everyone can do something wild.

Also, I find it's a really great foundation for us to build necessary extensions. It helps us to have swift methods and consistent UIs very easily. Sometimes it's dangerous that everyone calls native YUI or jQuery methods. It might produce thousands implementations for one simple feature.

Something went wrong with that request. Please try again.