67 个拯救前端开发者的工具、库和资源 - SDK.CN - 中国领先的开发者服务平台
nangweng
7年前
<p><strong>67 个拯救前端开发者的工具、库和资源</strong></p> <p>摘要：在本文中，我不会去谈 React、Angular、Vue 等等这些大的前端框架，也不会谈 Atom、VS code、Sublime 等等这些已经很出名的代码编辑器，我只是想简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过，也可能没见过，如果有哪个/些让你眼前一亮，那么我的分享就很值了。</p> <p><img src="https://simg.open-open.com/show/a215fdd86c4863b1c2bf859f17399e23.jpg" alt="67 个拯救前端开发者的工具、库和资源 - SDK.CN - 中国领先的开发者服务平台" width="1600" height="1103"></p> <p><strong>本文由myvin在众成翻译平台翻译。</strong></p> <p>在本文中，我不会去谈 React、Angular、Vue 等等这些大的前端框架，也不会谈 Atom、VS code、Sublime 等等这些已经很出名的代码编辑器，我只是想简单的分享一套我认为有助于提升开发者工作流的工具集。</p> <p>这套工具集中的大部分你可能见过，也可能没见过，如果有哪个/些让你眼前一亮，那么我的分享就很值了。</p> <p>这个列表包含许多种类的资源，所以这里我将它们分组整理。</p> <h3>Javascript 库</h3> <p><a href="/misc/goto?guid=4958856221865922919">Particles.js </a>— 一个用来在 web 中创建炫酷的浮动粒子的库</p> <p><a href="/misc/goto?guid=4959728701520121530">Three.js</a> — 一个用来在 web 中创建 3d 物体和 3d 空间的库</p> <p><a href="/misc/goto?guid=4959754545244412198">Fullpage.js</a>— 快速实现全屏滚动特性</p> <p><a href="/misc/goto?guid=4959754545323294882">Typed.js</a> — 打字机效果</p> <p><a href="/misc/goto?guid=4959754545409816597">Waypoints.js </a>— 滚动到某个元素位置时触发一个功能</p> <p><a href="/misc/goto?guid=4959627241162101896">Highlight.js </a>— web 语法高亮</p> <p><a href="/misc/goto?guid=4958535749191364478">Chart.js</a> — 使用 JavaScript 创建漂亮的图表</p> <p><a href="/misc/goto?guid=4958826271417413261">Instantclick</a> — 能够明显加速网站加载时间，鼠标 hover 时预加载资源</p> <p><a href="/misc/goto?guid=4959622923025671299">Chartist</a> — 另一个图表库</p> <p><a href="/misc/goto?guid=4959754545603783886">Motio </a>— 一个基于动画和平移的雪碧图库</p> <p><a href="/misc/goto?guid=4958847335485646981">Animsition</a> — CSS 实现动画过渡的 jQuery 插件</p> <p><a href="/misc/goto?guid=4959754545707912160">Barba.js</a> — 流式页面过渡</p> <p><a href="/misc/goto?guid=4958537862665070200">TwentyTwenty </a>— 一个对比图片的可视化 diff 工具</p> <p><a href="/misc/goto?guid=4959754545823262651">Vivus.js</a> — 在 SVG 上绘制动画</p> <p><a href="/misc/goto?guid=4958826167844090534">Wow.js </a>— 滚动时展现动画</p> <p><a href="/misc/goto?guid=4958859164442566364">Scrolline.js</a> — 页面滚动时显示滚动进度</p> <p><a href="/misc/goto?guid=4958848917656773961">Velocity.js</a> — 快速流畅的 JavaScript 动画</p> <p><a href="/misc/goto?guid=4959754545985186557">Animate on scroll</a> — 漂亮的页面滚动元素动画</p> <p><a href="/misc/goto?guid=4958341606252679125">Handlebars.js</a> — Javascript 模板</p> <p><a href="/misc/goto?guid=4958541729700401726">jInvertScroll</a> — 视差滚动</p> <p><a href="/misc/goto?guid=4958832424456169431">One page scroll</a> — 又一个页面滚动库</p> <p><a href="/misc/goto?guid=4958832696600166046">Parallax.js</a> — 对智能设备方向变化做出响应的视差引擎</p> <p><a href="/misc/goto?guid=4958534041848943438">Typeahead.js </a>— 搜索补全</p> <p><a href="/misc/goto?guid=4959754546211826055">Dragdealer.js</a> — 炫酷拖拽</p> <p><a href="/misc/goto?guid=4958834575574498450">Bounce.js </a>— 创建炫酷的 CSS3 动画</p> <p><a href="/misc/goto?guid=4958850007294101006">Pagepiling.js</a> — 全屏滚动</p> <p><a href="/misc/goto?guid=4958871779344012716">Multiscroll.js </a>— 两列垂直反向滚动</p> <p><a href="/misc/goto?guid=4958832695694964179">Favico.js</a> — 动态 favicon</p> <p><a href="/misc/goto?guid=4958851080922949867">Midnight.js </a>— 固定头部切换效果</p> <p><a href="/misc/goto?guid=4959754546437734338">Anime.js </a>— 动画库</p> <p><a href="/misc/goto?guid=4959754546513649750">Keycode</a> — 获取键盘按键的 JavaScript keycode</p> <p><a href="/misc/goto?guid=4958828995744156149">Sortable</a> — 拖拽插件</p> <p><a href="/misc/goto?guid=4959754546635948527">Flexdatalist </a>— 自动补全</p> <p><a href="/misc/goto?guid=4959754546706133262">Slideout.js </a>— 移动应用侧滑导航</p> <p><a href="/misc/goto?guid=4959754546796648455">Jquerymy</a> — 使用 jQuery 实现双向数据绑定</p> <p><a href="/misc/goto?guid=4959728701109771983">Cleave.js </a>— 实时格式化输入内容</p> <p><a href="/misc/goto?guid=4959754546904465460">Page</a> — 客户端单页应用路由</p> <p><a href="/misc/goto?guid=4959754546989766980">Selectize.js</a> — 用来添加 tag 的 Hybrid 选择框</p> <p><a href="/misc/goto?guid=4958975873857819695">Nice select </a>— 创建漂亮的选择框的 jQuery 库</p> <p><a href="/misc/goto?guid=4959754547093077145">Tether</a> — 使用固定定位来创建相关元素</p> <p><a href="/misc/goto?guid=4959615962844491744">Shepherd.js </a>— 为应用创建新手引导</p> <p><a href="/misc/goto?guid=4959628475485886697">Tooltip</a> — tooltip 提示框</p> <p><a href="/misc/goto?guid=4958872981257799866">Select2</a> — Jquery 选择框插件</p> <p><a href="/misc/goto?guid=4959754547269999594">IziToast</a> — 通知弹窗实现</p> <p><a href="/misc/goto?guid=4959754547348958768">IziModal </a>— 模态框实现</p> <h3>CSS 库 / 设计相关</h3> <p><a href="/misc/goto?guid=4958960993055021935">Animate.css</a> — 动画库</p> <p><a href="/misc/goto?guid=4959754547461193203">Flat UI Colors </a>— 扁平化设计配色</p> <p><a href="/misc/goto?guid=4959754547548448973">Material design lite</a>— 基于 Google material design 的框架</p> <p><a href="/misc/goto?guid=4959754547640011177">Colorrrs </a>— 随机颜色生成器</p> <p><a href="/misc/goto?guid=4959754547726452566">Section separators</a> — CSS 实现区域分割</p> <p><a href="/misc/goto?guid=4958535706512637813">Topcoat</a> — 框架</p> <p><a href="/misc/goto?guid=4959754547840826950">Create ken burns effect </a>— 使用 CSS3 动画实现 Ken burns 特效</p> <p><a href="/misc/goto?guid=4959754547936262441">DynCSS</a> — 给 CSS 添加 function，动态化 CSS</p> <p><a href="/misc/goto?guid=4959735483822337904">Magic animations</a> — CSS3 实现动画特效</p> <p><a href="/misc/goto?guid=4959754548050866385">CSSpin</a> — css spinners 合集</p> <p><a href="/misc/goto?guid=4959754548131765378">Feather icons</a> — Icon 集合</p> <p><a href="/misc/goto?guid=4959620023920679292">Ion icons</a> — Icon 集合</p> <p><a href="/misc/goto?guid=4958853181012494445">Font awesome</a> — Icon 集合</p> <p><a href="/misc/goto?guid=4959754548276746719">Font generator</a> — 组合多个字体创建混合字体</p> <p><a href="/misc/goto?guid=4958871306730970908">On/Off switch</a> — 使用 CSS 创建 on/off 开关、radio 按钮</p> <p><a href="/misc/goto?guid=4959748870710466120">UI Kit</a> — 框架</p> <p><a href="/misc/goto?guid=4958332662969681733">Bootstrap</a> — 框架</p> <p><a href="/misc/goto?guid=4958338175196780124">Foundation </a>— 框架</p> <h3>有用的产品/链接</h3> <p><a href="/misc/goto?guid=4959733733430775309">cheatsheet</a> — 可以写在中的所有标签</p> <p><a href="/misc/goto?guid=4958825281526224555">Ghost </a>— 基于 Node.js 的博客平台</p> <p><a href="/misc/goto?guid=4959754548628465898">What runs</a> — 一个用于网站技术分析的 Chrome 插件</p> <p><a href="/misc/goto?guid=4959754548720956367">Learn anything </a>— 一个强大的用于分析某个主题的思维导图</p> <p>这是我个人有时在使用的一些工具/框架/库的一个列表。很高兴在<a href="/misc/goto?guid=4959754548803106706">推ter</a> 上和我联系，并分享你的发现。</p> <p> </p> <p>来自：<a href="/misc/goto?guid=4959755774453276831">67 useful tools, libraries and resources for saving your time as a web developer</a></p> <p> </p>