前端框架可视化工具 BrowserRequire-ViewMap

MIT
JavaScript
跨平台
2015-03-25
pikay

BrowserRequire-ViewMap 是前端模块化框架可视化工具,其本身也是基于 BrowserRequire 开发的。

BrowserRequire-ViewMap 插件是 BrowserRequire的一个插件,可从图形上查看文件间的依赖关系(模块化文件与非模块化文件)。

BrowserRequire旨在做更适合web前端开发的模块化框架。

演示地址: http://viewmap.oschina.mopaas.com/tools/ViewMap/

使用方法:只需要在BrowserRequire框架加载完后引入即可。

<script src="br.js"></script> 
<script src="br-viewMap.js"></script>

也可以使用BrowserRequire异步添加

require('br-viewMap.js');

关于BrowserRequire框架的详细介绍地址:点击这里

https://github.com/kirakiray/BrowserRequire

BrowserRequire可以很灵活的处理模块与非模块间的关系,BrowserRequire更像是requirejs和LABjs的融合体,拥有它们的优点,组合的功能让你抛弃shim操作,核心代码只有7kb左右。

//main 
require('moduleA','moduleB').ready = function(a,b){
    console.log(a); 
    //I am A     
    console.log(b()); 
    //I am B
}
//moduleA.js 
define(function(){     
    return 'I am A';
});
//moduleB.js 
define(function(){     
    var b = 'I am B';     
    return function(){         
        return b;
    };
});

使用起来像requirejs,但响应操作更像DOM ready的方式。

也能很好处理非模块文件间的依赖。

require('jquery').require('jquery-widget').require('jquery-widget-sideBar').ready = function(){
    console.log('sideBar is succeed!');
}

这样会依次序的加载三个文件,并且整个过程都是异步加载的,不会阻塞页面。

模块间的依赖依靠require方法和object

//moduleA 
define(function(require){     
    var reObj = {
        value : "I am A"
    };
    require('moduleB').ready = function(b){
        reObj.B = b;
    };     
    return reObj;
})
//moduleB.js 
define(function(){
     return 'I am B';
});

这样的话moduleA会在moduleB加载完成后才引入。

也能实现模块与非模块文件的依赖。

define(function(require){
    var reObj = {};
    require('jquery').ready = function(){
        var val;
        $.each........(some code need jquery)
        reObj.value = val
    }     
    return reObj;
})

BrowserRequire会确保文件只加载一次,这在web前端多人合作开发中是非常有用的。

也有丰富的响应事件设置:
loading:加载组合中的某个加载完成会触发loading事件,并返回event(附带加载成功的文件信息)
error:加载失败的响应;

它还能实现更复杂的加载需求,例如进行拓扑状的加载文件或模块,可以定制性的针对需求进行取舍(例如应对手机端极慢网的移动2g网速方案等)

同时能兼容所有主流浏览器(经测试在chrome/firefox/opera/IE/UC/WeiChat自带浏览器等),能兼容到IE5.5+等,只需要载入兼容插件即可;(低版本ie兼容插件和主框架分离,按需求的添加插件,因为开发手机端web是不需要兼容低版本ie的)

关于BrowserRequire的使用文档,请查看:https://github.com/kirakiray/BrowserRequire

关于viewMap插件,请查看:http://git.oschina.net/pikay/BrowserRequire-ViewMap

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

GEF-------------流布局

在GMF帮我们生成的应用程序里,画布(Canvas)的布局缺省是使用XYLayout的,这种布局适合UML类图、流程图等应用,但并不适合序列图或表格这类应用。而且目前GMF的.gmfgraph模型里没有提供为整...

2014/02/12 16:13
32
0
GMF Labels

原文地址:http://wiki.eclipse.org/GMF_Labels Labels represent pieces of text possibly associated with icons on diagram surface. Text may be edited using inplace facility. There ...

2014/12/25 23:12
12
0
Android 官方文档之Activity和Task

什么知识,看官方的API是最好的了。但是鉴于很多人英语不好,便转载了这篇文章,翻译的非常好了。搞不懂Activity声明周期,和程序框架设计的,最好看一看。

2014/05/27 10:19
23
0

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部