DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > A first look at the upcoming JavaScript modules

A first look at the upcoming JavaScript modules

Axel Rauschmayer user avatar by
Axel Rauschmayer
·
Mar. 29, 11 · Web Dev Zone · Interview
Like (0)
Save
Tweet
3.51K Views

Join the DZone community and get the full member experience.

Join For Free

Judging by a tweet by David Herman, he is excited about something (he is shouting!) and so should we be:

MODULES FOR ECMASCRIPT, Y'ALL. MODULES FOR ECMASCRIPT. THAT IS ALL. [@littlecalculist]
This means: ECMAScript Harmony (or ECMAScript.next [1]), as it is currently being planned, will have modules. This post gives you a first look, summarizing the material at [2].

Goals of modules:
  • Static scoping
  • Orthogonality from existing features
  • Smooth refactoring from global code to modular code
  • Fast compilation
  • Simplicity and usability
  • Standardized protocol for sharing libraries
  • Compatibility with browser and non-browser environments
  • Easy external loading
Terminology: The word “module” can mean three things. The differences are subtle, but you don’t need to worry about them too much, because it is usually intuitively clear how things work and there is almost no overlap between the meanings:
  • Module: the module as source, either defined inline or loaded externally.
  • Module instance: The evaluated module in use, linked to other modules. It has internal state and external (exported) bindings.
  • Module instance object: The module instance reified as an object. Naturally, only exported bindings are accessible.
Modules are very similar to objects (as they should be), but you have to explicitly export things that should be externally visible.
    module Math {
        export function sum(x, y) {
            return x + y;
        }
        export var pi = 3.141593;
    }
In the scope where the module is defined, you can access its contents via the module name.
    alert("2π = " + Math.sum(Math.pi, Math.pi));
If you import, you can drop the module name.
    import Math.{sum, pi}; 
    alert("2π = " + sum(pi, pi));
Use * to import everything:
    import Math.*; 
    alert("2π = " + sum(pi, pi));
You can rename the things you import:
    // avoid name clash between two modules:
    import Geometry.{draw: drawShape};
    import Cowboy.{draw: drawGun};
You can also nest modules and access them via a path of names.
    module Widgets {
        module Button { ... }
        module Alert { ... }
        module TextArea { ... }
        ...
    }
 
    import Widgets.Alert.{messageBox, confirmDialog};
    ...
Instead of providing a body for a module, you can also load a module definition from the web or from the file system. The source code of a module file does not have the module {...} brace around it.
    module JSON = require('http://json.org/modules/json2.js'); // web
    module File = require('io/File'); // file system
    import require("bar.js").y; // file system
Reflection: modules can be used and examined as if they were objects: You can pass the object to functions as an argument (e.g. to provide them with an API to do something). You can list the property keys to find out what is being exported. Etc.
    module M = Math; // static module reference
    var N = Math; // dynamic reference to module instance object
    var twoPi = M.pi + N.pi;
    console.log(Object.keys(M));
More features:
  • All globals in a module are only module-global. This allows for shared state and nicely encapsulates things.
  • Cyclic dependencies are possible.
  • A module can be loaded dynamically, the resulting module instance object is handed to a callback.
Related reading:
  1. David Herman on ECMAScript.next
  2. harmony:modules [ES Wiki]

 

From http://www.2ality.com/2011/03/first-look-at-upcoming-javascript.html

Object (computer science) JavaScript ECMAScript Binding (linguistics) Harmony (operating system) Information system Drops (app)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Why Performance Projects Fail
  • How To Deploy Apache Kafka With Kubernetes
  • Cloud-Based Integrations vs. On-Premise Models
  • Applying Kappa Architecture to Make Data Available Where It Matters

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo