Drv.js

組合式前端 MVVM / MVC / SPA 開發(fā)框架，基于 Director.js + Require.js + Vue.js 等組件構(gòu)建。

安裝

bower install drv.js --save

框架與依賴

• 路由器 & 控制器 - Director.js

• 模塊及文件加載器 - Require.js

• 視圖模型（雙向數(shù)據(jù)綁定）- Vue.js

• HTTP / RESTful 客戶端 - httpx.js

• 模板引擎 - tileTemplate.js

bower.json 的其他依賴項 vue-touch, vue-validator, jquery, requirejs-text, underscore, require-css, tiletemplate 默認(rèn)不加載，用戶需要使用時自行引入依賴才加載 . 如果你不需要這些組件，你可以編輯 bower.json 后更新或者執(zhí)行卸載命令 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) 開發(fā)。 ECMAScript 5 兼容性數(shù)據(jù)表 : http://kangax.github.io/compat-table/es5/.

應(yīng)用目錄結(jié)構(gòu)

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 選項參數(shù)

    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 中文開發(fā)指南 http://cn.vuejs.org/guide/

• Vue.js 中文 API 文檔 http://cn.vuejs.org/api/