backbone.js_架构介绍

最新推荐文章于 2024-08-15 09:25:38 发布

小T的博客(需要demo请看简介)

最新推荐文章于 2024-08-15 09:25:38 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： js框架

本文链接：https://blog.csdn.net/m0_37840243/article/details/87795339

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

时间：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模块。

<body id = index> 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=$("<form>");
					                //设置表单状态为不显示
					                form.attr("style","display:none");
					                //method属性设置请求类型为get
					                form.attr("method","get");
					                //action属性设置请求路径,(如有需要,可直接在路径后面跟参数)
					                form.attr("action", url);
					                //将表单放置在页面(body)中
					                $("body").append(form);
					                //在表单中添加input标签来传递参数
					                //如有多个参数可添加多个input标签
					                for(var key in params){
					                    var input1=$("<input>");
					                    input1.attr("type","hidden");//设置为隐藏域
					                    input1.attr("name",key);//设置参数名称
					                    input1.attr("value",params[key]);//设置参数值
					                    form.append(input1);//添加到表单中
					                }
					                //表单提交
					                form.submit();
					                form.remove();
					            })(Ajax.servletMap.Export)				            
				        },						
						
						
						
				        
				        
				        //暂未用
						exit : function() {
							var params = {
									exit : "exit"
								}
								this.dataModel.params = params;
								Ajax.getWithError(Ajax.servletMap.Login,
										params, this, this.exitResult,
										this.error);
						},
						exitResult : function(data) {
							if (data.code === ResponseCode.COMMON_SUCCESS) {
								window.location.href="http://uniportal.huawei.com/saaslogin/logout?issuer=http://10.251.75.69:8080/yangModuleStatistics/";							
							} else if (data.code === ResponseCode.PARAM_ERROR) {
								alert("Exit Error!");
							}
						},
						initlanguage : function() {
							this.dataModel.language = $.cookie('language');
						},

				        
						tip_close_noData : function() {
							var consumeName = $("#consumeName").val();
							window.history.go(-1);
						},						

						
						//导航栏点击事件
						HaNavigation : function() {
				    		alert("需要查看Ha分析数据，请在Ha日志上传页面选择对应的版本");
				    		return false;
						},
						//展示2级菜单
						showNext : function(echartData) {
							var params = {
									grade:"gradeTwo",
									gradeOneName:echartData
							}
							this.dataModel.params = params;
							Ajax.getWithError(Ajax.servletMap.ISSUDBTimeController,
									params, this, this.ISSUDBTimeDataResult,
									this.error);
						},
						//echart Y轴 数据自动换行
						newline : function(option, number, axis) {
						    /* 此处注意你的json是数组还是对象 */
						    option[axis][0]['axisLabel']={
						        interval: 0,
						        formatter: function(params){
						            var newParamsName = "";
						            var paramsNameNumber = params.length;
						            var provideNumber = number;
						            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
						            if (paramsNameNumber > provideNumber) {
						                for (var p = 0; p < rowNumber; p++) {
						                    var tempStr = "";
						                    var start = p * provideNumber;
						                    var end = start + provideNumber;
						                    if (p == rowNumber - 1) {
						                        tempStr = params.substring(start, paramsNameNumber);
						                    } else {
						                        tempStr = params.substring(start, end) + "\n";
						                    }
						                    newParamsName += tempStr;
						                }
						            } else {
						                newParamsName = params;
						            }
						            return newParamsName
						        }
						    }
						    return option;
						},	
						//动态更改柱状图颜色
						changeCoulour : function() {
							
						},	
						//屏蔽echart图表负值数据
						shield : function() {
							//获取echart数据  的 grade 和 consumeName
							var grade = this.dataModel.grade;
							var consumeName = this.dataModel.consumeName;
							//发请求当前等级下去除 负值的数据
							var params = {
									grade : grade,
									gradeOneName:consumeName,
									shield: "yes"
								}
							this.dataModel.params = params;
							Ajax.getWithError(Ajax.servletMap.ISSUDBTimeController,
									params, this, this.ISSUDBTimeDataResult,
									this.error);
						},	
	

						deleteHis:function(){
							var version = $("#his_version_search option:selected").val();
							console.log(version);
							if( null != version && ''!=version ){
								if(window.confirm("确定删除版本:"+version)){
									var params = {
										version:version,
										click_flag:this.dataModel.command2
									}
									this.dataModel.params = params;
									Ajax.getWithError(Ajax.servletMap.haModelSerialController,
											params, this, this.initQuery(),
											this.error);
								}else{
									return;
								}
							}else{
								alert("未选择历史版本")
							}
							
						},
						error : function() {
							$('#loading').hide();
							$('#failedLoading').show();
						},
				        isEmpty:function(obj){
				            // 本身为空直接返回true
				            if (obj == null) return true;

				            // 然后可以根据长度判断，在低版本的ie浏览器中无法这样判断。
				            if (obj.length > 0)    return false;
				            if (obj.length === 0)  return true;

				            //最后通过属性长度判断。
				            for (var key in obj) {
				                if (hasOwnProperty.call(obj, key)) return false;
				            }
				            return true;
				        }
					});

		});