⑴ 常见的前端集成部署方案有哪些各自的优缺点是什么
前端行业经历了这么长时间的发展，技术元素非常丰富，这里列举出一般web团队需要用到的技术元素：
开发规范：包括开发、部署的目录规范，编码规范等。不要小瞧规范的威力，可以极大的提升开发效率，真正优秀的规范不会让使用者感到约束，而是能帮助他们快速定位问题，提升效率。
模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。现在流行的模块化框架有requirejs、seajs等。
组件化开发：在模块化基础上，以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护，组件单元是资源独立的，组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等，甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装，解决一些常见的组件渲染、交互问题。
组件仓库：有了组件化，我们希望将一些非常通用的组件放到一个公共的地方供团队共享，方便新项目复用，这个时候我们就需要引入一个组件仓库的东西，现在流行的组件库有bower、component等。团队发展到一定规模后，组件库的需求会变得非常强烈。
性能优化：这里的性能优化是指能够通过工程手段保证的性能优化点。由于其内容比较丰富，就不在这里展开了，感兴趣的同学可以阅读我的这两篇文章 [1] [2]。性能优化是前端项目发展到一定阶段必须经历的过程。这部分我想强调的一点是性能优化一定是一个工程问题和统计问题，不能用工程手段保证的性能优化是不靠谱的，优化时只考虑一个页面的首次加载，不考虑全局在宏观统计上的优化提升也是片面的。
项目部署：部署按照现行业界的分工标准，虽然不是前端的工作范畴，但它对性能优化有直接的影响，包括静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源资源部署可以为前端性能带来较大的优化空间。
开发流程：完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。对开发流程的改善可以大幅降低开发的时间成本，工作这些年见过很多独立的系统（cms系统、静态资源推送系统）将开发流程割裂开，对前端开发的效率有严重的阻碍。
开发工具：这里说的工具不是指IDE，而是工程工具，包括构建与优化工具、开发-调试-部署等流程工具，以及组件库获取、提交等相关工具，甚至运营、文档、配置发布等平台工具。前端开发需要工具支持，这个问题的根本原因来自前端领域语言特性（未来我会单独写一篇文章介绍前端领域语言缺陷问题）。前端开发所使用的语言（js、css、html）以及前端工程资源的加载与定位策略决定了前端工程必须要工具支持。由于这些工具通常都是独立的系统，要想把它们串联起来，才有了yeoman这样的封装。前面提到的7项技术元素都直接或间接的对前端开发工具设计产生一定的影响，因此能否串联其他技术要素，使得前端开发形成一个连贯可持续优化的开发体系，工具的设计至关重要。
⑵ 前端各种插件如何整合
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⑶ 什么是集成UI的前端框架
目前流行的10个UI前端框架
1. Kendo UI
Kendo UI 将它本身定位成为:”当代web和手机app开发所需的综合 HTML5/JavaScript 框架。Telerik’s Kendo UI是每一位需要创建HTML5站点和手机apps的专业开发人员所需要的。
Kendo UI 却拥有全部：丰富的jQuery的窗体部件，简单并且始终如一的程序接口，稳定可靠的数据源，验证，国际化,MVVM框架，主题，模板，等等.
2. jQuery Mobile
jQuery Mobile:智能机和平板上触摸体验最好的Web Framework.一个统一的，以HTML5为基础的面向所有流行的手机设备平台的用户接口系统，构建在稳定可靠的jQuery和jQuery UI 上。它的轻量级代码逐渐增强并且拥有灵活自由，容易的主题设计.
3. ionic
ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。
ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。
ionic的开发添加android和ios环境。
ionic提供很多css组件和javascript UI库。
ionic可以支持定制android和ios的插件，也支持服务端REST的敏捷开发。
4. LungoJS
LungoJS这个是被认为开发移动网站最好的HTML5开发框架，使用 HTML5/CSS3 和 JavaScript 技术。可帮助创建基于 iOS、 Android、 Blackberry 和 WebOS 平台的应用程序。该框架可利用当前移动设备的高级特性，可捕捉事件包括滑动、触屏、长按等。无需使用图片，全部采用向量声称。
Lungo.JS 无需服务器端支持，可帮助实现 HTML5 特性，包括 WebSQL、Geolocation、 History、 Device orientation 等等。这是一个完全可定制的框架，可用来创建应用、游戏等程序。
5. Zino UI
Zino UI 是一个基于 jQuery，兼容 WAI-ARIA 的用户接口框架，包含超过 23 个不同的组件。跨平台的 UI 框架可帮你构建 Web 和企业应用。
6. jqxWidgets
jqxWidgets 是一个复杂的、创新的 UI 部件库，基于 jQuery 开发，可让用户开发非常专业的、跨浏览器支持的 Web应用
7. Sencha Touch
Sencha Touch是第一个基于HTML5的移动应用框架，利用JavaScript、HTML5和CSS3来构建移动应用程序，该框架利用本地代理存储离线数据，具体使用HTML5来渲染视频和音频组件。
可以让你的Web App看起来就像本地应用程序一样。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的Web标准，全面兼容Android和Apple iOS设备。
8. Jo
该框架可以创建像本地一样的应用，并且兼容任何操作系统，无论是Blackberry、iOS还是Android。并且提供许多HTML5小部件。使用它可以解决任何动画设计方面的问题。
9. 52 Framework
52 Framework拥有16列的网格模板。该框架来自于CSS3样式里的新“Selection”、阴影、圆角以及有效的HTML5标记。该框架还提供了一些特殊的脚本和样式用于IE6。
10. LimeJS
LimeJS 是一个 JavaScript 游戏开发框架，用于快速构建运行于触屏设备和桌面浏览器的游戏。允许开发者创建基于 HTML5 的游戏，支持主流浏览器包括iOS。
10. G5 Framework
如果你想要快速实现Web开发，并且想要重用ant主题或应用程序或网站项目，那么G5 框架是您最好的选择，因为该框架旨在提升开发效率、减少代码。该框架采用特色的PHP激活类、SEO优化技术。除了G5自身所带的这些功能特性外，它还集成其他许多功能，例如Orbit Slider、CSS3 PIE、Reveal Modals、CSS3 Buttons和Tipsy Tooltips等
⑷ 从后台接收到的一组数据，如何在前端整合成一个关系型的json对象
<script>
Array.prototype.getIndex=function(id,field){
if(!this.length||!id||!field)return-1;
vari=0,
len=this.length;
for(;i<len;i++){
if(this[i][field]==id)returni;
}
return-1;
};
Array.prototype.getFloorObj=function(obj){
if(!this.length||!obj)returnnull;
vari=0,
len=this.length,
_obj={};
for(;i<len;i++){
if(this[i]["buildId"]==obj.buildId){
obj.build_index=i;
varj=0,
l=this[i]["buildId"].unit.length;
for(;j<l;j++){
if(this[i]["buildId"].unit[j]["id"]==obj["unit"]){
obj.unit_index=j;
vark=0,
lg=this[i]["buildId"].unit[j]["floor"].length;
for(;k<lg;k++){
if(this[i]["buildId"].unit[j]["floor"][k]["id"]==obj["floor"]){
obj.floor_index=k;
returnobj;
}
}
}
}
}
}
returnnull;
};
vararr=[
{
"name":"101",//房间号，表示1楼1号房
"floor":"1-1",//楼层号，表示1单元1楼
"unit":"1",//单元号，表示1单元
"buildId":"1#"//楼栋id,表示1号楼
},
{
"name":"102",
"floor":"1-1",
"unit":"1",
"buildId":"1#"
},
{
"name":"201",
"floor":"1-2",
"unit":"1",
"buildId":"1#"
},
{
"name":"202",//房间号，表示2楼2号房
"floor":"1-2",//楼层号，表示1单元2楼
"unit":"1",
"buildId":"1#"
},
{
"name":"101",//房间号，表示1楼1号房
"floor":"2-1",//楼层号，表示2单元1楼
"unit":"2",//单元号，表示2单元
"buildId":"1#"
},
{
"name":"101",//房间号，表示2楼1号房
"floor":"2-2",//楼层号，表示2单元2楼
"unit":"2",//单元号，表示2单元
"buildId":"1#"
}
],
newArr=[];
vari=0,
len=arr.length;
for(;i<len;i++){
var_build_index=newArr.getIndex(arr[i]["buildId"],"buildId");
if(_build_index===-1){
newArr.push({buildId:arr[i]["buildId"],unit:[]});
_build_index=newArr.length-1;
}
var_unit_index=newArr[_build_index]["unit"].getIndex(arr[i]["unit"],"id");
if(_unit_index===-1){
newArr[_build_index]["unit"].push({id:arr[i]["unit"],floor:[]});
_unit_index=newArr[_build_index]["unit"].length-1;
}
var_floor_index=newArr[_build_index]["unit"][_unit_index]["floor"].getIndex(arr[i]["floor"],"id");
if(_floor_index===-1){
newArr[_build_index]["unit"][_unit_index]["floor"].push({id:arr[i]["floor"],room:[]});
_floor_index=newArr[_build_index]["unit"][_unit_index]["floor"].length-1;
}
newArr[_build_index]["unit"][_unit_index]["floor"][_floor_index]["room"].push(arr[i]);
}
document.write(JSON.stringify(newArr));
</script>
⑸ 前端和后端分离开发测试怎么整合
既然是分离开发了，那应该不好整合测试。
前端也有用到后端接口，测试前端的时候其实也是在测试后端了。
⑹ 怎样把一个网站的页面整合到新的前端框架中
直接将这个前端页面的数据调用修改就可以整合过去了
⑺ 前端打包用什么
一、webpack介绍
经常听到前端的大佬们说是用webpack打包的，那么到底webpack是个什么东东呢？
1、webpack是什么
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
2、webpack的核心作用
模块化开发中，我们会编写大量模块，如果不打包就进行上线，那么页面加载或交互时，将会发起大量的请求。为了性能优化，需要使用webpack这样的打包器对模块进行打包整合，以减少请求数。就像简单的vue项目，所有组件最终将被打包到一个app.js中。相较于无差别打包依赖模块的传统打包器（Grunt和Gulp等），webpack的核心优势在于它从入口文件出发，递归构建依赖关系图。通过这样的依赖梳理，webpack打包出的bundle不会包含重复或未使用的模块，实现了按需打包，极大的减少了冗余。
二、npm介绍
介绍了webpack，我们可能会疑问，我的JS，CSS，HTML文件分开写，挺好的呀，为什么要使用webpack工具，进行复杂的各项配置。在传统前端开发模式下，我们确实是按照JS/CSS/HTML文件分开写的模式就可以，但是随着前端的发展，社区的壮大，各种前端的库和框架层出不穷，我们项目中可能会使用很多额外的库，如何有效管理这些引入的库文件是一个大问题，而且我们知道基于在HTML中使用
npm 由三个独立的部分组成：网站、注册表（registry）和命令行工具（CLI）
网站是开发者查找包（package）、设置参数以及管理npm使用体验的主要途径。
注册表是一个巨大的数据库，保存了每个包（package）的信息。
CLI通过命令行或者终端运行。开发者通过CLI与npm打交道。
一般来说提起npm有两个含义，一个是说npm官方网站，一个就是说npm包管理工具。npm社区或官网是一个巨大的Node生态系统，社区成员可以随意发布和安装npm生态中的包，也就是不用在重复造轮子了，别人造好了，你直接安装到你的项目中就可以使用，但是因为前面说了，当包引入数量很多时管理就成为了一个问题，这个就是npm为开发者行了方便之处，npm已经为你做好了依赖和版本的控制，也就是说使用npm可以让你从繁杂的依赖安装和版本冲突中解脱出来，进而关注你的业务而不是库的管理。
而webpack就是将你从npm中安装的包打包成更小的浏览器可读的静态资源，这里需要注意的是，webpack只是一个前端的打包工具，打包的是静态资源，和后台没有关系，虽然webpack依赖于node环境。
三、webpack npm node之间的关系
webpack是npm生态中的一个模块，我们可以通过全局安装webpack来使用webpack对项目进行打包。
webpack的运行依赖于node环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静态资源，和后台没有关系，也就是说不依赖于node。
npm产生于node社区，是node的官方包管理工具，当安装好node的时候，npm就自动安装好了。
正是因为npm的包管理，是的项目可以模块化的开发，而模块化的开发带来的这些改进确实大大的提高了开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让 浏览器识别，而手动处理又是非常的繁琐的，这就是webpack工具存在的意义。
⑻ ejb3.0 怎么整合前端框架
Spring框架虽然很流行但并不是一个标准的开源框架。它主要由Interface21 Inc开发和控制。Spring框架结构是基于依赖注入(Dependency Injection (DI))的设计模式。它可以独立或在现有的应用服务器上运行，而且大量地使用了xml配置文件
EJB3.0是由Java Community Process (JCP)制订的标准框架，为所有主要的J2EE厂商支持。JBoss已经提供了试用版EJB3.0标准的开源或商业性质实现。EJB3.0充分利用了Java的注释。
这两个框架结构都有一个共同核心设计理念：将中间件服务传递给耦合松散的POJOS (Plain Old Java Objects, 简单洁净Java对象)。 这样的框架利用截取执行上下文或在运行时将服务对象注入POJO来把应用服务“缠绕”到POJO。POJO本身并不关心这种“缠绕”，对这种框架结构也没有什么依赖。因此，开发者可专注于业务逻辑和脱离框架的POJO单元测试。除此之外， 由于POJO并不须要继承框架的类或实现其接口，开发者能够极其灵活地搭建继承结构和建造应用。
然而，在拥有同一理念的同时，两个框架结构使用不同的方式来传递POJO服务。许多书籍或文章都将Spring 或EJB3.0和EJB2.1做了比较，但是对Spring 和EJB3.0的比较并没有仔细研究过。在本文中，我将对Srping和EJB3.0框架背后的关键不同处进行考察，并讨论其优缺点。本文的观点也适用于其它更少为人知的框架，因为他们都是对“耦合松散的POJO”的设计。
⑼ 网站前端开发CSS/JS文件整合的问题
这个应该是为了减少http请教链吧
然后css.ashx(ashx是一般应用程序，很多人用jquery和.NET开发网站，用ashx作为通讯层，jquery用post传参，ashx页面接收参数，然后返回值。浏览页面时是无法看到编写的代码)这里是他们自己写的一个程序文件，后面的[]中的几个css文件为相应的变量传进去的，就个@import
嵌入css一样
⑽ java前后端分离怎么整合成框架
你拆分的是前后端，就是说前端是一个项目，后端是一个项目。你要把html拆出来，后端照常引用这个jar