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

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

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

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

阅读 3.7k
评论
    3 个回答
    • 7.8k

    自己写的算么?只有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(类)

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

    Template(模板)

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

    Router(路由)

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

    Effect(效果)

    淡出

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

    淡入

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

    Promise

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

    Ajax

    javascriptlettuce.get('/bower.json', function(result){
        equal(result["name"], "lettuce");
        done();
    })
    
    javascriptlettuce.post("http://127.0.0.1:5000/some", "something", function(data){
        console.log(data)
    })
    

    Single Page Application Example(单页面应用)

    1.new a instance

    javascriptvar L = new lettuce();
    

    2.define data

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

    3.create function for router

    javascriptvar 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

    javascriptL.Router
        .add(/#about/, about)
        .add(/#why/, why)
        .load();
    
      相似问题
      推荐文章