DarkDOM
DarkDOM copied to clipboard
Design your own markup languages to build responsive cross-screen UI components
DarkDOM
- Design your own markup languages on a higher level of abstraction than HTML
- Build responsive cross-screen UI components
- Better separation of concerns
- Separate the presentation layer and business layer from the traditional content layer
Usages and Examples
-
Learning DarkDOM Visually
-
codepen
Components Library
CardKit is a mobile UI library provides a series of building blocks to help you build mobile web apps quickly and simply, or transfer entire website to mobile-first web app for touch devices.
CardKit building blocks are all use-html-as-configure-style (like Custom Elements, directive...) components built on DarkDOM and Moui.
AMD and OzJS
- DarkDOM can either be viewed as an independent library, or as a part of OzJS mirco-framework.
- It's wrapped as a number of mutually independent AMD (Asynchronous Module Definition) modules. You should use them with oz.js (or require.js or similar for handling dependencies).
- If you want to make them available for both other AMD code and traditional code based on global namespace. OzJS provides a mini define/require implementation to transform AMD module into traditional module pattern.
- See http://ozjs.org for details.
Get the code
Add to your project as new dependency
Or download directly from Github
Dependencies
- mo/lang/es5
- mo/lang/mix
- dollar (or other jQuery-compatible library + dollar/jquery)
API and Usage
DarkComponent API
var darkdom = require('darkdom');
var component = darkdom(options); // see component.set(options)
-
component.set(options)
--- options --
-
unique: false
-- -
enableSource: false
-- -
entireAsContent: false
-- -
sourceAsContent: false
-- -
render: function(data){ return '<...>...</...>'; }
---
data.state
-
data.content
-
data.component
-
data.context
-
-
- options --
-
component.state(stateName, attrName)
-- -
component.state(stateName, getter, setter)
-- -
component.state({ stateName: attrName, stateName: getter, stateName: [getter, setter], ... })
-- -
component.contain(childComponentName, otherComponent)
-- -
component.contain(childComponentName, function(childComponent){ ...;return childComponent; })
-- -
component.contain({ childComponentName: otherComponent, ... })
-- -
component.forward('eventType selector', eventName)
-- -
component.response(updateEvent, function(changes){ ...; return resolved; })
--- updateEvent -- "state:name", "component:name", "content", "remove"...
- changes --
- resolved --
-
component.component(childComponentName)
-- -
component.createGuard()
--
DarkGuard API
var guard = component.createGuard();
-
guard.state()
-- seecomponent.state
-
guard.component(childComponentName, function(childGuard){ /*spec*/ })
-- -
guard.component({ childComponentName: spec, ... })
-- -
guard.forward(eventName, 'eventType selector')
-- -
guard.forward(eventName, handler)
-- -
guard.source()
-- -
guard.watch(selector)
-- -
guard.watch(element)
-- -
guard.unwatch(selector)
-- -
guard.unwatch(element)
-- -
guard.unwatch()
-- -
guard.mount()
-- -
guard.unmount()
-- -
guard.update()
-- -
guard.render()
-- -
guard.stateGetter(name)
-- -
guard.stateSetter(name)
-- -
guard.createRoot()
-- -
guard.createSource()
--
DOM API
var root = $(selector)[0];
guard.watch(root);
-
root.darkGuard()
-- -
root.mountDarkDOM()
-- -
root.unmountDarkDOM()
-- -
root.resetDarkDOM()
-- -
root.getDarkState(name)
-- -
root.setDarkState(name, value, options)
--- options --
-
update: false
--
-
- options --
-
root.updateDarkStates()
-- -
root.updateDarkDOM()
-- -
root.feedDarkDOM(sourceData)
-- -
root.feedDarkDOM(function(sourceData){...})
-- -
root.responseDarkDOM(updateEvent, function(changes){...})
-- seecomponent.response
-
root.addEventListener(darkEvent, handler)
- darkEvent --
-
darkdom:willMount
-- -
darkdom:mounted
-- -
darkdom:willUpdate
-- -
darkdom:updated
-- -
darkdom:rendered
-- -
darkdom:removed
--
-
- darkEvent --
More coming soon...
More References
Release History
License
Copyright (c) 2010 - 2014 dexteryy
Licensed under the MIT license.