这个框架,我使用了动态加载JS的方式:
在这个页面中,我会对框架对JS代码的加载方式做一下说明。
下面是使用控件模块的示例:
//引入 menu模块和tab模块 BUI.use(['bui/menu','bui/tab'],function(Menu,Tab){ //TODO });
//引入框架页首页代码 BUI.use('common/main',function(){ }); //如果不需要在当前页面调用模块中的方法,则不需要回调函数 BUI.use('common/page');
此处的loader使用的是seajs的加载器,感兴趣的可以去查找更多内容
框架中使用的模块主要包括:
框架模块和业务代码模块的文件配置在 config.js中完成,文件路径在:assets/js/config-min.js
config.js配置了框架模块和业务模块的配置,参看代码:
var baseUrl = '', //网站的根目录地址,发布到线上时使用 jsBase = '/assets/js'; function getBaseUrl(){ //根据config.js的路径取baseUrl var scripts = $('script'), rst = ''; $.each(scripts,function(index,script){ var src = script.src, lastIndex = src.indexOf(jsBase + '/config'); if(lastIndex !== -1){ rst = src.substring(0,lastIndex); return false; } }); return rst; } if(!baseUrl){//如果未指定项目路径,进行匹配。 baseUrl = getBaseUrl(); } BUI.config({ alias : { 'common' : baseUrl + jsBase + '/common', 'module' : baseUrl + jsBase + '/module' }, map : [ //调试环境下使用'*.js',如果发布上线前,使用*-min.js去掉下面的map [/common\/(.*)-min.js/,'common/$1.js'], [/module\/(.*)-min.js/,'module/$1.js'] ] });
config文件非常重要,由于本地环境和开发环境有差异,所以这个文件需要进行切换修改。
baseUrl
: 这是最重要的参数,这个地址是项目的根目录地址,加载文件的起点。为了避免计算上线前应该切换成线上的地址。-min
为后缀的文件,但是在调试时非常不方便,所以我给加了map映射,上线前压缩所有文件后,请注释掉对应的map.这个文件带来不少麻烦,但是是现在我能想到的最好方式了,接下来我还会进行优化,达到不需要修改这个文件的目的。
我们做过很多项目,这个文件到没有带来很大问题,我们的方案是:
baseUrl
写成线上地址