前端 MVVM 开发框架：Drv.js

jopen 9年前

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

参考文档

项目主页：http://www.open-open.com/lib/view/home/1435309006357