backbone.js_架构介绍
时间：2018年6月份~2019年2月份
前端框架：backbone.js
一、前因后果
18年6月份，进入了南京一家华为外包公司，做JAVAWeb 项目的开发，在原来的公司都是用的封装的比较完善的框架定制开发企业内部的管理类web项目，只需要写写sql,写写前台的js逻辑处理，对于框架的体会完全没有。进到新公司之后，项目开发流程从框架，技术选型到项目开发部署都得独立完成，所以选用了当时公司的一个大佬以前用过的框架进行项目开发。即backbone.js + SpringMVC.写了两个数据解析入库页面展示的小项目，便尝试着对自己使用的框架进行总结，旨在了解框架的设计思维以及技术上的特点。作为架构师道路的第一步。
二、什么是backbone.js
所有的框架设计的目的都是为了简化程序员的开发工作，backbone.js 也不例外。而js所简化的，主要包含两个内容。第一是将浏览器的数据与服务器的数据在适当的时候进行相互同步；第二是在用户与浏览器，浏览器与服务器之间的交互过程中，控制页面的变化来反馈不同的功能效果。从技术上来说，前者主要体现为异步请求的处理，后者主要体现为对DOM的操作。这俩点，backbone都做到了。
三、backbone.js 的特点： 在哪些方面减少了程序员的工作量 ❤❤❤
想要总结框架的特点，离不开框架所包含的模块，本人只用到了一小部分，其他的模块后续补充，以下图片内容非原创
我所用到的backbone的模块：
Events：事件模块，其他模块都继承了Events模块。
- el : '#index', 绑定事件动作作用域 整个body
Model：模型，Model一般对应一条数据
Collection：集合，它可以添加多个模型，叫做模型的集合，Collection一般对应多条数据。
View：视图，一样，但是这里的视图跟传统的不View不仅包括视图显示还包括事件监听（这里可以称作controller）。
总结起来可以用以下一段文字简单概括：
model可以直接跟view关联操作，model传数据给view，view就显示这个数据，可以直接修改model值反馈到页面。一个model最好对应一个view。Collection也可以直接跟view关联操作。（待修改）
以下是本人项目中的一段js代码：
define([ 'jquery', 'backbone', 'json2', 'cookie', 'utils/urlUtils','utils/ajaxUtils', 'utils/responseCode','text!templates/ISSUDBTimeTpl.html',
'text!templates/departmentTpl.html','text!templates/areaTpl.html', 'page', 'views/commonView','custom', 'customscripts', 'metisMenu',
'bootstraps','echarts'],
function($, Backbone, JSON, cookie, Url, Ajax, ResponseCode,ISSUDBTimeTpl,departmentTpl, areaTpl, page, commonView,custom, customscripts,
metisMenu, bootstraps,echarts) {
return Backbone.View
.extend({
el : '#index',
ISSUDBTimeTemplate : _.template(ISSUDBTimeTpl),
departmentTemplate : _.template(departmentTpl),
areaTemplate : _.template(areaTpl),
//事件动作
events : {
"click #eChart" : "ShowEChart",
"click #refresh" : "refresh",
"click #export" : "export",
"click .ISSUDBTime" : "clickISSUDBFormDate",
},
//全局常量
dataModel : {
totalPages : 0,
totalcount:0,
count : 10,
page : 1,
dateType : 1,
params : {
},
},
//页面初始化
initialize : function(options) {
commonView = new commonView();
this.dataModel.BrowserType = commonView.BrowserType();
this.initQuery();
},
//初始化表格数据
initQuery : function() {
$("#eChart").css('display','block');
$("#echartIcon").css('display','none');
//获取DB分析数据
var params = {
page : 1,
count : 10,
commend: "initForm",
}
this.dataModel.params = params;
Ajax.getWithError(Ajax.servletMap.ISSUDBTimeController,
params, this, this.ISSUDBTimeDataResult,
this.error);
},
//页面初始化获取数据后回调函数
ISSUDBTimeDataResult : function(data) {
//显示当前用户，版本，子系统信息
$("#loginInfo span#childSystem1").html(data.system);
$("#loginInfo span#userName1").html(data.loginUser);
$("#loginInfo span#versionName").html(data.version);
if (data.code === ResponseCode.COMMON_SUCCESS) { //数据返回成功
$('#failedLoading').hide();
$('#loading').hide();
$('#noData').hide();
if(data.type == "form"){ //展示表格数据
if (data.iSSUDBTimeList) {
if (data.iSSUDBTimeList.list.length == 0) { //查询成功，数据库没有数据
$('#ISSUDBTime').hide();
$('#noData').show();
}else{ //查询成功 数据库有数据
$('#noData').hide();
$('#ISSUDBTime').show();
//初始化表格数据
$("#page-inner #ISSUDBTime").html(this.ISSUDBTimeTemplate(data.iSSUDBTimeList));
}
//展示所有Log信息
$("#ISSU_log").show();
$("#BaseLog").text(data.ISSUDBBaseLogInfos);
$("#TestLog").text(data.ISSUDBTestLogInfos);
}
//分页 start \
var self = this;
var totalcount = data.iSSUDBTimeList.total;
totalPages = Math.ceil(totalcount/this.dataModel.count);
$(".pagination div#pagination").pagination({
currentPage : self.dataModel.page,
totalPage :totalPages,
isShow : true,
count : 10,
homePageText : "First",
endPageText : "Last",
prevPageText : "Up",
nextPageText : "Next",
callback : function(current) {
self.dataModel.page = current;
self.searchs();
}
});
//分页 end
}
if(data.type == "echart"){ //展示图表数据
if (data.iSSUDBTimeEChartList) {
//只展示图表数据
if(data.iSSUDBTimeEChartList.echartList.length > 0){
var params = {
title : data.title,
X_data: data.iSSUDBTimeEChartList.X_data,
echartDate: data.iSSUDBTimeEChartList.echartData,
iSSUDBTimeEChartList:data.iSSUDBTimeEChartList
}
this.dataModel.params = params;
this.dataModel.title = data.title;
//echart 图表自适应 div 方法有点蠢， 应该讲 window.innerHtml的值引入进来进行计算 ，没有那么复杂
var size = params.X_data.length;
if(size<5){
var chartHeight = 100 + size*100;
}else if(size<10){
var chartHeight = 100 + size*75;
}else if(size<15){
var chartHeight = 100 + size*50;
}else if(size<20){
var chartHeight = 100 + size*32;
}else{
var chartHeight = 100 + size*20;
}
$('#chart').css('min-height',chartHeight);
//根据数据初始化参数
this.initEChart();
}else{ //没数据
}
}
}
if(data.type == "updateLog"){ //更新log信息
$("#ISSU_log").show();
$("#BaseLog").text(data.baseLog);
$("#TestLog").text(data.testLog);
}
var totalcount = data.iSSUDBTimeList.total;
this.dataModel.totalcount = totalcount;
$(".ModalFrame").css({
"display" : "none"
});
} else if(data.code === ResponseCode.PARAM_ERROR) { //数据请求错误
$('#ISSUDBTime').hide();
$('#loading').hide();
$('#noData').show();
$("#BaseLog").text("no data");
$("#TestLog").text("no data");
$("#eChart").attr('disabled',true);
} else if(data.code === ResponseCode.COMMON_FAILURE){ //没有数据
$('#ISSUDBTime').hide();
$('#loading').hide();
$('#noData').show();
$("#BaseLog").text("no data");
$("#TestLog").text("no data");
$("#eChart").attr('disabled',true);
}
},
//初始化图表
initEChart : function(){
$('#refresh').css('display','block');
// $('#echartSpan').css('display','block');
// $('#shield').css('display','block');
var worldMapContainer = document.getElementById('chart');
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth+'px';
worldMapContainer.style.height = window.innerHeight*100%+'px';
};
//设置容器高宽
resizeWorldMapContainer();
//初始化图表标签
var myChart = echarts.init(document.getElementById('chart'));
myChart.resize(); //重置echart 自适应div
var options={
title: {
text: this.dataModel.params.title,
textStyle:{
color:'red'
},
},
legend: {
data: ['劣化时间'],
height: worldMapContainer.style.height,
width: worldMapContainer.style.width
},
backgroundColor: '#F3F2F1',
xAxis : [
{
name:'时间(s)',
type : 'value'
}
],
yAxis : [
{
type : 'category',
name: '表名',
triggerEvent:true,
axisLabel:{
interval:0,
margin:0,
rotate:45,
textStyle:{
color:"#222",
fontSize: 10
}
},
data : this.dataModel.params.X_data
}
],
grid: {
left: '25%',
right: '5%',
scontainLabel: true,
containLabel: true
},
series : [{
name:'劣化时间',
type:'bar',
data : this.dataModel.params.echartDate,
textStyle:{
fontSize: 8,
fontWeight: 'bolder',
color: '#333'
},
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'right', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
},
color:function(params){
var consume1 = params.value;
var consume = JSON.stringify(consume1);
if(consume.indexOf(" ") != -1){
return '#B5C334';
}else {
return '#03a9f4';
}
},
}
},
}
]
};
//用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
resizeWorldMapContainer();
myChart.resize();
};
options = this.newline(options, 50, 'yAxis');
myChart.setOption(options);
},
//展示DB表Log信息
showLogInfo : function(){
},
//分页点击事件
searchs : function() {
debugger;
var params = {
count : this.dataModel.count,
page:this.dataModel.page,
commend:"initForm",
}
$("#loading").show();
this.dataModel.params = params;
this.dataModel.params.page = this.dataModel.page;
Ajax.getWithError(Ajax.servletMap.ISSUDBTimeController,
this.dataModel.params, this, this.ISSUDBTimeDataResult,
this.error);
},
//请求ISSU_DB 表查询数据 柱状图 展示
ShowEChart : function() {
$("#echartIcon").css('display','block');
$("#ISSU_log").hide();
$('#exportIcon').css('display','none');
$('#logIcon').css('display','none');
$('#eChart').css('display','none');
$('#ISSUForm').css('display','none');
$('#chart').css('display','block');
var params = {
commend: "initEchart",
}
this.dataModel.params = params;
Ajax.getWithError(Ajax.servletMap.ISSUDBTimeController,
params, this, this.ISSUDBTimeDataResult,
this.error);
},
//页面刷新
refresh : function() {
window.location.href=Ajax.host+"/HaModuleStatistics/ISSUDBTime.html";
},
//表格数据点击事件:更新Log信息
clickISSUDBFormDate:function($event){ //$event：触发点击事件的元素
var comsumeName = $(($event.target)).attr("id");
//点击列展示信息
$("#ISSU_log").show();
var params = {
commend:"updateLogInfo",
procName:comsumeName,
}
this.dataModel.params = params;
Ajax.getWithError(Ajax.servletMap.ISSUDBTimeController,
params, this, this.ISSUDBTimeDataResult,
this.error);
},
//数据导出
export:function () {
var totalcount = this.dataModel.totalcount;
var params={
exportModel:6
}
var exportCount = Math.ceil(totalcount/65534);
if(totalcount>65534){
alert("数据量超过excell的最大行数65534,请筛选后继续");
return;
}
//判断导出文件类型
var format=$("#exportType").val();
params.fileType=format;
if(params.fileType==0){
this.dataModel.Blob_dataType="text/csv;charset=UTF-8";
}else if(params.fileType==1){
this.dataModel.Blob_dataType="text/html;charset=UTF-8";
}else if(params.fileType==2){
this.dataModel.Blob_dataType="text/pdf;charset=UTF-8";
}
//导出内容
var titleList="['表名','base阶段时间','test阶段时间','劣化时间']";
params.titleList=titleList;
params.keyList="['consumeName','baseConsumeTime','testConsumeTime','deteriorationTime']";
var dateVal = new Date();
var yy = dateVal.getYear();
if(yy<1900) yy = yy+1900;
var MM = dateVal.getMonth()+1;
if(MM<10) MM = '0' + MM;
var dd = dateVal.getDate();
if(dd<10) dd = '0' + dd;
var nowdate = yy +'-'+ MM +'-' + dd;
params.fileName=encodeURIComponent('Issu_')+nowdate;
if(!$('#noData').attr("style")||$('#noData').attr("style")=='display: table-row-group;'){
$(".ModalFrame").fadeIn();
$('.success_tip').fadeIn();
return ;
}
// 文件下载
//当记录超过03版本最大记录时
(function downloadFile(url){
//定义一个form表单,通过form表单来发送请求
var form=$("