Minimal standalone JS library for building TODO-like web applications
source link: https://www.tuicool.com/articles/hit/beUFnuj
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
ramd.js
Minimal standalone JS library for building TODO like web applications.
RAMD or Render - Add - Modify - Delete is minimal 0.65 kb library for making simple list projects. Everything is based on the "simplified virtual DOM" that is basically JavaScript Object listing the essential element properties. This Object acts like internal DB that can be stored locally or send to the server. The importance of the "virtualdom" vs DOM is not about the speed but rather ease of use and storage.
// simplified virtual DOM var someObjectName = { "1531563018024-9718829aa677": { "element": "li", "text": "Hello World", "cssStyle": "color:red", "id": "", "className": "hello" }, "1531563018029-47baba1f2315": { "element": "div", "text": "button", "cssStyle": "", "id": "", "className": "del" }
The Object method "1531563018024-9718829aa677" is Timestamp - Random Number. You can use the Timestamp to determine when the element was added.
What contains library?
- $ - Selector
- on - addEventListener
- Render and renderOne - render all and render one element
- Adding, modifying and deleting elements
- localStorage for storing the virtualdom
Making the super simple TODO :
// Just with few lines of code you can add and delete elements var el1 = {} on($("#bt"), 'click', function(e) { add(el1, $("#todo")[0], "li", $("#tx")[0].value); on($("li"), 'dblclick', function(e) { del(el1, this); }); });
Here is the Demo of the super simple TODO:
More complex TODO demo that saves the data in the browser
Download & Installation
You can use direct download or:
$ npm i ramd
or use CDN:
<script src="https://unpkg.com/[email protected]/src/ramd.min.js"></script>
License
This project is licensed under the MIT License
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK