籠統的前端

時間 2019-11-15

標籤籠統前端简体版

原文原文鏈接

原文地址javascript

核心 Core

包管理工具 Package Managers

前端性能 Front-End Performance

WebPagetest
PerfBudget
CriticalCSS
Picturefill

編輯器 Text Editors

JS框架 JS Frameworks

UI框架 UI Frameworks

JS預處理 JS Preprocessors

Babel
TypeScript
CoffeeScript

響應式網頁 Responsible WEB Design

漸進加強、可訪問性

過程自動化 Process Automation

Grunt
Gulp

模板引擎 Templating

代碼質量 Code Quality

JSCS
ESLint

瀏覽器刷新 Browser Refreshing

LiveReload
Guard

構建工具 Build Tools

CSS預處理器 CSS Preprocessors

後端 Back-End

nodeJS
PHP

版本控制 Version Control

代碼測試 Testing

CSS設計模式 OOCSS & Style Guides

MVCSS

核心 Core

插件

parallel.js: 先後端通用的一個並行庫
zepto: 用於現代瀏覽器的兼容 jQuery 的庫
totoro: 穩定的跨瀏覽器測試工具
TheaterJS: 一個用於模擬人輸入狀態的 JS 庫
stellar.js: 前端用於實現異步滾動效果的庫，現已再也不維護
skrollr: 另外一款實現一步滾動的開源庫，使用人數衆多，可實現各類狂拽酷炫掉渣天的前端效果，看真相
Framework7: 前端框架，是開發人員能夠基於 web 技術構建 IOS7 程序
regulex: 用於生成正則表達式的可視化流程圖
markdown-it: 新型 Markdown 解析器，快速，支持插件
multiline: 用於 Javascript 中的多行文本，相似於 Ruby 的 HERE Doc
screenfull.js: 全屏插件，支持各大瀏覽器
lunr.js: 相似於 Solr, 可是用於瀏覽器上的全文搜索引擎，能夠爲 JSON 建立索引，離線也可使用
jquery.hotkeys: jQuery 插件，用於綁定熱鍵
breach_core: Javascript 編寫的 Browser (瀏覽器)
octocard: 用於生成 Github 信息卡片的庫
github-cards: 用於生成 Github 信息卡片的庫
money.js: 輕量級貨幣轉換庫，web 和 node 皆可用
accounting.js: 輕量級的數字、貨幣轉換庫
javascript-algorithms: Javascript 實現的各類算法集合
lazy.js: 相似於 underscore, 可是會延遲執行，某些場景下，性能會有很大的提高
seajs: 前端模塊加載器，解決模塊化、依賴等問題
jQuery-One-Page-Nav: 單頁應用中一個用於處理導航欄的庫
js.js: Javascript 實現的 javascript JIT
jquery-ui: jQuery 團隊開發的 UI 相關的前端庫，功能強大
todomvc: 分別基於 AngularJS/EmberJS/Backbone等實現的 TODO List, 幫助開發者選擇前端 MVC 庫
localForage: Mozilla 出品，用於離線存儲，基於IndexedDB, WebSQL 或者 localStorage, 提供一致的接口
EventEmitter: 瀏覽器版的 EventEmitter
jquery.serializeJSON: jQuery 插件，用於將 form 表單序列化成 JSON 數據
knockout: 前端 MVVM 框架，用於開發富前端應用
mermaid: 能夠根據文本生成流程圖，相似於 Markdown 的語法
js-sequence-diagrams: 另外一款能夠根據文本生成流程圖的庫，相似於 Markdown 的語法
flow: 一個用來檢測 Javascript 語法錯誤的庫， Facebook 出品
zoomooz: jQuery 插件，用來處理瀏覽器縮放
fancyBox: 一個用於放大縮小圖片、Web 內容或者多媒體元素的庫，優雅大方
mithril.js: 輕量型前端 MVC 框架，部分使用場景下性能優於 Angular.js 和 React
backbone: 強大的前端 MVC 庫，鼻祖級前端庫，最初爲了配合 Rails 來模塊化前端應用，兼容性良好 (兼容到 IE6)，插件豐富，性能良好
jquery.smartbanner: smartbanner 是從 IOS6 開始支持的一個新特性, 這個插件提供了對早期 IOS4/5 和 Android 的支持
jquery.scrollTo: 在頁面上以一個元素爲起始以動畫的方式移動(ScrollTo)到另外一個元素，支持回退等
jScrollPane: 自定義的滾動條，讓全部瀏覽器都顯示同樣的滾動條
onepage-scroll: 提供相似於 iPhone6 展現頁相似的效果，適用於單頁應用，兼容到 IE8
scrollMonitor: 前端插件用來監控元素的滾動事件(進入、退出等)，性能很好
ScrollMagic: 神奇的滾動交互效果插件，能夠在滾動的過程當中設置各類各樣的動態效果
infinite-scroll: 滾動加載，滾動到最下到自動加載， Paul Irish 大神之做
animatable: 僅僅依靠 border-width 和 background-position 實現的各類動態效果，看真相
Fluidbox: 頁面上內嵌圖片的放大縮小效果，相似於 Medium 中的效果
jquery-validation: jQuery 的一個插件，用於校驗 Form 表單
BigVideo.js: jQuery 的一個插件, 用於實現大背景(視頻、圖片)效果
emscripten: 一款基於 LLVM, 能夠將 C/C++ 轉換成 Javascript 的工具，使得 Javascript 能夠近乎 Native 的速度
qrcode-generator: 各類語言的二維碼生成工具
device.js: 一個能夠檢測設備類型的工具，可讓咱們根據不一樣的設備來爲其定製響應的 Javascript 和 CSS
jquery-qrcode: jQuery 插件，用來生成二維碼
Wookmark-jQuery: jQuery 的一個插件，能夠用來實現瀑布流的效果
isotope: 能夠用來過濾、排列布局，實現美觀的動態佈局切換效果，Demo
lazysizes: 功能強大的圖片延遲加載工具，能夠首先加載一個低質量的圖片，而後再加載高質量的圖片
progressbar.js: 簡潔美觀的進度條，扁平化
pigshell: 一個由 Javascript 實現的Shell, 將互聯網當作一個大的文件系統, 經過 cd/ls/cat.....等命令, 能夠訪問 Facebook/Twitter/Google Drive 等網絡服務
spectrum: Js實現的顏色選擇器 (Colorpicker)
jQuery.countdown: jQuery 倒計時插件
summernote: WYSIWYG 富文本編輯器
awesomplete: 很是輕型的一個自動補全 JS 庫, 沒有任何依賴, 配置簡單, 美觀
switchery: IOS 7 上 Switch 的 JS 實現, 支持 IE8 及以上瀏覽器
trix: Basecamp 公司出品的富文本編輯器，簡潔小巧
sensor.js: 在智能移動設備瀏覽器上，經過HTML5的api使用移動設備的功能。定位、運動、傾斜等
hyhyhy: 用於建立基於 HTML5 的演示文稿
swipebox: jQuery 插件，用於處理移動端的觸摸事件
FileAPI: 前端用戶處理文件（拖放、多文件上傳等）
Sortable: 現代瀏覽器上用於實現元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依賴 jQuery
Swiper: 用於實現瀏覽器上的滑動切換效果，支持硬件加速
matter-js: 2D 物理效果引擎，碰撞、彈跳等
jQTouch: 用於輔助建立手機端的 Web 應用，支持主題、Zepto.js 等
snabbt.js: 一個利用 Javascript 和 CSS transform 的 animation 庫
c3: 基於 D3 的圖表庫
echarts: 企業級圖表庫，百度開發
parallax.js: 一個用於響應智能手機 orientation 的庫
jQuery-Animate-Enhanced: jQuery 動畫庫的一個加強，用於現代瀏覽器
wysihtml: 富文本編輯器，適用於現代瀏覽器
slip: 一個經過滑動或者拖拽來操控列表的庫
evil-icons: 一個矢量圖庫，提供 Ruby/Node 等支持
PhotoSwipe: JS 的一個圖片展現庫
focusable: 是頁面上一個元素高亮的庫，有圖有真相
firefox.html: Firefox 在瀏覽器端的實現 —— HTML 版的 Firefox
jquery-mobile: jQuery 團隊開發的用於輔助手機端 web app 開發的庫，基於 HTML5
mobile-angular-ui: 基於angularjs和bootstarp的web app開發框架
interact.js: 一個適用於現代瀏覽器的，用於處理手勢、拖放、縮放等的庫
rebound-js: 實現部分物理效果，Facebook 出品
basket.js: 基於 LocalStorage 的資源加載器，能夠用來緩存 script 和 css, 手機端使用速度快於瀏覽器直接緩存
iscroll: 高性能的滾動(scroll)處理庫，功能強大，支持各類事件，不依賴任何的庫，且插件豐富, 大衆點評的手機端列表滾動就是用這個庫處理的
metrics-graphics: 基於 D3 的圖表庫，簡潔、高效，Mozilla 出品
accessible-html5-video-player: Paypal 出品的 Video 播放器
loading: 幾種 Loading 效果，基於 SVG
flippant.js: 一款可以漂亮的網頁元素翻轉效果庫，代碼許久不更新，不過做爲源碼學習仍是不錯的
move.js: 基於 CSS3 的前端動畫框架
scrollReveal.js: 使元素以很是酷帥的方式進入畫布 (Viewpoint)，看 Demo
Modernizr: 一個用來檢測 HTML5 和 CSS3 支持狀況的庫
foundation: 另外一款前端模版框架，相似於 Bootstrap
Flat-UI: Bootstrap 的一款主題，簡潔美觀
iCheck: 一款漂亮的 Checkbox 插件
Swipe: 很是輕量級的一個圖片滑動切換效果庫, 性能良好, 尤爲是對手機的支持, 壓縮後的大小約 5kb
slick: 功能異常強大的一個圖片滑動切換效果庫
SocialButtons: 漂亮的社交按鈕
sweetalert: 一個很是美觀的用於替換瀏覽器默認 alert 的庫
web-animations-js: Javascript 實現的 Web Animation API
vivus: 能夠動態描繪 SVG 的 JS 庫, 支持多種動畫
plyr: 輕量, 小巧, 美觀的 HTML5 視頻播放器
timesheet.js: 基於 HTML5 & CSS3 時間表
slideout: 一個很是美觀的側滑菜單

包管理工具 Package Managers

NPM

菜鳥教程NPM 使用介紹 http://www.runoob.com/nodejs/nodejs-npm.html
淘寶 NPM 鏡像 https://npm.taobao.org/
npm 模塊安裝機制簡介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html
npm包搜索地址 https://www.npmjs.com/

Bower

Bower中文網 http://www.bowercn.com/
Bower：客戶端庫管理工具-阮一峯 http://javascript.ruanyifeng.com/tool/bower.html

Yarn

yarn中文網 https://yarnpkg.com/zh-Hans/快速、可靠、安全的依賴管理
YARN 簡介 https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/

編輯器 Text Editors

WebStorm

官網下載 http://www.jetbrains.com/webstorm/download
前端網破解版下載 http://www.qdfuns.com/tools

VScode

官網下載 https://code.visualstudio.com/
vscode 插件精選 - 獻給全部前端工程師http://www.javashuo.com/article/p-figfazwj-cs.html

SublimeText

官網下載 https://www.sublimetext.com/
前端網破解版插件版下載 http://www.qdfuns.com/toolscss
SublimeCodeIntel: Sublime Text 的代碼補全工具，支持多種語言
Emmet：一個用於提升開發效率的編輯器插件，前身是Zen coding
SublimeLinter: 一個提供代碼質量檢測的插件
SublimeTmpl：快速新建指定的模版文件
Syntax-highlighting-for-Sass：sass代碼高亮插件
MarkdownEditing: Sublime Text 強大的 Markdown 擴展, 提供快捷鍵, 主題等
ApplySyntax: 輔助檢測語法插件
CTags: Sublime Text Ctags 支持插件, 須要安裝 ctags
sublime-react: React 代碼高亮html

Atom

官網下載 https://atom.io/

HBuilder

官網下載 http://www.dcloud.io/

JS框架 JS Frameworks

Backbone

Backbone.js API中文文檔http://www.css88.com/doc/backbone/

AngularJs

中文官方文檔https://angular.cn/
angularjs中文網http://www.apjs.net/
angularjs教程http://www.angularjs.net.cn/
Angular 基礎入門http://www.cnblogs.com/micua/p/angular-essential.html前端
angular-masonry: Masonry 的 AngularJS 插件，用於瀑布流
angular-schema-form: 根據 JSON 生成響應的 Form 表單
restangular: Angular 中用來處理 RESTful API 的插件，可替代 $resource
ng-cordova: Cordova 經常使用組件的 Angular 版本
angular-translate: Angular 的國際化 (I18n)
ng-inspector: Chrome 插件，用於調試 Angular
angularjs-style-guide: AngularJS 代碼風格
ngReact: React 的 Angular 插件，能夠在 Angular 中使用 React Components
material: Google Material Design 效果的 Angular 實現
angular-local-storage: Angular 插件, 提供了對 localStorage 的友好支持, 並對不支持的瀏覽器使用 cookie 優雅降級
angular-filter: 一組有用的 Angular Filters
bindonce: Angular 插件, 用於減小 Watcher 的數量, 提高性能vue