简介

这个框架,我使用了动态加载JS的方式:

  • 优点:
    1. 页面清洁,资源易于管理。
    2. 易于扩展,模块复用性强。
  • 缺点:
    1. 需要理解加载方式。
    2. 需要配置加载路径。

在这个页面中,我会对框架对JS代码的加载方式做一下说明。

代码示例

下面是使用控件模块的示例:

//引入 menu模块和tab模块
BUI.use(['bui/menu','bui/tab'],function(Menu,Tab){
  //TODO
});
        
//引入框架页首页代码
BUI.use('common/main',function(){
  
});
//如果不需要在当前页面调用模块中的方法,则不需要回调函数
BUI.use('common/page');
        

此处的loader使用的是seajs的加载器,感兴趣的可以去查找更多内容

本框架中的模块

框架中使用的模块主要包括:

  1. bui控件库模块
  2. 框架模块:common,参考资源文件结构
  3. 业务代码模块:module,参考资源文件结构

框架模块和业务代码模块的文件配置在 config.js中完成,文件路径在:assets/js/config-min.js

config.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文件非常重要,由于本地环境和开发环境有差异,所以这个文件需要进行切换修改。

  1. baseUrl: 这是最重要的参数,这个地址是项目的根目录地址,加载文件的起点。为了避免计算上线前应该切换成线上的地址。
  2. 压缩JS文件:loader默认加载的是压缩的以-min为后缀的文件,但是在调试时非常不方便,所以我给加了map映射,上线前压缩所有文件后,请注释掉对应的map.

这个文件带来不少麻烦,但是是现在我能想到的最好方式了,接下来我还会进行优化,达到不需要修改这个文件的目的。

最佳实践

我们做过很多项目,这个文件到没有带来很大问题,我们的方案是:

  1. config文件的引入地址,直接写成线上地址。
  2. baseUrl写成线上地址
  3. 去除map
  4. 使用ucool代理调试开发JS,对ucool感兴趣的可以联系:张挺(旺旺号)