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模块。

<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 自适应divvar 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属性设置请求类型为getform.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 和 consumeNamevar 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){// 本身为空直接返回trueif (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;}});});

backbone.js_架构介绍相关推荐

MindSpore Lite整体架构介绍
MindSpore Lite整体架构介绍 MindSpore Lite框架的总体架构如下所示: • 前端(Frontend): 负责模型生成,用户可以通过模型构建接口构建模型,将第三方模型和MindS ...
MindSpore整体架构介绍
MindSpore整体架构介绍 MindSpore框架架构总体分为MindSpore前端表示层.MindSpore计算图引擎和MindSpore后端运行时三层. • MindSpore前端表示层(Mi ...
微服务架构介绍和RPC框架对比
微服务架构介绍和RPC框架对比 1.微服务架构 1.1 特征自动化部署,端点智能化,语言和数据的去中心化控制. 1.2架构一种将一个单一应用程序开发为一组小型服务的方法,每个服务运行在自己的进程中 ...
伍哥原创之豆荚商城商品搜索架构介绍
为什么80%的码农都做不了架构师?>>> 豆荚商城(www.dou55.com)商品搜索架构介绍 1,需求分析伍哥所在的豆荚商城是一个家电行业的B2C网上零售平台.作为这样一 ...
12.1 LNMP架构介绍；12.2 MySQL安装；12.3-2.4 PHP安装（上下）；12.5
扩展: Nginx为什么比Apache Httpd高效:原理篇 http://www.toxingwang.com/linux-unix/linux-basic/1712.html apache和ng ...
Kafka系列一之架构介绍和安装
Kafka架构介绍和安装写在前面还是那句话,当你学习一个新的东西之前,你总得知道这个东西是什么?这个东西可以用来做什么?然后你才会去学习它,使用它.简单来说,kafka既是一个消息队列,如今,它也 ...
LAMP架构介绍、MySQL和MariaDB介绍、MySQL安装
2019独角兽企业重金招聘Python工程师标准>>> LAMP架构介绍 Linux+Apache+MySQL+PHP 就是在linux系统上安装httpd. mysql .PHP, ...
互联网直播云计算架构介绍
互联网直播云计算架构介绍原文:互联网直播云计算架构介绍思想拆分 URL分层模块化云服务结构 ECS 云计算的优势 -------------------------------------- ...
LNMP基础架构介绍与安装
1.LNMP架构介绍 LNMP==Linux+Nginx+Mysql+PHP nginx:省资源,省cpu,所以在高并发时能够处理更多的请求,高端能达到3万到5万的并发量. nginx和LAMP不 ...

backbone.js_架构介绍

backbone.js_架构介绍相关推荐

最新文章

热门文章