Bones
Bones 是一个使用Node.js 构建于 Backbone框架上的MVC应用框架。它可以让大部分代码在服务器端和客户端共享。Bones 把 Backbone 路由控制象普通路径一样暴露出来,这样即使是非JavaScript代理也可以访问,当然也可以在客户端运行Backbone。项目主页是:https://github.com/developmentseed/bones,已经很长时间没有更新了,/ tilemill项目使用了该框架。本文参考 Bones的wiki 对其进行一个简略的学习,不深入研究,为后续分析tilemill源码结构打一个基础。有于Bones基于Backbone和expess,所以要先对这两个模块有必要的了解,网上参考资料很多。
环境搭建,创建应用
· 安装node和npm,现在windows版本node已经集成了npm
· 使用npm init创建package.json 文件(package.json文件必要)
· 把 bones 添加为依赖npm install安装(或者拷贝bones包到 ./node_modules/bones 目录用于开发)
注:由于c++扩展模块需要rebuild,在windows下安装需要python环境(2.5~3.0之间的版本),以及MSbuild.exe(安装VS2010包含)
· 在 index.js 中添加:
#!/usr/bin/env node require('bones').load(__dirname); if (!module.parent) { require('bones').start(); }
输入./index.js运行服务器。输出Started [Server Core:3000]说明安装成功。此时访问loclhost:3000下页面都是NotFound。
Bones 期望你用固定方式组织你的应用,并且把其中几个指定文件夹用作特定用途。
· /models – Backbone models
· /views – Backbone views
· /routers - Backbone 路由
· /controllers – Backbone 控制器
· /templates – Templates
· /commands – CLI 命令
· /servers – Servers and 中间件
mkdir {models,views,routers,controllers,templates,commands,servers}创建上述文件夹
除了 /templates/ 以外这些文件夹都是存放 .bones 文件的。这些文件除了包含一些预先定义的变量外它们就是包含JavaScript代码的普通文件。这样Bones可以方便的发送同一个文件到客户端运行。
每个文件夹中的一个文件只提供一个model/view/controller/template等。文件名应该和类名相同,必须大写!比如一个BlogPost的model应该定义在models文件夹下的BlogPost.bones文件中。
控制器
接下来就需要设置路由,Backbone应用程序通常只有一个controller保存着应用的所有路由信息,一般只需要在controllers中设置。在controllers文件夹下创建Default.bones,添加入代码
controller = Backbone.Controller.extend({});
几乎所有的
.bones
文件包含一个对应于其类型的变量:controllers包含变量controller,
routers包含变量router,models包含model,view包含view。上面的语句声明controller是默认控制器
Backbone.Controller
的子类。然后再controller中添加路由控制信息:
controller.prototype.routes = {
'/': 'home',
'/foo': 'home'
};
程序很简单,':'左边是可以访问的URI,右侧是对应的方法。在
controllers文件夹中创建Default.server.bones文件,在其中定义home方法。一般地,.server.bones文件运行在服务器端,这些文件中代码通常覆盖一些只在服务器端运行的方法。发送给客户的内容当然要在服务器端获取。
controllers['Default'].prototype.home = function(content) {
this.res.send('hello world');
}
重新运行node index.js,在locaohost:3000可以看到返回的信息。
视图
controllers['Default'].prototype.send = function(content) { this.res.send(new views.App({ 'content': content, }).render()); }
这次我们通过this.res.send()发送的内容是经过视图App渲染过的,这就就需要构建视图App类。与controller类似,我们新建两个文件App.bones和App.server.bones(仅在服务器端)。由于渲染要在服务器进行,所以render函数在App.server.bones中实现。App.bones中只包含view = Backbone.View.extend()实现继承Backbone的View。App.server.bones代码如下:
views['App'].prototype.render = function() { return templates.App({ content: this.options.content }); };
this.options是控制器传来的JSON数据,接下来视图去调用模板,把控制器传来的content参数交给模板。模板中<%=定义一个变量,传来的值会替换该变量,与ejs中功能一样。模板代码如下:
<html> <head> <meta charset='UTF-8'/> <title>Bones Todo</title> <script src='/assets/bones/all.js' type='text/javascript'></script> <script type='text/javascript'>$(Bones.start);</script> </head> <body> <div id='page'> <%= content %> </div> </body> </html>
‘hello world'替换了模板中的<%= content %>,然后视图在把替换后的代码交给控制器通过this.res.send给客户端。客户端就收到了替换后的HTML代码。
静态资源
bones的静态资源入CSS等,放在assets目录下。在assets目录下新建style.css,然后再模板app_中引入。外部访问assets中资源的方式是:/assets/<Plugin name>/<Path inside assets/>。Plugin name是package.json中指定的应用名字。我的应用名为bonesStudy,则引入style.css的代码为 <link rel="stylesheet" href= "/assets/bonesStudy /style.css"/>。
到此对bones的框架有个大致的了解了。