modularorg / Modularjs
Licence: mit
△ Dead simple modular JavaScript framework for ES modules.
Stars: ✭ 52
Programming Languages
javascript
184084 projects - #8 most used programming language
es6
455 projects
Projects that are alternatives of or similar to Modularjs
Ignition Go
Bootstrap4 /Codeigniter 3 Modular (HMVC) App Building Framework - to build enterprise class web applications... Versions: CodeIgniter 3.1.9 AdminLTE 3.4 Bootstrap 4.5.0
Stars: ✭ 166 (+219.23%)
Mutual labels: framework, modular
Breko Hub
Babel React Koa Hot Universal Boilerplate
Stars: ✭ 145 (+178.85%)
Mutual labels: babel, modular
Oxide
Old repository for the Oxide mod. See individual repositories for updates
Stars: ✭ 173 (+232.69%)
Mutual labels: framework, modular
Tinypart
TinyPart is an iOS modularization framework implemented by Ojective-C. It also supports URL-routing and inter-module communication. TinyPart是一个由Objective-C编写的面向协议的iOS模块化框架,同时它还支持URL路由和模块间通信机制。
Stars: ✭ 120 (+130.77%)
Mutual labels: framework, modular
Tentcss
🌿 A CSS survival kit. Includes only the essentials to make camp.
Stars: ✭ 400 (+669.23%)
Mutual labels: framework, modular
Http
An opinionated framework for scalable web 🌎
Stars: ✭ 136 (+161.54%)
Mutual labels: framework, modular
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+2542.31%)
Mutual labels: babel, framework
Nodefony Starter
Nodefony Starter Node.js Framework
Stars: ✭ 95 (+82.69%)
Mutual labels: babel, framework
Plato
❤️ a Boilerplate for [mobile] SPAs use vue, vuex, vue-router
Stars: ✭ 283 (+444.23%)
Mutual labels: framework, modular
Liblava
🌋 A modern and easy-to-use library for the Vulkan API
Stars: ✭ 275 (+428.85%)
Mutual labels: framework, modular
Skeleton
A ready-to-use CodeIgniter skeleton with tons of new features and a whole new concept of hooks (actions and filters) as well as a ready-to-use and application-free themes and plugins system. Facebook Page: http://bit.ly/2oHzpxC | Facebook Group: http://bit.ly/2o3KOrA. Help me carry on making more free stuff → http://bit.ly/2ppNujE ←
Stars: ✭ 74 (+42.31%)
Mutual labels: framework, modular
Whs.js
🚀 🌪 Super-fast 3D framework for Web Applications 🥇 & Games 🎮. Based on Three.js
Stars: ✭ 5,685 (+10832.69%)
Mutual labels: framework, modular
Komada
Komada: Croatian for `pieces`, is a modular bot system including reloading modules and easy to use custom commands.
Stars: ✭ 67 (+28.85%)
Mutual labels: framework, modular
Gf
GoFrame is a modular, powerful, high-performance and enterprise-class application development framework of Golang.
Stars: ✭ 6,501 (+12401.92%)
Mutual labels: framework, modular
Webmiddle
Node.js framework for modular web scraping and data extraction
Stars: ✭ 13 (-75%)
Mutual labels: framework, modular
Home Assistant Js
🐝 JavaScript implementation of the Home Assistant API using NuclearJS
Stars: ✭ 50 (-3.85%)
Mutual labels: framework
Vsalert
An drop-in replacement for UIAlertController with more power and better looks.
Stars: ✭ 48 (-7.69%)
Mutual labels: framework
modularJS
Dead simple modular JavaScript framework for ES modules.
Installation
npm install modujs
Why
Just what's missing from JavaScript to seamlessly work in a modular way with the DOM and ES modules.
- Automatically init visible modules.
- Easily call other modules methods.
- Quickly set scoped events with delegation.
- Simply select DOM elements scoped in their module.
Usage
Main file
import modular from 'modujs';
import * as modules from './modules';
const app = new modular({
modules: modules
});
app.init(app);
Module example
<div data-module-example>
<h2>Example</h2>
<button data-example="button">Button</button>
</div>
import { module } from 'modujs';
export default class extends module {
constructor(m) {
super(m);
this.events = {
click: {
button: 'doSomething'
}
}
}
doSomething() {
console.log('Hello world');
}
}
Modules file
export {default as example} from './modules/example';
Objects
Object | Description | Example |
---|---|---|
this.el |
The module element. | this.el.classList.add('is-open') |
this.events |
The module events. | this.events = { click: 'open' } |
Methods
Method | Description | Example |
---|---|---|
this.$('query'[, 'context']) |
Module scoped query selector. | this.$('dropdown', e.currentTarget) |
this.parent('name', 'context') |
Module scoped parent selector. | this.parent('item', e.currentTarget) |
this.call('function', arg, 'module'[, 'id']) |
Call another module method. | this.call('scrollTo', section, 'scroll', 'main') |
this.on('event', 'module', function[, 'id']) |
Listen to another module event. | this.on('select', 'Select', this.changeSomething, 'first') |
this.getData('name'[, 'context']) |
Get module or target data attribute. | this.getData('name', e.currentTarget) |
this.setData('name', 'value'[, 'context']) |
Set module or target data attribute. | this.setData('name', 'value', e.currentTarget) |
Custom methods
Method | Description |
---|---|
init() { [...] } |
Automatically called on app init. Use this instead of the constructor , if you want to use the methods above. |
destroy() { [...] } |
Automatically called on app destroy. Use this if you need to destroy anything specific. The events are already destroyed. |
App methods
Method | Description |
---|---|
this.call('init', 'app') |
Init all modules. |
this.call('update', scope, 'app') |
Update scoped modules. |
this.call('destroy'[, scope], 'app') |
Destroy all or scoped modules. |
Examples
Modal example
<div data-module-modal="one">
<h2 data-modal="text">Modal</h2>
<button data-modal="accept">Ok</button>
<button data-modal="cancel">Cancel</button>
</div>
import { module } from 'modujs';
export default class extends module {
constructor(m) {
super(m);
this.events = {
click: {
accept: 'accept',
cancel: 'close'
}
}
}
init() { // Init is called automatically
this.open();
}
open() {
this.el.classlist.add('is-open');
}
accept() {
this.$('text').textContent = 'Thank you!';
this.$('accept').style.display = 'none';
this.$('cancel').textContent = 'Close';
}
close() {
this.el.classlist.remove('is-open');
}
}
Call example
<div data-module-example>
<button data-example="one">One</button>
<button data-example="all">All</button>
</div>
import { module } from 'modujs';
export default class extends module {
constructor(m) {
super(m);
this.events = {
click: {
one: 'openSpecificModal',
all: 'openAllModals'
}
}
}
openSpecificModal() {
this.call('open', false, 'modal', 'one');
}
openAllModals() {
this.call('open', 'modal');
}
}
Accordion example
<div data-module-accordion data-accordion-open="true">
<section data-accordion="section">
<header data-accordion="header">
<h2>Title</h2>
</header>
<div data-accordion="main">
<p>Content</p>
</div>
</section>
<section data-accordion="section">
<header data-accordion="header">
<h2>Title</h2>
</header>
<div data-accordion="main">
<p>Content</p>
</div>
</section>
</div>
import { module } from 'modujs';
export default class extends module {
constructor(m) {
super(m);
this.events = {
click: {
header: 'toggleSection'
}
}
}
init() {
if (this.getData('open')) {
this.$('section')[0].classList.add('is-open');
}
}
toggleSection(e) {
const target = e.currentTarget;
const section = this.parent('section', target);
const main = this.$('main', target);
if (section.classList.contains('is-open')) {
section.classList.remove('is-open');
} else {
this.$('section.is-open').classList.remove('is-open');
section.classList.add('is-open');
this.call('scrollto', section, 'scroll', 'main');
}
}
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].