NO IMAGE

實戰錄》導語

雲端衛士《實戰錄》欄目定期會向粉絲朋友們分享一些在開發運維中的經驗和技巧,希望對於關注我們的朋友有所裨益。本期分享人為雲端衛士前端工程師易曉燕,看看她有什麼搞笑的經歷吧?

作為一個今年剛剛畢業的菜鳥級的前端,我已經深深體會到了學習 的重要性。學習使用新的外掛,新的框架是作為前端的我必須get的一項技能。

所以我就下定決心,要發憤圖強,好好學習。。。。。。

下面就和大家分享一些我在工作中所學習到和用到的一些前端外掛、框架,以及前端工具。

近年來,隨著雲和大資料時代的來臨,資料視覺化顯得非常重要。通過增加資料視覺化使用,企業能夠發現他們追求的價值。建立更多的資訊圖表,使用更多的資源,讓他們更快地獲得更多的資訊。這是我在工作中用到的兩款資料視覺化的工具:

讓資料開口說話的Echarts外掛

不得不說echarts真的很強大,它賦予了資料生命力,讓資料開口“說話”。

ECharts底層基於ZRender(一個全新的輕量級canvas類庫),建立了座標系,圖例,提示,工具箱等基礎元件,並在此上構建出折線圖、柱狀圖、散點圖、K線圖、餅圖、雷達圖、地圖、和絃圖、力導向佈局圖、儀表盤以及漏斗圖,同時支援任意維度的堆積和多圖表混合展現。

D3js

D3.js執行在JavaScript上,並使用HTML,CSS和SVG。 D3.js是開源工具,使用資料驅動的方式建立漂亮的網頁。 D3.js可實現實時互動。能夠提供大量除了線性圖和條形圖之外的複雜圖表樣式,例如Voronoi圖、樹形圖、圓形叢集和單詞雲等。

我們一直在做的網路態勢感知系統,就是用到了D3js。效果如下:

Bootstrap框架

隨著移動端市場的強勢崛起,web的開發也變得愈發複雜,對於開發者來說,開發的網站系統,在電腦、手機、Pad等上面都要有正常的顯示以及良好的使用者體驗。如果每次都要自己去調整網頁去匹配各個不同的客戶端裝置,這個工作量可想而知。如果網站可以自適應瀏覽器大小,對於開發者來說,無疑是天大的福音。Bootstrap就可以解決這個問題。

Bootstrap 是基於 HTML、CSS、JavaSscript 的,它簡潔靈活,有獨特的風格,並且相容大部分的jQuery外掛。通過class呼叫裡面提供的類名,產生自己想要的樣式或者效果,使得 Web 開發更加快捷。

jquery-table2excel頁面表格匯出excel外掛

在一個專案中,有時候想要把資料匯出以方便儲存和檢視,就會用到這個外掛。

這是一個非常好用的外掛,通過給要匯出的HTML表格一個id名,初始化table2excel外掛,就可以實現把HTML中的table表格內容匯出到微軟Excel電子表格中。

jQuery-validate表單驗證外掛

我們都知道表單驗證其實是很複雜的,方方面面都要考慮周到,還要有正則驗證。有了這款外掛,你就再也不用擔心了。。。

validate是一個基於jQuery的表單驗證外掛,內建豐富的驗證規則,還有靈活的自定義規則介面,支援input、select、textarea的驗證,驗證規則有required(必填欄位),email(電子郵件驗證),url(網址驗證),date(日期驗證),number(數字驗證),rangelength(字串長度範圍驗證),creditcard(信用卡號)等19種驗證方式,驗證的預設提示是英文的,可以通過message來修改預設提示。

對JS/CSS壓縮打包?為什麼

JS和CSS檔案的壓縮打包,可以減小檔案的體積,減小網路傳輸量和頻寬佔用,減小伺服器處理的壓力,可以提高頁面的渲染顯示速度,這是前端優化經常使用的一個措施。當然網上也有很多這樣的線上工具,我來推薦一下我一直使用的一個線上工具:http://tool.css-js.com/

好了,不說了,我要去學習了,咱們下次有空再聊。。。


“雲端衛士”是中盈優創資訊科技有限公司旗下的系列安全產品的主品牌,為客戶提供全系列、一體化、可運營的安全產品,包括網路攻擊追蹤溯源系統、網路攻擊檢測分析系統、網路流量態勢感知系統、安全威脅態勢感知系統、安全運營支撐系統、分散式抗拒絕服務攻擊系統等。