求适合初级程序员阅读源码的web前端框架


目的 :学习web前端框架的基本设计思想(如:MVVM架构,data-binding,路由)和基本需求实现(如远程数据请求,本地存储,cookie和session)。

想法 :想通过阅读源码来学习。

问题 :有没有 简单的框架 ,或者 推荐的学习方式

web 前端 框架

魔法G莓莓 11 years, 9 months ago

推荐PHP的CodeIgniter

envoyxi answered 11 years, 9 months ago

嘿嘿, 正好自己写了一个相关的, 叫 Drop . 题主感兴趣的话可以看看.

核心就一个文件, 然后是 TypeScript 写的, 方便跳转定义.

另外还有一个 Promise 实现, 叫 ThenFail .
还有一个手势库, 叫 Touch Delegate .

推荐的学习方式,,, 就是造轮子呀哈哈哈.

未来还会整理发一个数据同步的方案, 欢迎 follow. :)

Hikki光 answered 11 years, 9 months ago

自己写的算么?只有6kb,模块化

https://github.com/phodal/lettuce

Lettuce, Mobile Framework for romantic

Lettuce is a Small & Powerful Framework for Romantic.

Online demo http://lettuce.phodal.com/ .

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

用途: Romantic 前端学习

Gallery(展示)

应用场景

Lettuce Usage(用法)

Class(类)


 javascript


 var L = new lettuce();
var zero = function(){

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

Template(模板)


 javascript


 var L = new lettuce();
var data = {
    "title": "JavaScript Templates"
};

var result = L.Template.tmpl("

<h3>{%=o.title%}</h3>

\n!@#$%^&*()-=", data);

Router(路由)


 javascript


 var L = new lettuce();

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

Effect(效果)

淡出


 javascript


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

淡入


 javascript


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

Promise


 javascript


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

late(100).then(
).then(
).done();

Ajax


 javascript


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


 javascript


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

Single Page Application Example(单页面应用)

1.new a instance


 javascript


 var L = new lettuce();

2.define data


 javascript


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

3.create function for router


 javascript


 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


 javascript


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

湿太请自重 answered 11 years, 9 months ago

Your Answer