1. ECharts，Highcharts图表
ECharts— https://echarts.apache.org/examples/zh/index.html
Highcharts— www.highcharts.com.cn/demo/highch…
作为前端假发人员，相信在项目中必定会遇到大量图表相关的需求，处理图表数据已经是相当日常的需求，现在的图表库示例也相当的丰富，能够覆盖一般类的对于折线，曲线，地图展示等的各方面需求。 在国内的的话，一般百度出品的echarts使用较多，当然也有例如像highcharts之类优秀的图表库可以供开发者选择，这俩者的示例和样式都很多样，支持多样化的个性化配置，以及迭代都很稳定。 不过俩者一个免费，一个商用版，还是有些许区别，以下列举一些，以供假开发者们加以选择
优缺点
ECharts
优点
不收费 国人开发，便于开发和阅读文档。 图表丰富，可以适用各种各样的功能。
缺点
节点多的话生成的图标会很模糊（放大） 移动端使用略卡（没有试过） 文档很多地方写得不够好，不够详细（确实不够详细）。 对IE8及IE8（甚至IE9）及以下的兼容性非常差，经常报一大堆错误， 在文档实例不能满足的情况下除了更改颜色线长短粗细之外，其他的自定义开发比较困难 部分操作获取时会出现空白的数据比如：生成pdf时 图表要单独进行一下处理。（Hcharts没有试过）
Hcharts
优点
轻量级，移动端使用比较流畅，毕竟小。 基于svg，对于动态的增删节点数据非常灵活，不需要重新绘图。 稳定的性能 兼容性好，官方说兼容到IE6，实际我们只要兼容到IE8就基本满足。 完整的实例演示，功能介绍和详细的api文档。并不是说echarts就没有，而是Hcharts确实更加详细，
缺点
中文文档欠缺。 商业收费，外国。
2. FullCalendar 日期处理库
FullCalendar— fullcalendar.io/
前端在日常开发工作中，经常有一些对于日历，日期的处理需求，一般的UI组件库中会有一些能够满足一般化需求的的日历选择器等，但对于一些在日历上加入个性化事件等，需要一个功能和个性化配置更为丰富的日历插件，FullCalendar就是一款更为优秀，能够满足更多定制化需求的日历插件。
3. day.js 日期处理库
day.js — dayjs.fenxianglu.cn/
介绍完了日历组件库，接下来介绍一个转换日期时间的非常好用的工具库，day.js，非常方便的在项目中对各种日期时间的处理和格式转换，而且工具库非常轻量，文件大小只有2KB左右，下载、解析和执行的JavaScript更少，为代码留下更多的时间。工具库使用沙箱模式，所有更改Day.js对象的API操作都将返回一个新的实例。这有助于防止错误和避免长时间的调试会话。
dayjs().format(); // 2020-09-08T13:42:32+08:00
dayjs().format('YYYY-MM-DD'); // 2020-09-08
dayjs().format('YYYY-MM-DD HH:mm:ss'); // 2020-09-08 13:47:12
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss'); // 2011-10-17 00:17:56
4. lodash函数库
lodash - www.lodashjs.com/
Lodash是一个著名的javascript原生库，不需要引入其他第三方依赖。是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是，很多方法lodash已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号，就像Jquery的 $ 一样，十分简洁。 类似的还有Underscore.js和Lazy.js.对于前端来说 十分常见的需要防抖和截流的函数使用场景：
<template>
<div>
<button @click="throttleFun">点击按钮(节流)</button> <br/><br/>
<input type="text" @keyup="debounceFun" /> <br/><br/>
</div>
</template>
<script>
// 导入lodash 函数function段
import funHelper from 'lodash/function'
export default {
methods: {
// 防抖(延迟多少时间调用,如果一直keyup则会覆盖之前的时间重新计算)
debounceFun: funHelper.debounce((e)=>{
console.log(e.target.value);
}, 2000),
// 2秒内调用一次
throttleFun: funHelper.throttle(()=>{
throttleFun: funHelper.throttle(function(){
// 如果使用()=> 箭头函数 this指向根实例，使用普通函数function()不改变this指向本组件
console.log(this);
console.log('2秒内只能调用一次!');
}, 2000, { 'trailing': false }),
`//`
throttleFun2(){
console.log('3秒内调用一次');
},
initFun(){
// 定义节流函数
let throttleF = funHelper.throttle(this.throttleFun2, 3000)
// 循环调用
for(let i=0;i<10;i++){
throttleF();
}
}
},
created(){
this.initFun();
}
}
</script>
5. bootstrap css scss
Bootstrap - www.bootcss.com/
在早先的jquery时代，bootstrap是一个开发利器，作为一个栅格化的CSS工具库，在现在今React，Vue大行其道的开发潮流下，bootstrap依然有着一席之地，因为毕竟是个css库，尤其它对css布局，各种居中，响应式方面的规范性，熟练使用它能够在写一些css样式时，节约大量的开发时间。 并且学习bootstrap的用法时，能够学习到很多scss中比较高级的函数用法等。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
6. taiwind css自适应
Tailwind - www.tailwindcss.cn/
Tailwind是最近非常流行的一个css库，拥有非常良好的响应式体验。
上一代css框架是提供完整的设计输出，是组件级别。例如一个input组件，框架已经帮你写好了所有样式，你只要把类名丢进去，一个input就被美化了。当然bootstrap还提供了sass版本，你可以通过修改变量来实现自定义，但毕竟自定义空间不大。
Tailwind提供的是设计规范，相当于理念层面的素材。比如还是input组件，你需要首先对input进行拆解，它的边框、字体、阴影、圆角等等，你要从框架里面把这些元素挑出来进行组合。
这样做极大的激发了设计师的创作想象力，也为设计师编程提供可能。
工程化也是趋势，通过构建工具，可以干很多事，甚至发明新语法。可以说，未来的css框架一定是这个趋势：更细化，更工程化。
它的美化效果不一定是最好的。但是它的这种工作方式，一定会在不同公司得到发挥，特别是有统一设计团队，要统一UI的公司。对于这些公司而言，写好设计规范，接下来就是拼凑。如何设计师直接通过组合得出效果，对研发人员来说也节省了时间。
Tailwind栅格化用例:
<div class="grid grid-flow-col grid-rows-2 grid-cols-3 gap-4">
<div> 1 </div>
<div class="col-start-3"> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div class="row-start-1 col-start-2 col-span-2"> 5 </div>
</div>
7. animate.css 动画库
Animate.css - animate.style/
对于前端开发者来说，掌握一门能够开发出炫酷动画的手艺是必不可少的，大大小小的网页，营销活动中都缺少不了互动动画的身影，animate.css就是一款动画效果丰富，能够随意搭配的优秀动画轮子库，而且网站上能够即使预览各种动画效果，堪称一款动画开发利器。
8. SheetJS 处理excel数据
sheetjs - sheetjs.com/
对于前端开发工程师来说，现在越来越需要一些前端页面跟excel的处理，不仅仅是基本的导入导出功能，可能还有更为复杂的需求，需要前端直接参与excel数据的预览，展示，处理，这一款excel处理插件能很好地帮助到开发人员，随心所欲地处理各种excel数据。
