Mobile Framework:簡約不簡單的移動開發架構Lettuce

Mobile Framework:簡約不簡單的移動開發架構Lettuce

Lettuce是一個小巧而有力的移動開發架構。

線上demo：http://phodal.github.io/lettuce.

樣本

1.建立執行個體

 

  
var L = new lettuce(); 
 

2.定義資料

 

  
var data = { 
  
    about: "Template", 
  
    what: "This about A Mobile Framework For Romantic", 
  
    why: "Why is a new Framework" 
  
}; 
 

3.建立router功能

 

  
function about() { 
  
    var result = L.tmpl("<h3>{%=o.about%}</h3>", data); 
  
    document.getElementById("results").innerHTML = result; 
  
}; 
  
 
  
function what() { 
  
    var result = L.tmpl("<h3>{%=o.what%}</h3>", data); 
  
    document.getElementById("results").innerHTML = result; 
  
} 
  
 
  
function why() { 
  
    var result = L.tmpl("<h3>{%=o.why%}</h3>", data); 
  
    document.getElementById("results").innerHTML = result; 
  
} 
 

4.添加router

 

  
L.Router 
  
    .add(/#about/, about) 
  
    .add(/#what/, what) 
  
    .add(/#why/, why) 
  
    .load(); 
 

過程Done

• Template
• Router
• Ajax
• Class
• Promise
• Event

On Going

• Model

簡單視圖

 

  
var pageView = function(){}; 
  
pageView.prototype = { 
  
    init:function(){ 
  
        var result = L.tmpl("<h3>" + this.message + "</h3>", data); 
  
        document.getElementById("results").innerHTML = result; 
  
    } 
  
}; 
  
 
  
var about = new L.Class(pageView); 
  
about.prototype.message = data.about; 
  
 
  
var what = new L.Class(pageView); 
  
what.prototype.message = data.what; 
  
 
  
var why = new L.Class(pageView); 
  
why.prototype.message = data.why; 
 

許可

此代碼是在MIT許可下發布。看到這個目錄license.txt。

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

© 2015 Phodal Huang.