seaJS框架的使用细节

一、整体流程：

此处seajs框,结合了用户权限控制的配置,所以才有权限data-prvID的介入。此框架从整体上整合js的引入,通过在页面点击各模块功能时,再加载其对应的js文件,html文件中是纯Html代码,不包含功能js.css(不包含)引入的,使html文件显得更加简洁明了。

二、代码配置:

public_home.html

(1)css，js(非功能性的)引入部分

<script type="text/javascript" src="../js/jquery/jquery.js"></script><script type="text/javascript" src="../js/common/echarts.min.js"></script><script type="text/javascript" src="../css/bootstrap/validator/js/bootstrapValidator.min.js"></script><script type="text/javascript" src="../css/bootstrap/js/bootstrap.min.js"></script><script type="text/javascript" src="../css/bootstrap/js/bootstrap-paginator.js"></script><script type="text/javascript" src="../js/common/dateutil.js"></script><script type="text/javascript" src="../js/common/common.js"></script><script type="text/javascript" src="../js/common/confirm.js"></script>

(2)引入html部分

<a  data-prevID="502"     data-modal="cdrVsatDuration"     data-href="subscriberCDR/cdrVsatDuration_list.html">VSAT时长话单</a>

(3)引入js部分

<script>        //首页进入时加载sea.js            seajs.config({            base: '../js',            alias: {                'config': 'common/config.js',                'app': 'common/app.js',                'home': 'function/home/home.js',                'subTrafficCDR': 'function/trafficCDR/subTrafficCDR.js',                'cdrVsatDuration': 'function/trafficCDR/cdrVsatDuration.js',                'cdrVsatTraffic': 'function/trafficCDR/cdrVsatTraffic.js',                'customer':'function/customer/customerInfo.js',                'user': 'function/systemuser/user.js',                'Catagory': 'function/systemData/catagory.js',                'operationLog': 'function/systemuser/operationLog.js',                'role': 'function/systemuser/role.js',                'prev': 'function/systemuser/prev.js',                'product': 'function/product/product.js',                'service': 'function/product/service.js',                'fee': 'function/product/fee.js',                'realBills': 'function/bills/realBills.js',                'historyBills': 'function/bills/historyBills.js',                'agent': 'function/agentManagement/agentInfo.js',            },            map: [                ['.js', '.js?v=20160627']            ]        });            seajs.use(['home', 'config', 'app'], function(home) {                home.getData();        })    </script>

home.js

(1)home请求

$(".cmain-left a").on('click',function(e){                    var modalName = $(this).attr('data-modal');                    homeDao.sendData({                        "method" : modalName,                        "type" : "get",                    },from);                })

(2)权限过滤

var systemButton={           'customerManager':[                {'customer':'701'}               ],           'product':[                {'product':'402'},                {'service':'403'},                {'fee':'410'},                                  ],           'trafficMng':[                         {'subTrafficCDR':'501'},                              {'cdrVsatDuration':'502'},                         {'cdrVsatTraffic':'503'},                         ],           'bills':[                         {'realBills':'801'},                           {'historyBills':'802'},                           ],                'agentManager':[                                    {'agent':'903'}                                           ],           'system':[                {'user':'601'},                {'role':'602'},                {'prev':'603'},                {'operationLog':'607'},                {'Catagory':'606'},               ],    }

(3)控制请求加载页面

cdrVsatTraffic__callback:function(data,from){                if(this.modal == from.modal){                    if(data.errCode==0){                        var modalName = data.method;                        //加载订单管理页面                          loadPageFromLeft(modalName);                    }                }            },

HomeController.java

@RequestMapping(value="/cdrVsatDuration",method=RequestMethod.GET)    public void cdrVsatDuration(HttpServletRequest request,HttpServletResponse response){        JSONObject obj = JsonResult.getResult(ACTION_NAME, "cdrVsatDuration", 0, null);        OutputJson(obj, response);    }

app.js

(1)定义对应的js模块dao

define("cdrVsatDurationComponent", ["AbstractDataComponent"], function(require, exports, module) {    var p = require('AbstractDataComponent');    var _component = $.extend({        _dataHandlers : [],        _dataUrl : '/cdrVsatDuration/'    },p);    return _component;});