Drv.js 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Drv.js 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript
操作系统: 跨平台
收录时间: 2015-06-17
提 交 者: 叛道

Drv.js

组合式前端 MVVM / MVC / SPA 开发框架,基于 Director.js + Require.js + Vue.js 等组件构建。

安装

bower install drv.js --save

框架与依赖

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

参考文档

展开阅读全文

代码

Drv.js 的相关资讯

还没有任何资讯

Drv.js 的相关博客

[js]javascript索引

js&jq总结的还是挺棒的: http://www.cnblogs.com/yuanchenqi/articles/5980312.html http://www.cnblogs.com/yuanchenqi/art...

JavaScript(js)笔记

js注释 JavaScript注释与Java注释相同 // 单行注释 /* 多行注释 */ js五大基本类型:   number(数值型)、string(...

JS|JavaScript库

欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 问题...

js 封装 js

define(['jquery'], function($) { var orderSummary = { $el: $('.summary-totals'), updateUrl : '../checkout/orderSummar...

Javascript---Javascript简介

Javascript学习记录 读Javascript高级程序设计(3版)记录

浅谈JS之text/javascript和application/javascript

问题描述: JS在IE8以下浏览器运行异常 代码: <script>标签是这样子写的: <script type="application/javascript"> //...

javaScript(引入外部js/补充js)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"></script> <!--一般...

JS 有趣的JS

一、 var arr = []; for (var i = 0; i < 3; i++) { arr[i] = function() { console.log(i+'__') // 3 ...

JS(JavaScript)初始

day43 JS初识 今日内容: HTML: 文档结构 CSS: 修改文档的外观样式 JS:实现页面上的动态 JS文件的引入方式:   1.script标签内...

Drv.js 的相关问答

还没有任何问答,马上提问

评论 (3)

加载中
这是个好东东 #Drv.js#
2015/07/05 00:28
回复
举报
2015/07/08 23:21
回复
举报
mark #Drv.js#
2016/03/09 16:10
回复
举报
更多评论
3 评论
33 收藏
分享
返回顶部
顶部