组合式前端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后更新或者执行卸载命令boweruninstallvue-touchvue-validatorjqueryrequirejs-textunderscorerequire-csstiletemplate.
兼容性Firefox4.0+
Chrome7+
IE9+
Opera11.60+
Safari5.1.4+
Drv.js基于ES5(ECMAScript5)开发。ECMAScript5兼容性数据表:https://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)使用指南：https://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>视图模型指令参考资料：https://vuejs.org/api/directives.html
参考文档Director.jsAPIDocumentationhttps://github.com/flatiron/director#api-documentation
Require.jsAPIDocumentationhttps://requirejs.org/docs/api.html
Require.js中文API文档https://requirejs.cn/docs/api.html
Vue.jsGuidehttps://vuejs.org/guide/
Vue.jsAPIDocumentationhttps://vuejs.org/api/
Vue.js中文开发指南https://cn.vuejs.org/guide/
Vue.js中文API文档https://cn.vuejs.org/api/
评论