phodal / lettuce

Mobile Framework for Romantic. 简约的移动开发框架

Lettuce, Mobile Framework for romantic#

Lettuce is a Small & Powerful Framework for Romantic.

Lettuce 是一个轻巧的移动开发学习框架。

Lettuce Usage(用法)

Class(类)

var L = new lettuce();
var zero = function(){};
var sub = new L.Class(zero);

Template(模板)

var L = new lettuce();
var data = {
    "title": "JavaScript Templates"
};
var result = L.Template.tmpl("<h3>{%=o.title%}</h3>\n!@#$%^&*()-=", data);

Router(路由)

var L = new lettuce();
var check = L.Router
            .add(/#about/,log)
            .add(/#what/, log)
            .add(/#why/, log)
            .load();;

Effect(效果)

淡出

L.FX.fadeOut(document.getElementById('content'), {
    duration: 2000, complete: function () {
    }
});

淡入

L.FX.fadeIn(document.getElementById('content'), {
    duration: 2000, complete: function () {
    }
});

Promise

function late(n) {
    var L = new lettuce();
    var p = new L.Promise();
    return p;
}
late(100).then(
).then(
).done();

Ajax

lettuce.get('/bower.json', function(result){
    equal(result["name"], "lettuce");
    done();
})

lettuce.post("http://127.0.0.1:5000/some", "something", function(data){
    console.log(data)
})

AMD

RequireJS Config

require.config({
  baseUrl: 'app',
  paths: {
    lettuce: 'lib/lettuce'
  }
});

App.js

define(['lettuce'],
  function (Lettuce) {
    var lettuce = new Lettuce();
  };
});    

Single Page Application Example(单页面应用)

1.new a instance

var L = new lettuce();

2.define data

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

3.create function for router

var aboutPage = function(){
    var aboutPage = new L.SimpleView();
    var templates = L.Template.tmpl("<h3>{%=o.about%}</h3>", data);
    return aboutPage.render(templates, "results");
};
var whyPage = function(){
    var whyPage = new L.SimpleView();
    var templates = L.Template.tmpl("<h3>{%=o.why%}</h3>", data);
    return whyPage.render(templates, "results");
};

4.Add router

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

ShowCase

• 一个情人节礼物: http://valentine.phodal.com/
• 官网: http://lettuce.phodal.com/

License

© 2015 Phodal Huang. This code is distributed under the MIT license. See LICENSE.txt in this directory.

待我代码编成，娶你为妻可好

lettuce's Issues

引用的salt.js中的bug

salt.js中传一个页面不存在的id时会报错，代码如下：
return ((el.length < 2) ? el[0]: el);
改为
return ((el && el.length < 2) ? el[0]: el);

add small selector engine

add yeoman generator

generator lettuce project

Latest release of `lodash` 3.0.0 breaks the testcase

The latest build of lodash 3.0.0 breaks the functionality of this utility.
It gives the following error and freezes:

Warning: PhantomJS timed out, possibly due to an unfinished async spec. Used --force, continuing.

AMD support