前端 MVVM 開發框架：Drv.js
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/