⑴ 常見的前端集成部署方案有哪些各自的優缺點是什麼
前端行業經歷了這么長時間的發展，技術元素非常豐富，這里列舉出一般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