Mobile Framework: Lettuce, a simple but not simple mobile development framework

Mobile Framework: Lettuce, a simple but not simple mobile development framework

Lettuce is a small and powerful mobile development framework.

Online demo: http://phodal.github.io/lettuce.

Example

1. Create a new instance

  1. var L = new lettuce();

2. Define the data

  1. var data = {
  2. about: "Template" ,
  3. what: "This about A Mobile Framework For Romantic" ,
  4. why: "Why is a new Framework"  
  5. };

3. Create router function

  1. function about() {
  2. var result = L.tmpl( "<h3>{%=o.about%}</h3>" , data);
  3. document.getElementById( "results" ).innerHTML = result;
  4. };
  5.  
  6. function what() {
  7. var result = L.tmpl( "<h3>{%=o.what%}</h3>" , data);
  8. document.getElementById( "results" ).innerHTML = result;
  9. }
  10.  
  11. function why() {
  12. var result = L.tmpl( "<h3>{%=o.why%}</h3>" , data);
  13. document.getElementById( "results" ).innerHTML = result;
  14. }

4. Add a router

  1. L.Router
  2. .add(/#about/, about)
  3. .add(/#what/, what)
  4. .add(/#why/, why)
  5. .load();

process

Done

  • Template
  • Router
  • Ajax
  • Class
  • Promises
  • Event

On Going

  • Model

Simple View

  1. var pageView = function(){};
  2. pageView.prototype = {
  3. init:function(){
  4. var result = L.tmpl( "<h3>" + this .message + "</h3>" , data);
  5. document.getElementById( "results" ).innerHTML = result;
  6. }
  7. };
  8.  
  9. var about = new L.Class(pageView);
  10. about.prototype.message = data.about;
  11.  
  12. var what = new L.Class(pageView);
  13. what.prototype.message = data.what;
  14.  
  15. var why = new L.Class(pageView);
  16. why.prototype.message = data.why;

license

This code is released under the MIT license. See license.txt in this directory .

github: https://github.com/phodal/lettuce

© 2015 Phodal Huang.

<<:  WeChat opens 11 types of interfaces: developers can build real web applications based on WeChat

>>:  Three options for developing mobile apps: native, HTML5, or hybrid

Recommend

“Car keys” come first, will Apple cars be far behind?

In the past two days, Apple's iOS 13 beta sys...

A complete set of APP message push mechanism!

How does the app implement a push mechanism? Whic...

Information flow advertising optimization driven by data monitoring!

In future advertising , the selection of informat...

Tik Tok movie editing tutorial, how to edit movie videos on Tik Tok?

Hello everyone, I am Teacher Achao. Today I will ...

Can I become a great programmer if I learn programming halfway?

Let’s not talk about chicken soup, let’s talk abo...

Operational planning for a product: the focus is on ideas, not writing plans

To put it simply, if you are given a product, how...

9 relatively practical WeChat group tips, the last one is little known

1. Create a group with only yourself Sometimes we...