Drv.js前端 MVVM 开发框架
Drv.js
组合式前端 MVVM / MVC / SPA 开发框架，基于 Director.js + Require.js + Vue.js 等组件构建。
安装
bower install drv.js --save
框架与依赖
-
路由器 & 控制器 - Director.js
-
模块及文件加载器 - Require.js
-
视图模型（双向数据绑定）- Vue.js
-
HTTP / RESTful 客户端 - httpx.js
-
模板引擎 - tileTemplate.js
bower.json 的其他依赖项 vue-touch, vue-validator, jquery, requirejs-text, underscore, require-css, tiletemplate 默认不加载，用户需要使用时自行引入依赖才加载 . 如果你不需要这些组件，你可以编辑 bower.json 后更新或者执行卸载命令 bower uninstall vue-touch vue-validator jquery requirejs-text underscore require-css tiletemplate.
兼容性
-
Firefox 4.0+
-
Chrome 7+
-
IE 9+
-
Opera 11.60+
-
Safari 5.1.4+
Drv.js 基于 ES5 (ECMAScript 5) 开发。 ECMAScript 5 兼容性数据表 : http://kangax.github.io/compat-table/es5/.
应用目录结构
you-app/
bower_components/
controllers/
configs/
images/
views/
css/
lib/
...
bower.json
index.html
main.js
使用方法
index.html :
<script src="./bower_components/requirejs/require.js"></script>
<script drv-main="./main" src="./bower_components/drv.js/dist/drv.min.js"></script>
入口文件 main.js :
define(["./configs/routes"], function(routes) {
var app = Drv.App(); // or Drv.App({your-configs ...});
app.run(routes);
});
配置项参考 console.log(Drv.defaults); 或者 console.log(app.settings);
路由配置文件 routes.js :
define({
"/" : function() {}, // Director.js 原有的方式
"/books" : "book/index", // 使用控制器自动加载 you-app/controllers/book/index.js
"/books/:id" : "book/view",
"/author" : "author",
"/about" : "about"
});
路由 (Director.js) API 文档 https://github.com/flatiron/director#api-documentation
控制器文件 book/view.js:
// 你可以使用 Require.js css / text 插件来加载
define(["your-deps"], function() {
var app = Drv.getApp(); // 获取 App 单例对象
var router = app.router; // router.getRoute(), router.getPath()
var params = router.$params; // Vue ViewModel 选项参数
var vmOptions = {
el : "#layout",
data : {
id : params[0],
name : "Drv.js" },
ready : function() {
console.log("Vue.$http", this.$http);
},
methods : {
clickDiv : function(e) {
console.log(e.target);
}
}
};
// 渲染视图文件 you-app/views/index.html
app.render("index", vmOptions);
});
视图模型(Vue.js) 使用指南：http://cn.vuejs.org/guide/
视图文件 views/index.html:
<h1>View index.html {{name}} id={{id}}</h1>
<input v-model="name" />
<div style="width:100px;height:100px;background:green;color:#fff;" v-on="click:clickDiv">Drv.js</div>
视图模型指令参考资料： http://vuejs.org/api/directives.html
参考文档
-
Director.js API Documentation https://github.com/flatiron/director#api-documentation
-
Require.js API Documentation http://requirejs.org/docs/api.html
-
Require.js 中文 API 文档 http://requirejs.cn/docs/api.html
-
Vue.js Guide http://vuejs.org/guide/
-
Vue.js API Documentation http://vuejs.org/api/
-
Vue.js 中文开发指南 http://cn.vuejs.org/guide/
-
Vue.js 中文 API 文档 http://cn.vuejs.org/api/