Standard JavaScript functions and polyfills library
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
_helpers
docs
polyfills
test
.editorconfig
.eslintignore
.eslintrc
.gitattributes
.gitignore
.htaccess
.travis.yml
Calendar.js
Cookie.js
EventHandler.js
GeoLocation.js
GitHub.js
Gravatar.js
LICENSE
Notification.js
README.md
SchemaData.js
SchemaNode.js
SchemaTemplate.js
actions.js
analytics.js
article.json
asyncDialog.js
credit-card-validator.js
dataHandlers.js
deprefixer.js
esQuery.js
fetch.json
fileupload.js
functions.js
json_response.js
kbd_shortcuts.js
keybase.js
math-shims.js
math.js
md5.js
mutations.js
openweathermap.js
package-lock.json
package.json
patterns.js
polyfills.js
popstate.js
share-config.js
shims.js
supports.js
webShareApi.js
wysiwyg.js

README.md

std-js


Build Status license GitHub issues GitHub forks GitHub release

Join the chat at https://gitter.im/shgysk8zer0/std-js Twitter Twitter Follow

A JavaScript library for making front-end development sane!

Navigation

The purpose of this library is not so much to provide alternatives to jQuery, etc, but rather to provide polyfills and wrappers to native JavaScript, enabling use of modern JavaScript with less headache over browser support and implementation.
It was, in part, influenced by the syntax of jQuery, but its purpose is different in that this places little emphasis on style and animation. Rather, its emphasis is on asynchronous event handling though Mutation Observers and Promises. The "$" function can be thought of as a NodeList converted into an array, with a few Element methods that will be run on each element, as well as event handlers (e.g. $('a').click()).

Installing

Simply clone or add as a submodule:

git submodule add git://github.com/shgysk8zer0/std-js.git path/to/use

Contact Developer

Exporting

// exports.js
// Export class/function/constant
export function myFunc() {
  // Function body
}

function notExported() {
  // Function body
}

export function unused() {
  // Function body
}

export class MyClass {
  // Class body
}

export const FOO = 'bar';
// Spiffy.js
// Default export (can only specify on default and should be only export)
export default class Spiffy {
  // Class body
}

Importing

// shim.js
// Does not export anything.
if (! ('HTMLDialogElement' in window)) {
  Object.defineProperty(HTMLElement.prototype, 'open', {
    get: function() {
      return this.hasAttribute('open');
    },
    set: function(open) {
      if (open) {
        this.setAttribute('open', '');
      } else {
        this.removeAttribute('open');
		this.dispatchEvent(new Event('close'));
      }
    }
  });
}
// main.js
// Import and run shim.js
import './shim.js';

// Import specific functions/classes/objects/etc.
// Must be valid relative or absolute path, so relative paths
// must begin with "./" or "../" and must contain extension.
// importing `as` aliases an import, allowing renaming from the name exported
import {myFunc, MyClass as CustomClass} from './exports.js';

// Or import everything into an object / namespace
import * as exports from './exports.js';
/**
 * const exports = {myFunc, unused, MyClass, FOO};
 */

// Import default (`export default`)
import Spiffy from './Spiffy.js';

// Import everything from a remote script
import 'https://cdn.polyfill.io/v2/polyfill.min.js';

Example

import {$, wait} from './functions.js';
import handleJSON from './json_response.js';
import * as mutations from './mutations.js';

// Note that almost all DOM operations are async
$(document).ready(async () => {
  $('[data-remove]').click(mutations.remove);
  $('[data-show-modal]').click(mutations.showModal);
  $(document.body).watch(mutations.events, mutations.options, mutations.filter);

  // Use promises
  $('#container p').some(p => p.textContent.startsWith('Lorem impsum')).then(ipsum => {
    if (ipsum) {
      $('.no-ipum').hide();
    }
  });
  // Or `await` results (Here, to search nodes by their text)
  // In this example, `found` would be a regular `Element`
  const found = await $('div').find(el => el.textContent.startsWith('Delete me'));
  if (found) {
	  found.remove();
  }

  document.querySelector('.someClass').textContent = 'baz ';
  // Will most likely result in textContent of "baz foo bar"
}, {once: true});