前端頁面質量監控

A. 為什麼在用sonarqube進行前端代碼質量分析的時候，所有的指標都為0

需要先用cppcheck分析代碼生成xml格式的報告，然後用sonar-runner將該xml導入sonar，sonar的作用在這里只是展現的作用。我昨天剛剛搞明白這部分。他還是對java項目分析比較簡單。sonar分析工具：sonar-runner下載sonar-runner：1.進入下載頁面2.找到sonarqube-runner如圖：3.點擊下載下載完後，解壓，將bin文件加入環境變數path中如我的路徑：F:\sonar-runner-2.4\bin將此路徑加入path中配置文件，

B. web前端開發實訓內容

web前端開發實訓有以下內容：

1、熟練掌握html基本知識，包括每個標簽的用法等。這個建議網上找個視頻看看，因為也不會太長的，這個是前端開發的信息結構。
2、熟練掌握div+css基本知識，這個東西基本就是前端的基礎了，它可以將你寫的東西直觀的展示出效果給你看，所以須熟練掌握。而且個人由於js的不行，格外的喜歡div+css，因為不管你做了什麼，瞬間就可以看到效果，對調試、修改有很大的幫助，這個就是前端開發的顯示效果。
3、至少掌握一個後台的內容管理系統，比如現在流行的phpcms v9、dede、帝國等都是比較好用的，比如：phpcms v9、dede，畢竟技多不壓身。這個也會了，你就基本可以在本地建站了玩了，就可以用來熟悉你前面學到的html和div+css，讓自己熟練的掌握這些，並且你會發現這樣比枯燥的學習更有樂趣。知道以上這幾點，基本就可以開始玩了，將自己的想法加入到自己的程序中，將以前學的東西更加深刻的掌握，並且熟練的運用。
4、學習javascript編程，深入學習，包括jquery等框架。這個部分比較重要，也有些難度，需要花費一定的時間和精力，但是這塊學明白了，基本上前端的大多數問題也就學會了。
5、學習一門簡單的後台編程語言，比如asp或者php，推薦php，不需要學的太深入，主要為了培養編程思想。

想要了解更多有關web前端的相關信息，推薦咨詢千鋒教育。千鋒教育成立教研學科中心，推出貼近企業需求的線下技能培訓課程。採用全程面授高品質、高體驗培養模式，學科大綱緊跟企業需求，擁有國內一體化教學管理及學員服務，在職業教育發展道路上不斷探索前行。

C. 如何採集 前端性能監控中的 networktype

1）performance
設置好插件中全局的performance對象，以及方法now，獲取當前時間戳。

2）Document.readyState
上圖中的「domComplete」、「domInteractive」和「domLoading」，就是Document。readyState的3種狀態loading, interactive或complete發生的時間。

3）getTimes()
在這個方法中計算各個參數之間的值。
在網上參考了很多資料，再結合了一點自己的理解，有些參數的理解可能有誤，具體的計算方式可以查看源碼「primus.js」。
1. firstPaint：白屏時間，也就是開始解析DOM耗時，用戶在沒有滾動時候看到的內容渲染完成並且可以交互的時間
2. loadTime：載入總時間，這幾乎代表了用戶等待頁面可用的時間

3. unloadEventTime：Unload事件耗時
4. loadEventTime：執行 onload 回調函數的時間
5. domReadyTime：用戶可操作時間
6. firstScreen：首屏時間，用戶在沒有滾動時候看到的內容渲染完成並且可以交互的時間，記錄載入時間最長的圖片
7. parseDomTime：解析 DOM 樹結構的時間，期間要載入內嵌資源

D. 前端頁面的插件有哪些

工具類

方便操作對象，數組等的工具庫

• underscore.js

• lo-dash與underscore.js的api基本一致。與underscore比其優勢是，效率高；可自定義構建

• Sugar在原生對象上增加一些工具方法

• functional.js提夠了一些Curry的支持

• Watch.js監視對象或屬性的變化

• bacon.js函數式編程，cool

• streamjs用流的方式來對數組，對象進行系列操作

非同步流程式控制制

• eventproxy朴靈出品

• Arbiter.js詳細

• 發布訂閱

• qPromise風格的

• Async.js

mock

• Mock.js生成隨機數據和mock Ajax 請求

• jquery-mockjaxmockajax請求

時間庫

• moment

• datejs

瀏覽器探測

• Bowser探測具體瀏覽器和版本

• ua-parser-js探測具體瀏覽器和版本，操作系統，設備類型等

調試

• console-polyfill能放心的使用 console.log()之類的console方法

• log讓控制台輸出的log有樣式

• Konsole.js在頁面的一個元素里輸出log信息詳細

• uri.jsuri操作

• cookie增刪改cookie的工具庫

• director前端路由庫詳細

• BigDecimal.js提高精度的數字操作

• JSDoc根據javascript文件中注釋的信息，生成API文檔詳細

• hotkeys鍵盤事件的封裝

• MD5用 MD5 的方式加密文件的庫

瀏覽器增強類

讓一些舊瀏覽器變牛逼的庫

• Selectivizr讓IE 6-8一些的css3選擇器

• ieBetter讓ie6-8有高級瀏覽器的特性

• ExplorerCanvas讓IE8-的瀏覽器支持canvas

• CSS3 Pie讓IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js時，box-radious的元素有背景色時，不顯示背景色。。。

• formFive讓舊的瀏覽器支持HTML5表單的一些特性，如 placeholder,autofocus

• https://github.com/anselmh/object-fit讓瀏覽器支持object-fit這css規則

• HTML5 Cross Browser Polyfills一堆Polyfills

• flexibility讓舊的 IE 也支持 Flexbox

選擇器增強

• Lining.js讓瀏覽器實現類似::nth-line(), ::nth-last-line()的效果

未歸類

• prefixfree用了它，寫css時，就不需要加瀏覽器的前綴了

表單類

• jquery-file-upload上傳文件組件詳細

• zTree文件樹形視圖控制項

• Treed樹編輯器。感覺展示的感覺很像思維導圖

• FileAPI對文件選擇框內的文件的一些處理

表單驗證

• .Validate詳細

• jQuery-Validation-Engine

表單元素美化

• uniform提供對下拉框，單，復選框，按鈕等表單元素的美化

• select2多選下拉框

• selectivity和unfirom比較類似

• DropKick下拉框，單，多選。外觀比uniform好

• switcheryios7風格的開關組件

• nouislider用滾動條來設置/控制（音量等）

• range.css美化input[type=range]元素的外觀

圖片類

• holderjs生成占點陣圖片

• lazyload

• imagesLoaded選取的圖片都載入好後執行調回

• CSSgram用CSS3的Filter實現Instagram濾鏡的庫

圖標類

• Icon Font匯總

• SVG做的圖標

• svgicons

• iconic

• HYBICON帶交互效果。如 hover, click

• HTML字元實體圖標

• http://www.amp-what.com/

• transformicons圖標點擊時，會有一些變換效果。如，加號變成叉號

• css3patternscss3 做的可平鋪紋理。瀏覽器兼容性不好。

瀏覽圖片

• fancybox彈出查看圖片，視屏等等demo

• yoxview彈出查看圖片，圖片尺寸縮放很自然

圖片牆

• wookmark

UI 框架

• WeUI由微信官方設計團隊為微信 Web 開發量身設計。

• Framework7

UI 組件類

拖拽

• dragula支持Draggable，Dropable和Sortable。感覺比jqueryUI的輕量級，好用的樣子

• angular-draguladragular 官方的 angular 版本

數據可視化(圖表)

• Echarts網路出品

• highcharts功能強大。是收費的。

• Plottable.JS基於D3的一個圖表庫

• flot文檔不給力

• chartJs中文文檔demo很漂亮，很清晰。比較輕量級。

• ichartJs中國的一個傢伙搞的，感覺還不錯。

時間選取組件

• foundation-datepicker

• DatePicker一個簡單的日歷詳細

• full calendar支持脫放的方式來改變待辦事宜的時間

• Simple Events Calendar外觀很喜歡。收費 5$

• jQuery ui datepicker經典，不是很好看

• pickadate輕量級，手機友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。

• zebra-datepicker可配置性很強。但貌似只能在彈出在右上方。。。

• bootstrap-datepickerbootstrap風格。

• dateRangePicker選取時間段。bootstrap風格。該組件依賴Twitter Bootstrap, Moment.js和jQuery.

自定義滾動條

• perfect scrollbar輕量級的滾動條。外觀與mac上chrome的滾動條一樣。

• iscroll在移動設備上用不錯

載入(Loding)效果

• CSS SpinnersCSS做的

• Loaders.cssCSS做的

表格組件

• jsGridData Grid。詳細

• backgrid基於Backbone.js的DataGrid

• excellentexport把表格的內容生成excel。兼容 Firefox, Chrome, IE6+

• datatables表格可交互（對內容進行排序，刪除等）

• handsontable生成Excel外觀的數據

• JSpreadsheets表格數據的組件庫

選取顏色

• Spectrum

分享到SNS

• JiaThis生成分享代碼。

編輯器

• ace代碼編輯器，可以用來做demo演示

• ckeditor

• ueditor網路做的

• tinymce對html內容進行實時的編輯

• summernote在移動設備上用不錯

通知組件

• notie.js

HTML5播放器

• jwplayer被大量網站使用

• html5media簡單的h5player，輕量級

• jplayer功能強太，可換膚

展示

• Impress.js各種旋轉，和奇特的體驗

• fullPage全屏顯示。用滾輪來翻頁詳細

• zepto.fullpage專注於移動端的fullPage.js，依賴Zepto

• pagePiling和fullPage類似

• turn.js做一本書，帶漂亮的翻頁的效果

幻燈

• slidesjs挺好用的，只是那幻燈導航的CSS都要自己寫，呵呵詳細

• iSlider無任何插件依賴的手機平台javascript滑動組件詳細

• bgstretcher全屏幻燈，會隨著頁面大小的變化而變化。

• Swiper開源、免費、強大的移動端觸摸滑動插件Swiper中文網

• coin-slider兼容IE6。蠻好的~。不過其切換方式是一塊塊的。不能配置切換方式。。。

• wowslider幻燈切換時各種很炫的效果。收費。

• cycle2普通的幻燈，竟然不支持垂直滾動。。。

• jcarousel普通的幻燈，不兼容IE6

• reveal3d滾動。做ppt相當不錯

• nodePPT國人做的，做ppt也相當不錯。有些方面比 reveal做的還好。但生成導出的html有些問題

• roundabout3d切換，看的後面圖片的邊

彈出框

• Magnific-Popup兼容PC，Mobile。還不錯，有5k+的star

• layer國人開發的，兼容ie6+。不喜歡其調用方式。

動畫效果

• mixitup用漂亮的動畫效果來完成排序和篩選

• jQuery.Marquee跑馬燈效果

• quickflip卡片翻轉效果

• 卡片翻轉效果2兼容性可以。寫的比較簡單：1，只支持x方向翻轉 2,類名都是規定好的 3，只能被調用一次。 需要改寫一下。我的改進版見這里

• TheaterJS模擬兩個人在屏幕上對話

• midnight.js文字顏色隨著背景變，屌炸了

• color-animationjquery的顏色漸變動畫插件。jquery的動畫不支持顏色值的變化。改庫提供了這個支持。

• transit對元素進行css的變換

• tagcanvas3D標簽雲效果詳細

• iconate圖片切換動畫

• Snap.js左/右側導航的出現效果

• CSS shake抖動動畫

• ClickSpark.js點擊後的一些酷炫的效果

視覺差插件

• scrollorama比較簡單

• superscrollorama能做的效果更多，但要用第三方Tween的庫，使用起來比較復雜。

• scrolldeck

flash

• swfobj能夠自動檢測PC、Mac機器上各種主流瀏覽器對Flash插件的支持情況。它使得插入Flash媒體資源盡量簡捷、安全。而且它是非常符合搜索引擎優化的原則的。此外，它能夠避免您的HTML、XHTML中出現object、embed等非標准標簽，從而符合更加標准。詳細

抽獎

• wScratchPad刮刮卡刮獎效果

• jqueryrotate旋轉插件。可以用來做轉盤抽獎效果

用戶體驗增強類

• Intro.js用來介紹網站的功能很不錯。也可以做新手引導。

• blockUILolding組件。

• simple-hint提示信息。用css做的。兼容性IE 9+。

• dotdotdot文字溢出時，添加在文字末尾加省略號

• jQuery-menu-aim二級菜單的切換如Amazon主頁上一樣迅速

• AnythingZoomer放大鏡功能

• 美化/高亮語法代碼

• google-code-prettify

• DlHighlight僅支持JavaScript、CSS、XML、HTML 這4語法高亮

• please按要求隨機舒服的顏色

• Awesomplete輸入的智能提示，自動補全

• proTip提示。感覺比 Bootstrap 的 tip 好

• Hammerjs手勢庫。封裝了 Swipe, Tap, Pinch, Pan等手勢

動畫

• velocity提高Jquery動畫的性能。以及顏色動畫之類的新特性。

SVG

• Snap.svg操作 SVG 的 JS 庫。號稱 SVG 的 jQuery。demo

• walkway以動畫的方式，漸漸地畫出 SVG 的路徑。

測試

• Mocha

• Chai

• Should

• Snoion

• DeviceMock.jsmock 設備。

其他類

• ZeroClipboard將內容復制到剪切板兼容主流瀏覽器的解決方案詳細

• html2canvashtml轉化成canvas，可以用來做截圖。詳細

• Ink響應式html郵件框架

• 性能測試

• 抓取，解析RSS內容（不能跨域，所以後台要做代理，所謂的解析Rss其實就是解析xml）

• jFeed

• jRss簡單版的jFeed

• scriptcam與攝像頭交互

• cylon.js機器人框架，支持35個平台

• Masonry一個瀑布流框架

• devices.css移動設備邊框的外觀。做原型的時候用不錯。

Bootstrap相關類

• Bootbox.js對bootstrap的彈出框做的一些封裝

• 免費皮膚

• AdminLTE

JS Plugins倉庫

• jQuery Cards高質量的 jQuery 插件網站

• jster

• node moles

• npmrankSort npm packages by page rank

• YOU MIGHT NOT NEED JQUERY PLUGINS不依賴 jQuery 的 js 插件。

• awesome-nodejs

• Libraries.io各種語言的庫

• OniUI去哪兒網做的一套基於Avalon的框架

常用的移動端框架

zepto.js

語法與jquery幾乎一樣，會jquery基本會zepto~

最新版本已經更新到1.16

iscroll.js

解決頁面不支持彈性滾動，不支持fixed引起的問題~

實現下拉刷新，滑屏，縮放等功能~

最新版本已經更新到5.0

underscore.js

筆者沒用過，不過聽說好用，推薦給大家~

該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。

最新版本已經更新到1.8.2

滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果

slip.js

iSlider.js

fullpage.js

swiper.js

flex布局

flex布局目前可使用在移動中，並非所有的語法都全兼容，效果良好~

E. 什麼是監控攝像機的前端、後端

1、監控系統分前端和後端。
2、顧名思義，前端是指監控攝像頭；後端是指機房端（有硬碟錄像機、解碼器、矩陣等）。

F. web前端開發，主要工作內容有哪些特點呢

隨著互聯網全面進入移動時代，前端已逐漸成為互聯網行業的重要角色。前端是做什麼的？工作內容是什麼？簡單來說，前端所做的就是在用戶終端上實現產品的UI設計，可以說，用戶看到的所有視覺和交互都是前端的范疇。根據這個定義，我們可以把前端的工作內容概括為配合開發和UI設計部門完成前端頁面的開發，並根據產品需求負責前端應用的維護和優化。

因此，要想真正掌握Web前端開發技術，靈活運用到企業項目中，還需要你能真正接觸到一些企業項目，了解前後台的交互，然而這需要的時間是不可估量的。視覺設計師在設計圖紙的基礎上，利用HTML和CSS合作創建頁面。同時，在此基礎上，完成頁面維護和網站前端性能優化。此外，一個合格的前端開發工程師，應該具備一定的審美能力和基本的美術操作能力，能夠很好地與交互和視覺合作。

小編針對問題做得詳細解讀，希望對大家有所幫助，如果還有什麼問題可以在評論區給我留言，大家可以多多和我評論，如果哪裡有不對的地方，大家也可以多多和我互動交流，如果大家喜歡作者，大家也可以關注我哦，您的點贊是對我最大的幫助，謝謝大家了。

G. 前端具體是做什麼

前端具體是製作網頁的。

前端即網站前台部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。隨著互聯網技術的發展，HTML5，CSS3，前端框架的應用，跨平台響應式網頁設計能夠適應各種屏幕解析度，合適的動效設計，給用戶帶來極高的用戶體驗。

核心技術

HTML、CSS、JavaScript，這三個是前端開發中最基本也是最必須的三個技能。前端的開發中，在頁面的布局時， HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和交互。

雖然表面看起來很簡單，但這裡面需要掌握的東西絕對不會少。在進行開發前，需要對這些概念弄清楚、弄明白，這樣在開發的過程中才會得心應手。

H. 前端的主要工作職責有哪些

對於前端，官方的定義是網站前台部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。
用自己的話來說，前端是網頁給訪問網站的人看的內容和頁面，那前端開發顧名思義就是這些內容和頁面中代碼的實現。
不過現在的前端不完全就是網頁設計，早年的網頁設計主要是以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。而現在的前端開發使得現代網頁更加美觀，交互效果顯著，功能更加強大。所以現在的前端開發，運用到的知識面更加廣泛，難度也更大。

I. 大家有哪些提高前端代碼質量的辦法

如果這個話題開始深入的話，應該說是差不多三年前了。如果它是從一個淺的研究開始，它應該追溯到2004年到2005年。說什麼去學習，去做真實的事，去愛一些東西，實在是太過分了。至於互聯網，它對電腦很感興趣，所以它也很有希望能更早的接觸到這個行業。但過去幾年的經驗並不是給自己貼上標簽，定期改善或改變你的位置。這有助於擴展你的思想。遵循上面的前輩，我也討論時間軸。

開始接觸js框架源碼，研究了幾個月收獲寥寥，這期間也學習了canvas做了些H5小游戲，不過總體來說意義不大，然後認識了師傅以後，指導了我學習了面向對象思想，《冒號課堂--編程範式和OOP》看了4遍，學習了很久UML建模和面向對象基礎，然後補充了css的基礎，找了個全棧實習工作，第一次了解到linux伺服器和後端開發，從此瘋狂的迷戀linux和vim，補充了計算機網路知識後，學習了nodejs、sass、angular和gulp搭建了個人博客。大四下學期研究jquery源碼，畢業。

總之還是多總結經驗吧。

J. 前端主要負責什麼工作

一名合格的前端開發工程師，不單單需要掌握前端必須的各種技術，同時還要掌握其它技術，需要掌握一點後台的知識，同時也要對網站構架有一定的了解，這樣才可以稱之為一個合格的Web前端開發工程師。至於Web前端的薪資情況，需要根據個人能力而定。
如果你想要快速學習Web前端技術，專業全面的學習方式比較好，一般費用在2W左右，4-6個月左右。千鋒適合零基礎的小白迅速成長，學習曲線先快後慢，也適合有一定基礎的學員進階學習，鞏固知識的基礎上，穩步進步突破職業瓶頸。