实战录 | 一个菜鸟前端的初体验

实战录》导语

云端卫士《实战录》栏目定期会向粉丝朋友们分享一些在开发运维中的经验和技巧，希望对于关注我们的朋友有所裨益。本期分享人为云端卫士前端工程师易晓燕，看看她有什么搞笑的经历吧？

作为一个今年刚刚毕业的菜鸟级的前端，我已经深深体会到了学习 的重要性。学习使用新的插件，新的框架是作为前端的我必须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/

好了，不说了，我要去学习了，咱们下次有空再聊。。。

---

“云端卫士”是中盈优创资讯科技有限公司旗下的系列安全产品的主品牌，为客户提供全系列、一体化、可运营的安全产品，包括网络攻击追踪溯源系统、网络攻击检测分析系统、网络流量态势感知系统、安全威胁态势感知系统、安全运营支撑系统、分布式抗拒绝服务攻击系统等。