金智ubase 应用快速开发框架

ubase 框架做了些什么？

一个模块至少存在 目录名.js 目录名BS.js 目录名IndexPage.html 三个文件，如需定制样式可以自行添加 目录名.css，模板文件的命名规则：目录名+自定义名称+Page.html

页面模块定义

使用define();来自定义需要的模块，模块名即文件名，通过require（）加载文件名称达到加载该模块的目的，这样当文件的路径或者名称发生变化，模块内部的代码无需大的变动。

//自定义模块
define( function (require, exports, module) {
    var viewConfig ={
        //自定义入口方法
        initialize:function(){
            //this来自appcore.js中的baseView模块，
            //带有baseView定义的属性和方法，如
            //$rootElement:[selector: "body>main"]
            //_subView: []
            //subView: {}
            //_bindedEventElement: []
            //_routerParams: []
            //_originUserConfig：当前页面的所有方法
             var self = this;
        }
    };
    return viewConfig;
});


/**initialize作为入口方法，由baseView中的baseView函数进入*/
 function baseView(config, path) {
        var app = new viewCore();
        if (_lastView) {
            clearSubViewInfo(_lastView);
            if (typeof _lastView.destroy === 'function') {
                _lastView.destroy();
            }
        }
        _lastView = app;
        app._routerParams = path;
        $.extend(app, config);
        app._originUserConfig = config;
        availableElement.off();
        initEventMap(app);
        app.initialize();//此处进入当前路径的文件名代表的模块，在模块中渲染出整个页面
        app._coreBindEvent();
    }

事件绑定方式

模块中的所有事件处理都通过eventMap来维护，eventMap中key为jquery选择器，value为绑定的事件处理函数，默认绑定的是click事件，如需绑定其他事件，可以在key后@相应的事件. 在事件处理函数中可通过event.currentTarget获取到对应的dom元素

eventMap: function() {
    return {
        "#retirementInfoTable .j-row-edit": this.editCb,
        "#advancedQueryPlaceholder@search": this.searchCb,
        ".index-tip@mouseover": this.mouseoverCb
    };
},

editCb: function(event){
  var wid = $(event.currentTarget).attr('data-x-wid');//通过这种方式可以给事件传递参数
}

异步数据获取方式

目录名BS.js主要负责与后端API交互并进行数据处理, 异步请求使用jquery的Deferred对象做链式处理。

getStudentInfo: function(params) {
    var def = $.Deferred();

    utils.doAjax(bs.api.studentInfoUrl, null, 'get').done(function(res) {
        // 这里可以对返回的数据做些处理
        def.resolve(res);
    }).fail(function(res) {
        def.reject(res);
    });

    return def.promise();
}

路由跳转

utils.goto实现路由跳转，第一个参数为跳转后的路由，如果需要在新的tab页打开，则第二个参数置为true

utils.goto('module1/detail/1', true);

页脚位置置底

在页面中插入html的时候，如果需要重置页面的页脚位置，可以将html方法的第二个参数置为true

this.$rootElement.html(mainView.render(), true);

路由参数

路由参数采用restful风格，一般在路由跳转或新开浏览器tab页的时候使用

initialize: function() {
    var routeParams = this.getRouterParams();
    var type = routeParams[0];
    var id = routeParams[1];

    switch (type) {
        case 'preview':
            this.initPreviewPage(id);
            break;
        case 'check':
            this.initCheckPage(id);
            break;
        default:
            this.initIndexPage();
    }
},

ubase路由配置规则：

1. 路由地址与文件地址一一对应，如：

   “tblbsz”对应文件地址 → modules/tblbzs （填报类别设置）

   “sqsh”对应文件地址 → modules/sqsh （申请审核）

   “sqsh/cg”对应文件地址 → modules/sqsh/cg （出国申请审核）

2. 同类别路由（即前缀）设置不允许出现混用现象，如：

   “申请审核”、“校办申请审核”、“出国申请审核”、“回国申请审核”

   以上同类别模块路由可设置为：

   “sqsh”、“sqshxb”、“sqshcg”、“sqshhg” 或者 “sqsh”、“sqsh/xb”、“sqsh/cg”、“sqsh/hg”

   禁止同一类别模块，既有全名分类又有二级分类混用现象出现，如：“sqsh”、“sqsh/xb”、“sqshcg”、“sqsh/hg”

子页面

纸质弹窗、步骤条中的每个step以及业务上独立的页面需要写入单独的子页面文件夹（包括js,bs,css,html，如果有都要独立），如果子页面中还包含子页面，则在子页面的文件夹中再嵌套其子页面的文件夹。

子页面在使用前需要通过pushSubView注册，子页面使用的入口方法为initialize方法, 子页面中有属性parent指向主页面。

公共页面

如果某个子页面在多个模块中都有用到，则需要将其放到public/commonpage/文件夹下，然后在需要使用该子页面的模块中require该子页面即可。

echarts图表

统一通过utils.getEcharts()、utils.getEcharts3()、utils.getEcharts4()获取echarts对象，然后做后续图表初始化

utils.getEcharts().done(function(ec) {
    var myChart = ec.init($obj);//$obj为原生dom对象
    myChart.setOption(option);
});

utils方法列表

• utils.loadCompiledPage('indexPage', require) // 加载html模版 返回的为模版编译后的对象（第二个参数设置为require时， html使用的是相对当前js的相对路径）
• utils.getEcharts() // 详见上面echarts图表
• utils.fetch(options) // ajax请求方法
• utils.dialog(options) // 警告提示框
• utils.window(options) // 对话框
• utils.getUserParams() // 后去url后面的参数
• utils.getConfig(key) // 获取config.js中的参数值
• utils.go(path, blank) // 路由调转 当blank为true时在新tab页打开
• utils.refreshButtonAuth() // 刷新按钮级授权（配合config.js中modules下的buttons使用）

baseView方法列表

define('baseView', ['require','exports','module','utils','ubaseUtils','log'], 
function (require, exports, module) {});

• this.$rootElement = $('body>main');//根元素
•  this._subView = [];//子页面
• 

 

技术选型

• 模块化：requirejs
• 路由：Director
• 模板引擎：Hogan.js from Twitter 语法参考Mustache
• 图表：echarts example
• 工具库：lodash API Documentation
• 滚动条美化：jquery.nicescroll
• 组件库：jqxWidgets Documentation