Front

Backbone.js简单入门范例

11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要因为它简单、灵活,无论是富JS应用还是企业网站都用得上。相比React针对View和单向数据流的设计,Backbone更能体现MVC的思路,所以针对它写一篇入门范例,说明如下: 1. 结构上分4节,介绍Model/View/Collection,实现从远程获取数据显示到表格且修改删除; 2. 名为“范例”,所以代码为主,每节的第1段代码都是完整代码,复制粘贴就能用,每段代码都是基于前一段代码来写的,因此每段代码的新内容不会超过20行(大括号计算在内); 3. 每行代码没有注释,但重要内容之后有写具体的说明; 4. 开发环境是Chrome,使用github的API,这样用Chrome即使在本地路径(形如file://的路径)也能获取数据。 0. Introduction 几乎所有的框架都是在做两件事:一是帮你把代码写在正确的地方;二是帮你做一些脏活累活。Backbone实现一种清晰的MVC代码结构,解决了数据模型和视图映射的问题。虽然所有JS相关的项目都可以用,但Backbone最适合的还是这样一种场景:需要用JS生成大量的页面内容(HTML为主),用户跟页面元素有很多的交互行为。 Backbone对象有5个重要的函数,Model/Collection/View/Router/History。Router和History是针对Web应用程序的优化,建议先熟悉pushState的相关知识。入门阶段可以只了解Model/Collection/View。将Model视为核心,Collection是Model的集合,View是为了实现Model的改动在前端的反映。

Continue Reading
Front Python

用Django和Backbone.js生成表单

Django带了Forms框架,但如果不用Model Form,就要把在Model中定义的字段再写一遍。而且现在项目中都会用到前端工具包/框架,比如Bootstrap,于是as_table/as_ul/as_p就不能直接用了,每个字段都要手动写到HTML里。我之前是用django-crispy-forms这个模块来简化。 Backbone.js是一个基础框架,没有生成表单的功能,但有一个依赖于Backbone.js,很好用的Forms框架—— backbone-forms。 django-crispy-forms和backbone-forms做的事非常相近(至少render出的结果是一样的),没必要同时使用。理想的方案是Django搭配backbone-forms,后者从Django定义的Model/Object中获得Schema,生成表单。目前代码是跑通了,但比较折腾,是用Python的JS解析器,引入需要的JS库,执行从Django Model生成的JS代码,最后返回Form的HTML代码到前端。有些步骤还需要改进。这篇文章先分享:从Django的Model生成JS代码,传到前台,生成表单的方法。 Install 在html模板中引入需要的JS库(引用的都是在线的库,可能会出现无法访问的情况),bootstrap.js会自动给表单添加上Bootstrap的样式,要在backbone-forms.min.js后引入。在DOM之后加入script标签,之后得到一个Customer的object,在script标签内调用render_form方法,生成JS代码。

Continue Reading
Front

初学前端的MVC架构

Web应用的功能越来越强,Javascript代码也越来越多,大量的JS代码要以何种架构来组织就成了一个亟待解决的问题。老牌软件架构模式MVC(Model-View-Controller)就是一种相当不错的方案,虽然它定义不明确需要很多时间来思考如何组织,崇尚代码分离增加了调试难度,但毕竟脸熟(……),从用CakePHP的时候就接触过这个概念,以我能理解的方式描述就是:Models用来处理数据,View将处理结果呈现给用户,Controller用来连接这两者。所以一个Web应用的流程通常是这样的: 1. 用户在View上进行操作——比如在文本框输入数值或是点击按钮 2. Controller处理这个动作 3. Controller通过Model对数据进行增删改查,将其传递到View 4. View将数据展示给用户 以上描述来自Javascript Web Applications一书,其中有用MVC组织JS代码的具体方法。如果想偷懒的话,也有一些现成的JS框架来做这件事。说到JS框架可能最先想到的是jQuery,这类MVC框架和jQuery解决的问题不同,jQuery主要用来对页面元素进行操作上,比如我要移动一个按钮,或是将某个按钮设置为隐藏。而前端MVC框架除了将代码合理的组织以外,操作上也不是侧重于设置一个动作,当触发时进行某些处理这种方式。而是绑定Model,当Model改变时,View接收到通知,重新渲染。不需要手动指定页面元素更新HTML,改变Model时直接改变View。

Continue Reading