Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Simple behaviour

A module pattern that makes it easy to write re-usable components without having to worry about when to instantiate a module, or what scope to give it.

Specify behaviour in markup

Javascript modules can be specified in markup using data- attributes:

<div data-module="some-module">
  <strong>Some other markup inside the module</strong>
</div>

Include simple.min.js then find and start these modules by running:

Simple.modules.start()

This will attempt to find and start all modules in the page. In this example it will look for a module at Simple.Modules.SomeModule. The data attribute gets converted to PascalCase.

The module will be instantiated and then its start method called. The HTML element with the data-module attribute is passed as the first argument to the module initialiser. Modules act only within their containing elements.

module = new Simple.Modules[type]()
module.start(element)

Running Simple.modules.start() multiple times will have no additional affect. When a module is started a flag is set on the element using the data attribute module-started. data-module-started is a reserved attribute.

Simple.modules.start() can be called with an element to start modules in dynamically loaded content:

Simple.modules.start(document.querySelector('.dynamic-content'))

Module structure

A module must add its constructor to Simple.Modules and it must have a start method. The simplest module looks like:

;(function(Modules) {
  'use strict'

  Modules.SomeModule = function(element) {
    this.start = function() {
      // module code
    }
  }
})(window.Simple.Modules)

Writing modules

It helps if modules look and behave in a similar manner.

Use js- prefixed classes for interaction hooks

Make it clear where a javascript module will be applying behaviour:

<div data-module="toggle-thing">
  <a href="/" class="js-toggle">Toggle</a>
  <div class="js-toggle-target">Target</div>
</div>

Declare event listeners at the start

Beginning with a set of event listeners indicates the module’s intentions. Where possible, assign listeners to the module element to minimise the number of listeners and to allow for flexible markup:

<div data-module="toggle-thing">
  <a href="/" class="js-toggle">This toggles</a>
  <div class="js-toggle-target">
    <p>Some content</p>
    <a href="/" class="js-toggle">This also toggles</a>
  </div>
</div>

Use data-attributes for configuration

Keep modules flexible by moving configuration to data attributes on the module’s element:

<div
  data-module="html-stream"
  data-url="/some/endpoint"
  data-refresh-ms="5000">
  <!-- updates with content from end point -->
</div>

About

Re-usable modules with limited scope and instantiation pattern

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published