Ⅰ 前端可視化開發要用到哪些工具、插件
ThingJS 基於 HTML5 和 WebGL 技術，可方便地在主流瀏覽器上進行瀏覽和調試，支持 PC 和移動設備。ThingJS
為可視化應用提供了簡單、豐富的功能，只需要具有基本的 Javascript 開發經驗即可上手。
ThingJS
提供了場景載入、分層級瀏覽，對象訪問、搜索、以及對象的多種控制方式和豐富的效果展示，可以通過綁定事件進行各種交互操作，還提供了攝像機視角控制、點線面效果、溫濕度雲圖、界面數據展示、粒子效果等各種可視化功能。
ThingJS提供如下相關組件和工具供用戶使用：
CityBuilder：聚焦城市的 3D 地圖搭建工具，打造你的 3D 城市地圖。
CamBuilder：簡單、好用、免費的 3D 場景搭建工具。
ThingPano：全景圖製作工具，輕松製作並開發全景圖應用，實現 3D 宏觀場景和全景微觀場景的無縫融合。
ThingDepot：上萬種模型，數十個行業，自主挑選，一次製作多次復用。
Ⅱ 前端開發常用哪些工具軟體
前端開發的編譯器在選擇上還是很多的。在學校里，老師主要講三個前端開發軟體：
1、WebStorm
幫助編寫HTML、CSS、Less、Sass和Stylus代碼，並且支持Node.js和主流框架，如React、Angular、Vue.js、Meteor等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。但是付費軟體。
2、IntelliJ idea
頁面很簡單，乍一看像是一個記事本，它也確實可以當記事本用。有很多特色插件可以使用，支持多種編程語言的語法高亮顯示，具有代碼折疊功能。
2、HBuilderX
HBuilderX是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。是HBuilder下一代版本，具有輕便、適合vue框架的特點。
Ⅲ 作為一個前端開發，vscode有哪些值得安裝的插件
WijmoJS 前端開發工具包由多款高效、靈活的純前端控制項組成，全面支持 Angular、React、Vue、TypeScript、Knockout 和 Ionic框架，用於快速搭建企業級桌面/移動 Web 應用程序。WijmoJS 可靈活應對客戶需求變化，縮短新項目研發周期，高效處理海量用戶數據，提升產品核心競爭力。
藉助葡萄城深厚的技術底蘊，WijmoJS 為各領域用戶提供更穩定、更高效的前端開發工具，幫助中國招商銀行、微軟、思科、特斯拉、富士通等知名企業快速搭建其 Web 應用程序。WijmoJS 憑借先進的觸控設計、全面的框架支持、頂級的控制項性能、零依賴的產品特性和易用、輕松的操作體驗，全面滿足前端開發所需，已成為構建企業 Web 應用程序最高效的純前端開發工具包。
與此同時，WijmoJS 的可視化設計器已正式推出，包含 VSCode 設計器和在線設計器。通過使用設計器，您可以在想要配置的控制項中選擇並瀏覽所有可用的內置選項，然後導出要在 WijmoJS 應用程序中使用的代碼，或者通過設計器自動更新 HTML 源文件。
Ⅳ Web前端開發工程師要掌握的前端開發工具
今天小編要跟大家分享的文章是關於Web前端開發工程師要掌握的前端開發工具。市面上有許多前端開發工具可以加速Web開發工作。本文是對Web
開發工具的一次精選匯總，分別介紹了每款工具的關鍵特性，並已附上下載鏈接。下面來和小編一起看一看吧！
1.NoviBuilder
NoviBuilder是一個拖放式構建器，它對於經驗豐富的Web
開發人員而言是一個不錯的選擇。它為開發人員提供了訪問源代碼的許可權，並允許開發人員在Web設計中進行多項更改。你能用它完全控制你的Web
項目，並且可以充分利用它的各項功能。盡管這款工具對於初學者來說可能很難入門，但在它的眾多優勢面前這一不足也就不值一提了。
特性：
·高級代碼編輯器
·附加應用集成
·多種預制主題
·拖放界面
·電商功能支持
·預覽工具
下載鏈接：
#/
2.ONESubscription
ONESubscription是一款很有用的Web
開發工具包，包含了眾多高質量的數字產品。它提供了大批高品質的部件，可以打造出功能完善的博客、在線商店、登錄頁面等各種網站。總的來說，它能為你提供數以千計的主題和模板、多種插件和圖形元素、附加服務以及其他許多好處。
特性：
·對所有部件提供專業支持
·定期更新
·安全性(如果你訂閱後尚未從資料庫中下載任何內容，則可以在訂閱開始後的14天內輕松取消訂閱)
·無使用限制的年度許可證
·很多有用的服務(例如模板定製或安裝)
下載鏈接：
#/
3.CreativeTim
CreativeTim提供了基於Bootstrap的設計元素，可幫助開發者加快開發工作。這款工具可以用來創建Web和移動應用。
特性：
·提供了最簡單的開發上手途徑，也就是預制的示例頁面;
·這款工具可以幫助你節省時間，並且讓你專注於業務模型;
·提供易於使用的管理模板
·管理面板可幫助你節省大量時間
·提供預制的設計塊和元素
訂閱鏈接：
#/2JMju8g
4.Npm
Npm是JavaScript的Node包管理器。開發人員可以用它尋找可重用的軟體包，然後用各種方式將這些包組合出強大的產品。這款Web
開發工具是一個命令行實用程序，用來與軟體包的存儲庫交互。
特性：
·在存儲庫中發現並重用超過470,000個免費代碼包
·在團隊內鼓勵代碼發現和重用
·發布和控制名稱空間的訪問許可權
·使用相同的工作流程管理公共和私人代碼
下載鏈接：
#/
5.TypeScript
TypeScript是一種開源前端腳本語言。它是JavaScript
的嚴格語法超集，添加了可選的靜態類型。它是專門為開發大型應用程序而設計的，並可以編譯為JavaScript。
特性：
·TypeScript支持其他JS庫
·可以在任何運行JavaScript的環境中使用Typescript
·它支持包含現有JavaScript庫的類型信息的定義文件，例如C/C++頭文件;
·可跨瀏覽器、設備和操作系統移植;
·它可以在任何運行JavaScript的環境中運行
下載鏈接：
#/index.html#download-links
6.CodeKit
Codekit是一款前端Web開發工具。它可以支持開發人員更快地構建網站，它可以合並JS代碼、對JS代碼進行瘦身，還能檢查
JavaScript代碼的語法，它還可以優化圖像。
特性：
·注入CSS更改而無需重新載入整個頁面
·合並腳本以減少HTTP請求。
·瘦身代碼以減小文件大小
·自動正確處理大多數語言
下載鏈接：
#/
7.WebStorm
WebStorm為JavaScript提供了智能編碼輔助。它為Angular、React.js、Vue.js和Meteo
提供了高級編碼輔助，它還可以幫助開發人員在處理大型項目時提升編程效率。
特性：
1.WebStorm幫助開發人員在處理大型項目時提升效率
2.它提供了一些內置工具，用於調試、測試和跟蹤客戶端和Node.js應用程序;
3.它與流行的Web開發命令行工具集成
4.Spy-js內置工具可用來跟蹤JavaScript代碼
5.它提供了一個統一的UI，能夠與許多流行的版本控制系統協作;
6.可以高度定製，以完美適應各種編碼風格;
7.它為客戶端代碼和Node.js應用提供了內置的調試器
下載鏈接：
#/Webstorm/download/#section=windows
8.HTML5Boilerplate
HTML5Boilerplate幫助開發人員構建響應快、健壯和適應性強的Web應用或網站。它是一組可下載的文件，它提供了一個十分完善的
HTML模版，完善到所有的頁面似乎都應該遵守這個規則。
特性：
·它讓開發人員可以使用HTML5元素
·它的設計遵從漸進增強原則
·它的Normalize.css可用於CSS規范化，還提供了常見的錯誤修復;
·它提供了Apache伺服器配置以提高性能和安全性
·它提供了GoogleUniversalAnalytics代碼段的優化版本
·它可以防止控制台語句在較舊的瀏覽器中導致JavaScript錯誤
·提供大量內聯和隨附文檔
下載鏈接：
#/
9.AngularJS
AngularJS是前端開發人員的另一款必備工具。它是一個開放源代碼的Web應用程序框架，它能幫助開發人員擴展Web應用程序的HTML
語法，它還提供了可訪問、可讀和表達性強的開發環境，從而簡化了前端開發流程。
特性：
·它是一個開源項目，完全免費，並被全球成千上萬的開發人員使用;
·它提供了創建RICH互聯網應用的能力
·它提供了基於MVC使用JavaScript編寫客戶端應用程序的選項
·它會自動處理JavaScript代碼，使其兼容各種瀏覽器。
下載鏈接：
#/
10.Sass
Sass是最可靠、最成熟也是最強大的CSS擴展語言。這款工具可用來輕松擴展站點現有CSS的功能，例如變數、繼承和嵌套等。
特性：
·使用它的前端工具編寫任何代碼都非常簡單明了
·支持語言擴展，例如變數、嵌套和混合(mixins);
·提供了用於處理顏色和其他值的許多有用函數
·高級功能，例如庫的控制指令;
·它提供了具有良好格式、可自定義的輸出。
下載鏈接：
#/
11.Backbone
Backbone.js提供了具有鍵值綁定和自定義事件的模型，來為Web應用程序提供結構。
特性：
·Backbone.js允許開發人員開發單頁應用程序
·Backbone.js有一個簡單的庫，用於分隔業務和用戶界面邏輯;
·這款工具使代碼變得簡單、系統和組織化。它可以充當任何項目的骨幹;
·它負責管理數據模型和用戶數據，並在服務端顯示這些數據;
·它允許開發人員創建客戶端Web應用程序或移動應用程序。
下載鏈接：
#/
12.Grunt
Grunt是NodeJS
上流行的任務運行器。它很靈活，用戶很多，當涉及到任務自動化用途時，它是開發人員的首選工具，它提供了許多打包的插件來執行常見任務。
特性：
·它的工作流程非常簡單，只需編寫一個設置文件即可;
·它讓開發人員只需最少的步驟就能自動執行重復性任務;
·它有一個簡單直接的方法，並提供了JS版本的任務，JSON版本的配置;
·Grunt內置許多用於擴展插件和腳本功能的任務
·它能加快開發流程並提高項目效率
·Grunt的生態系統非常龐大，因此用戶可以輕松為任何事情設置自動化流程;
·這款Web開發工具減少了執行重復任務時出錯的概率。
下載鏈接：
#/
13.Jasmine
Jasmine是一款行為驅動的JavaScript框架，用於測試JavaScript代碼。它不依賴於其他任何JavaScript
組件，這款開源工具不需要DOM。
特性：
·低開銷，無外部依賴;
·開箱即用，測試代碼所需的一切都打包好了;
·使用相同的框架運行瀏覽器測試和Node.js測試。
下載鏈接：
#/index.html
14.CodePen
CodePen是一個面向前端設計人員和開發人員的Web
開發環境。它的宗旨是提供更快、更順暢的開發環境。開發人員可以用它構建和部署網站，並構建測試用例。
特性：
·可以用它來構建組件，以備今後使用;
·它包含一些很棒的功能，可以提高CSS開發人員的開發效率;
·允許實時查看和實時同步
·預填充API功能允許添加鏈接和演示頁面，而無需編寫任何代碼。
下載鏈接：
#/
15.Foundation
Foundation是支持任何設備、介質和可訪問性的前端框架。這個響應式前端框架使開發人員可以很容易地設計響應式網站、應用和電子郵件。
特性：
·它提供了最干凈的標記，而不會犧牲效用和性能;
·可以自定義構建以包含或刪除某些元素，它定義了列的大小、顏色和字體大小;
·更快的開發和頁面載入速度
·Foundation針對移動設備進行了真正的優化
·適用於所有級別開發人員的可定製性
·它將響應式設計提升到了新的水平，並為平板電腦提供了開發人員迫切需要的中等網格。
下載鏈接：
#/sites/download.html/
16.SublimeText
SublimeText是非開源的跨平台源代碼編輯器。這款應用開發工具原生支持許多編程語言和標記語言。
特性：
·命令面板功能允許匹配的按鍵調用任意命令
·同時編輯功能允許對多個區域應用相同的交互更改
·提供基於Python的插件API
·允許開發人員針對項目定製首選項
·與TextMate的許多語言語法兼容
下載鏈接：
#/
17.GridGuide
GridGuide是另一款重要的前端開發工具。它允許在設計中創建像素級精確的網格，這是一個簡單的工具，可以提供非常有價值的工作流程。
特性：
·添加基於畫布、畫板和選定圖層的參考線;
·快速向邊緣和中點添加輔助線
·允許為其他畫板和文檔創建重復的指南
·幫助用戶創建自定義網格
下載鏈接：
#/
18.Chrome開發工具
Chrome開發工具是Chrome內置的一組調試工具。這些工具使開發人員可以進行各種測試，從而輕松節省大量時間。
特性：
·它允許添加自定義CSS規則
·用戶可以查看邊距、邊框和填充;
·它可以幫助開發人員模擬移動設備
·可以將開發工具用作編輯器
·打開開發工具後，用戶可以輕松禁用瀏覽器的緩存。
下載鏈接：
#/devtools
19.Modaal
Modaal是前端開發插件，可提供高質量、靈活和可訪問的modal。
特性：
·針對輔助技術和屏幕閱讀器進行了優化
·完全響應，隨瀏覽器寬度縮放;
·具有SASS選項的可定製CSS
·提供全屏和視口模式
·為畫廊打開和關閉modal提供鍵盤控制
·靈活的關閉選項和方法
下載鏈接：
https://github.com/humaan/Modaal
20.Less
Less是用來擴展對CSS語言支持的預處理器。它允許開發人員使用一些讓CSS更易維護和擴展的技術。
特性：
·它可以免費下載和使用
·它提供了高級樣式語法，可讓Web設計人員/開發人員創建高級CSS;
·它可以在瀏覽器開始渲染網頁之前輕松地編譯為標准CSS
·編譯的CSS文件可以上傳到生產Web伺服器
下載鏈接：
#/
21.Meteor
Meteor是一個全棧JavaScript
框架，它由一系列庫和軟體包組成。它在設計理念上對比了參考的框架和庫的優點，以簡化應用程序的原型製作流程。
特性：
·它提升了應用程序的開發效率
·它帶有一些內置功能，包含一些前端庫和基於NODE.js的伺服器;
·它可以大大加快項目的開發速度
·它提供MongoDB資料庫和Minimongo，它們完全用JavaScript編寫;
·實時重新載入功能允許開發時只刷新所需的DOM元素
下載鏈接：
#/install
22.jQuery
jQuery是一種廣泛使用的JavaScript庫。它使前端開發人員能夠專注於各種層面的功能上，它能簡化諸如HTML文檔遍歷、操作和
Ajax之類的事情。
特性：
·QueryUI有助於製作高度交互的Web應用程序
·它是開源的，可以免費使用;
·它提供了強大的主題機制
·它非常穩定且易於維護
·它提供了廣泛的瀏覽器支持
·可以幫助開發人員創建出色的文檔
下載鏈接：
#/download/
23.Github
GitHub是一個受開發人員工作方式啟發的Web開發平台。這款工具使開發人員可以查看代碼、管理項目和構建軟體。
特性：
·輕松協調，保持一致並使用GitHub的項目管理工具完成工作;
·它為開發工作提供了正確的工具
·簡單的文檔和高質量的編碼
·讓所有代碼集中在一處
·開發人員可以直接從存儲庫託管其文檔
下載鏈接：
https://github.com/
原文鏈接：
#/front-end-Web-development-tools.html
以上就是小編今天為大家分享的關於Web前端開發工程師要掌握的前端開發工具的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
文章來源：作者|MahipalNehra譯者|王強
Ⅳ 有哪些生成前端代碼的神器呢
在前端開發的過程中，很多相同的代碼會寫很多遍。如：開始新項目的時候，要寫和舊項目類似腳手架代碼；新建一個組件的時候，要按約定寫組件結構。如果這些重復代碼能用工具來生成，能提升前端的開發效率。
生成代碼的工具分為兩類：基於命令的和基於圖像界面的。
基於命令的工具的優點是，可配置高，效率快。缺點是，可發現性差。適合配置項目很多，配置可以組合的情況。
基於圖像界面的優點是，可發現性強，操作簡單。缺點是如果配置項很多，容易變得很難用。
羅嗦了一堆，下面開始介紹正題。
項目腳手架代碼生成工具
項目腳手架主要做的項目的構建流程，環境的配置等。做到開箱即用。
基於命令的
yo曾經流行過的一個腳手架生成工具。支持定義腳手架內容。基於 yo 的第三方腳手架也很多。
vue-cli。 Vue 項目腳手架。支持自定義腳手架內容，感興趣的可以讀讀從vue-cli源碼學習如何寫模板。
create react appReact 腳手架。比較輕量級，只是整合 webpack 和 react-router。
react boilerplateReact 腳手架。比較重量級，整合了webpack 和 react router, rex, rex suga, reselect 等。
基於圖形界面的
定製 Bootstrap 3
組件代碼生成工具
基於命令的
react boilerplate的nam run generate可生成組件的腳手架代碼。
頁面代碼生成工具
基於命令的
代碼編輯器的代碼片段(Code Snippent)功能。主流的代碼編輯器(Sublime,Atom,VS Code，Web Strom等) 都支持代碼片段。也有寫好的代碼片段的編輯器插件。主流的框架基本都有對應的代碼片段工具。
Emmet提供 HTML，CSS，JS 的自動補全功能。
Bootstrap 3 Snippets
Vuejs Snippets
基於圖形界面的
H5營銷頁面生成工具。有一大堆。
Maka
初夜
兔展
GrapesJS強大的網頁生成器。開源。
LayoutIt托拽 Bootstrap 組件，生成頁面。
Ⅵ 前端什麼樣的代碼開發工具好用
為了讓入行新人能夠更快的掌握Web前端開發，千鋒武漢小編推薦五個優秀的前端開發工具，供小夥伴們參考。
框架類：Bootstrap
全世界最流行的響應式前端框架。基於HTML、CSS、JAVASCRIPT的，它在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格。並兼容大部分jQuery插件。簡潔靈活，使得Web開發更加快捷。國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap源碼進行性能優化而來。
代碼編輯器：Codepen、VScode
CodePen是一個在線的HTML、CSS和JavaScript代碼編輯器，能夠編寫代碼並即時預覽效果。可以用於在線展示的作品，也可以看到其他人在網頁中實現的各種令人驚奇的效果。
VScode免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括弧匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。軟體跨平台支持 Win、Mac 以及 Linux。
性能測試：Google PageSpeed Insights
PageSpeed是谷歌的網頁測試工具，通相信有接觸前端開發的大神們都聽說過Google官方的PageSpeed Tools，這個網頁載入速度檢測工具有在線版本也有一個 Chrome擴展，叫PageSpeed Insights。PageSpeed Insights的Chrome擴展是由谷歌官方開發的一款可以分析頁面載入的各個方面，包括資源、網路、DOM以及時間線等等信息的插件，過檢測評分給你優化建議。
調試類：AtomAptana Studio
它是非常強悍的JavaScript編輯器和調試器，可以支持多種AJAX和JavaScript工具箱，包括JavaScript編輯和調試。具有智能代碼完成、瀏覽器兼容性提示、代碼錯誤提示、文檔結構樹等功能。
HTML5：HTML5測試得分能夠提示您正常使用的瀏覽器對於HTML5標准和相關規范的支持情況的指標。
前端開發工具數量很多，這里只是推薦了千鋒武漢HTML5前端小編覺得比較好的5個前端開發工具。如果你有更好的意見，歡迎給我們留言分享。
Ⅶ 前端開發中有哪些插件或組件，值得自己去實現一次
基礎：圖片懶載入，滾動到底部載入，tab選項卡，幻燈片輪播
高級：富文本編輯器
Ⅷ 前端頁面的插件有哪些
工具類
方便操作對象，數組等的工具庫
underscore.js
lo-dash與underscore.js的api基本一致。與underscore比其優勢是，效率高；可自定義構建
Sugar在原生對象上增加一些工具方法
functional.js提夠了一些Curry的支持
Watch.js監視對象或屬性的變化
bacon.js函數式編程，cool
streamjs用流的方式來對數組，對象進行系列操作
非同步流程式控制制
eventproxy朴靈出品
Arbiter.js詳細
發布訂閱
qPromise風格的
Async.js
mock
Mock.js生成隨機數據和mock Ajax 請求
jquery-mockjaxmockajax請求
時間庫
moment
datejs
瀏覽器探測
Bowser探測具體瀏覽器和版本
ua-parser-js探測具體瀏覽器和版本，操作系統，設備類型等
調試
console-polyfill能放心的使用 console.log()之類的console方法
log讓控制台輸出的log有樣式
Konsole.js在頁面的一個元素里輸出log信息詳細
uri.jsuri操作
cookie增刪改cookie的工具庫
director前端路由庫詳細
BigDecimal.js提高精度的數字操作
JSDoc根據javascript文件中注釋的信息，生成API文檔詳細
hotkeys鍵盤事件的封裝
MD5用 MD5 的方式加密文件的庫
瀏覽器增強類
讓一些舊瀏覽器變牛逼的庫
Selectivizr讓IE 6-8一些的css3選擇器
ieBetter讓ie6-8有高級瀏覽器的特性
ExplorerCanvas讓IE8-的瀏覽器支持canvas
CSS3 Pie讓IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js時，box-radious的元素有背景色時，不顯示背景色。。。
formFive讓舊的瀏覽器支持HTML5表單的一些特性，如 placeholder,autofocus
https://github.com/anselmh/object-fit讓瀏覽器支持object-fit這css規則
HTML5 Cross Browser Polyfills一堆Polyfills
flexibility讓舊的 IE 也支持 Flexbox
選擇器增強
Lining.js讓瀏覽器實現類似::nth-line(), ::nth-last-line()的效果
未歸類
prefixfree用了它，寫css時，就不需要加瀏覽器的前綴了
表單類
jquery-file-upload上傳文件組件詳細
zTree文件樹形視圖控制項
Treed樹編輯器。感覺展示的感覺很像思維導圖
FileAPI對文件選擇框內的文件的一些處理
表單驗證
.Validate詳細
jQuery-Validation-Engine
表單元素美化
uniform提供對下拉框，單，復選框，按鈕等表單元素的美化
select2多選下拉框
selectivity和unfirom比較類似
DropKick下拉框，單，多選。外觀比uniform好
switcheryios7風格的開關組件
nouislider用滾動條來設置/控制（音量等）
range.css美化input[type=range]元素的外觀
圖片類
holderjs生成占點陣圖片
lazyload
imagesLoaded選取的圖片都載入好後執行調回
CSSgram用CSS3的Filter實現Instagram濾鏡的庫
圖標類
Icon Font匯總
SVG做的圖標
svgicons
iconic
HYBICON帶交互效果。如 hover, click
HTML字元實體圖標
http://www.amp-what.com/
transformicons圖標點擊時，會有一些變換效果。如，加號變成叉號
css3patternscss3 做的可平鋪紋理。瀏覽器兼容性不好。
瀏覽圖片
fancybox彈出查看圖片，視屏等等demo
yoxview彈出查看圖片，圖片尺寸縮放很自然
圖片牆
wookmark
UI 框架
WeUI由微信官方設計團隊為微信 Web 開發量身設計。
Framework7
UI 組件類
拖拽
dragula支持Draggable，Dropable和Sortable。感覺比jqueryUI的輕量級，好用的樣子
angular-draguladragular 官方的 angular 版本
數據可視化(圖表)
Echarts網路出品
highcharts功能強大。是收費的。
Plottable.JS基於D3的一個圖表庫
flot文檔不給力
chartJs中文文檔demo很漂亮，很清晰。比較輕量級。
ichartJs中國的一個傢伙搞的，感覺還不錯。
時間選取組件
foundation-datepicker
DatePicker一個簡單的日歷詳細
full calendar支持脫放的方式來改變待辦事宜的時間
Simple Events Calendar外觀很喜歡。收費 5$
jQuery ui datepicker經典，不是很好看
pickadate輕量級，手機友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。
zebra-datepicker可配置性很強。但貌似只能在彈出在右上方。。。
bootstrap-datepickerbootstrap風格。
dateRangePicker選取時間段。bootstrap風格。該組件依賴Twitter Bootstrap, Moment.js和jQuery.
自定義滾動條
perfect scrollbar輕量級的滾動條。外觀與mac上chrome的滾動條一樣。
iscroll在移動設備上用不錯
載入(Loding)效果
CSS SpinnersCSS做的
Loaders.cssCSS做的
表格組件
jsGridData Grid。詳細
backgrid基於Backbone.js的DataGrid
excellentexport把表格的內容生成excel。兼容 Firefox, Chrome, IE6+
datatables表格可交互（對內容進行排序，刪除等）
handsontable生成Excel外觀的數據
JSpreadsheets表格數據的組件庫
選取顏色
Spectrum
分享到SNS
JiaThis生成分享代碼。
編輯器
ace代碼編輯器，可以用來做demo演示
ckeditor
ueditor網路做的
tinymce對html內容進行實時的編輯
summernote在移動設備上用不錯
通知組件
notie.js
HTML5播放器
jwplayer被大量網站使用
html5media簡單的h5player，輕量級
jplayer功能強太，可換膚
展示
Impress.js各種旋轉，和奇特的體驗
fullPage全屏顯示。用滾輪來翻頁詳細
zepto.fullpage專注於移動端的fullPage.js，依賴Zepto
pagePiling和fullPage類似
turn.js做一本書，帶漂亮的翻頁的效果
幻燈
slidesjs挺好用的，只是那幻燈導航的CSS都要自己寫，呵呵詳細
iSlider無任何插件依賴的手機平台javascript滑動組件詳細
bgstretcher全屏幻燈，會隨著頁面大小的變化而變化。
Swiper開源、免費、強大的移動端觸摸滑動插件Swiper中文網
coin-slider兼容IE6。蠻好的~。不過其切換方式是一塊塊的。不能配置切換方式。。。
wowslider幻燈切換時各種很炫的效果。收費。
cycle2普通的幻燈，竟然不支持垂直滾動。。。
jcarousel普通的幻燈，不兼容IE6
reveal3d滾動。做ppt相當不錯
nodePPT國人做的，做ppt也相當不錯。有些方面比 reveal做的還好。但生成導出的html有些問題
roundabout3d切換，看的後面圖片的邊
彈出框
Magnific-Popup兼容PC，Mobile。還不錯，有5k+的star
layer國人開發的，兼容ie6+。不喜歡其調用方式。
動畫效果
mixitup用漂亮的動畫效果來完成排序和篩選
jQuery.Marquee跑馬燈效果
quickflip卡片翻轉效果
卡片翻轉效果2兼容性可以。寫的比較簡單：1，只支持x方向翻轉 2,類名都是規定好的 3，只能被調用一次。 需要改寫一下。我的改進版見這里
TheaterJS模擬兩個人在屏幕上對話
midnight.js文字顏色隨著背景變，屌炸了
color-animationjquery的顏色漸變動畫插件。jquery的動畫不支持顏色值的變化。改庫提供了這個支持。
transit對元素進行css的變換
tagcanvas3D標簽雲效果詳細
iconate圖片切換動畫
Snap.js左/右側導航的出現效果
CSS shake抖動動畫
ClickSpark.js點擊後的一些酷炫的效果
視覺差插件
scrollorama比較簡單
superscrollorama能做的效果更多，但要用第三方Tween的庫，使用起來比較復雜。
scrolldeck
flash
swfobj能夠自動檢測PC、Mac機器上各種主流瀏覽器對Flash插件的支持情況。它使得插入Flash媒體資源盡量簡捷、安全。而且它是非常符合搜索引擎優化的原則的。此外，它能夠避免您的HTML、XHTML中出現object、embed等非標准標簽，從而符合更加標准。詳細
抽獎
wScratchPad刮刮卡刮獎效果
jqueryrotate旋轉插件。可以用來做轉盤抽獎效果
Intro.js用來介紹網站的功能很不錯。也可以做新手引導。
blockUILolding組件。
simple-hint提示信息。用css做的。兼容性IE 9+。
dotdotdot文字溢出時，添加在文字末尾加省略號
jQuery-menu-aim二級菜單的切換如Amazon主頁上一樣迅速
AnythingZoomer放大鏡功能
美化/高亮語法代碼
google-code-prettify
DlHighlight僅支持JavaScript、CSS、XML、HTML 這4語法高亮
please按要求隨機舒服的顏色
Awesomplete輸入的智能提示，自動補全
proTip提示。感覺比 Bootstrap 的 tip 好
Hammerjs手勢庫。封裝了 Swipe, Tap, Pinch, Pan等手勢
用戶體驗增強類
動畫
velocity提高Jquery動畫的性能。以及顏色動畫之類的新特性。
Snap.svg操作 SVG 的 JS 庫。號稱 SVG 的 jQuery。demo
walkway以動畫的方式，漸漸地畫出 SVG 的路徑。
SVG
測試
Mocha
Chai
Should
Snoion
DeviceMock.jsmock 設備。
其他類
ZeroClipboard將內容復制到剪切板兼容主流瀏覽器的解決方案詳細
html2canvashtml轉化成canvas，可以用來做截圖。詳細
Ink響應式html郵件框架
性能測試
抓取，解析RSS內容（不能跨域，所以後台要做代理，所謂的解析Rss其實就是解析xml）
jFeed
jRss簡單版的jFeed
scriptcam與攝像頭交互
cylon.js機器人框架，支持35個平台
Masonry一個瀑布流框架
devices.css移動設備邊框的外觀。做原型的時候用不錯。
Bootbox.js對bootstrap的彈出框做的一些封裝
免費皮膚
AdminLTE
Bootstrap相關類
JS Plugins倉庫
jQuery Cards高質量的 jQuery 插件網站
jster
node moles
npmrankSort npm packages by page rank
YOU MIGHT NOT NEED JQUERY PLUGINS不依賴 jQuery 的 js 插件。
awesome-nodejs
Libraries.io各種語言的庫
OniUI去哪兒網做的一套基於Avalon的框架
常用的移動端框架
zepto.js
語法與jquery幾乎一樣，會jquery基本會zepto~
最新版本已經更新到1.16
iscroll.js
解決頁面不支持彈性滾動，不支持fixed引起的問題~
實現下拉刷新，滑屏，縮放等功能~
最新版本已經更新到5.0
underscore.js
筆者沒用過，不過聽說好用，推薦給大家~
該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。
最新版本已經更新到1.8.2
滑屏框架
適合上下滑屏、左右滑屏等滑屏切換頁面的效果
slip.js
iSlider.js
fullpage.js
swiper.js
flex布局
flex布局目前可使用在移動中，並非所有的語法都全兼容，效果良好~
Ⅸ Notepad++ 有哪些適用於前端開發的插件
常用的前端開發插件如下：
Emmet
Emmet的前身是Zen Coding，一款使用仿CSS選擇器的語法來快速開發HTML和CSS的插件，是前端開發神器。它無視了編輯器的自動提示和自動完成，秒殺了你自定義的各種快捷鍵或者 AHK 的熱字元串，以智能簡潔高效的縮短輸入，帶給你超快速地書寫各種復雜而枯燥的 HTML 和 CSS 代碼的體驗。現在可以在Notepad++的插件管理器里直接安裝了。
Finger Text
標簽代碼替換和文本自動完成插件，編輯器配合這個功能可以有效地提升代碼的書寫速度，提高自己的工作效率，例如我輸入if然後按Tab鍵將會把if替換成一個完整的if結構，可以極大的提高效率，當然具體怎麼替換是可以配置的。
TextFx
這個號稱是Notepad++上面最好用的plugin，具有超強的文本處理能力，比如文本編碼處理等。編程某種程度上就是文本工作，所以這個插件對開發人員應該是非常有幫助的。以前是默認安裝的，現在需要自己手動安裝。
Task List
自動掃描當前文檔，將所有"TODO:"開頭的注釋都找出來，列在右邊的面板中，雙擊可以跳轉該行。這和Eclipse里的TODO功能很相似，便於標記查找沒有完成的工作。
HTML Tag
編輯HTML代碼時比較有用，它主要的功能是匹配選擇的標簽，對HTML標簽編碼及解碼，對JS編碼及解碼，我認為對HTML標簽編碼及解碼是最有用的功能了。
TagsView
可以列出當前文檔的全局變數，函數列表等，方便查找定位函數，變數等。
JSON Viewer
可以以樹的形式查看JSON，同時可以格式化JSON，增加縮進。
JSLint
JSLint一個JavaScript語法檢查工具，可以檢查你的代碼是否優秀，規則請參考<<JavaScript語言精粹>>。
RegEx Helper
在文檔的中匹配正則表達式，可以用來測試正則表達式。
Compare Plugin
一個非常實用的工具，可以用來比較兩個文件不同之處，主要用來對比相鄰的兩個文件。
Explorer
一個文件瀏覽窗口，可以在裡面創建文件，文件夾等。還可以快速定位當前打開的文件的文件夾。
File Switcher
一個快速切換窗口的工具，支持通過輸入文件名，路徑或者tab index來查找切換，可以用來替換默認的Ctrl + Tab。
Ⅹ 求大神，告訴web前端開發中在線的文本編輯器，可以用什麼方式實現，用到了什麼插件
有好多 。你可以看看網路編輯器 功能提多也有簡易版 直接網路「網路編輯器」 或者網路富文本編輯器也可以找到很多插件的