1. CodePen
CodePen是我最喜歡的代碼編輯器之一。 CodePen有一些炫酷而獨特的功能,這使得它成為Web開發中最流行的在線代碼編輯器之一。CodePen的特點是:
實時預覽HTML,CSS和JavaScript您可以使用預處理程序的語法像Sass, LESS, Stylus. Markdown, Haml, Slim, Jade使用CodePen組合展示才華和設計自己的組合主頁。您可以使用Hire Me(聘用我)功能服務找到兼職工作。任何資源都可以嵌入在任何其他網站。2.Dabblet
Dabblet的界面十分簡潔,操作起來并不復雜,特別適合新手和想嘗試最新HTML5標簽和CSS3樣式的前端攻城師使用。Dabblet的一大特色是代碼編寫時可免加CSS前綴。因為,Lea Verou(工具的作者)本人就是免CSS前綴JavaScript腳本 -prefix-free的作者,Dabblet擁有此功能當然是順理成章的事。HTML和CSS代碼間的切換也很方便,點擊隱藏工具欄右上方的標簽即可。用戶可以根據習慣,調整前端代碼的預覽效果,瀏覽器內全屏預覽將新標簽頁中打開。Dabblet支持用Github帳號登錄,測試的代碼段既可以匿名保存也可以保存在用戶的Github:gist中,以便用戶將代碼段嵌入自己的站點或是進一步分享給其他人。
3.Thimble
Mozilla 推出 的HTML/CSS 在線交互式學習網站 Thimble:左側編輯,右側實時預覽,帶有大量真實案例。該站是 Mozilla 新近推出的 Webmaker 計劃 的組成部分,旨在幫助普通用戶在線學習編寫 HTML 和 CSS。Thimble 提供的是雙面板設計, 左側為帶語法高亮的代碼編輯,右側可實時預覽 網頁效果, 如果用戶對效果滿意, 可通過右上方的藍色 “Publish” 按鈕一鍵發布, 還可通過提供的 Twitter 發布按鈕與好友分享你的設計成果。
4.JSFiddle
JSFiddle是一個老牌的在線JavaScript代碼調試工具。支持JavaScript、CSS、HTML代碼可視化在線調試工具,支持多種應用多種主流框架,用起來非常方便,而且還可以將調試好的結果以非常簡潔的頁面直接嵌其他網頁里。除了可以調試代碼外,還可以方便的發布到社區,論壇或者社交媒體上與朋友們分享或者提問。整合了很多的不同的類庫供大家選擇。
5.CSSDesk
CSSDesk工具是一個標準的CSS沙盒,可以給予CSS初學者最大的幫助,網站分成三欄,我們可以非常方便的通過在左側實時修改代碼來查看某個CSS屬性的改變給HTML元素帶來的影響,甚至我們可以把整個網站都放到其中來進行調試,并將調試完成的文件保存為HTMl。唯一的遺憾是缺少代碼提示,需要手工輸入CSS屬性。6.CodeMirror
又一款“Online Source Editor”,基于Javascript,短小精悍,實時在線代碼高亮顯示,他不是某個富文本編輯器的附屬產品,他是許多大名鼎鼎的在線代碼編輯器的基礎庫。可以看出,CodeMirror的作者是一個十分向往自由的人。但他的CodeMirror絕對不簡單,看看下面這份清單:
Google Earth KML samplerEloquent JavaScript’s consoleThe qooxdoo playgroundA cool tutorial about the elementAn online IDE for the Orc programming languageGoogle’s API playgroundRapha?l LiveJS BinThe RokPad plugin for JoomlaThe scraperwiki editorjsLinb UI Builder上述的這些在線代碼編輯器都是基于CodeMirror的,是不是感到驚訝,里面有你熟悉的JS Library。
CodeMirror本身的定位也很明確,短小精悍,但代碼質量很高,在Google Group的群里面,人們熱烈的進行著用CodeMirror做各式各樣改造的討論,可見對他的歡迎。
假如你有項目需要在線代碼編輯,還等什么?CodeMirror,絕對是你最好的選擇。
7.JS Bin
JSBin 是一個 Web 應用,主要用于幫助測試 JavaScript 和 CSS 的代碼片段。功能與 jsFiddle 網站一致。8.eCoder
ecoder是一個基于Web的代碼編輯器,采用PHP和JavaScript開發。它包括:實時語法加亮,一個文件瀏覽器,一個文件上傳器和一個標簽系統能夠實現直接在服務器上同時編輯多個文件。9.Codeanywhere
Codeanywhere是一個在線的代碼編輯器,你可以在瀏覽器中編寫html、css、javascript、php、XML的代碼,目前支持chrome、firefox、Opera、Safari、IE,當然也可以在android、iphone上安裝codeanywhere的軟件。Codeanywhere的特點是:隨時隨地可以寫代碼(雖然我認為手機上寫代碼有點搞笑)。
Codeanywhere支持連接FTP Server、Dropbox、Github,比如Dropbox,你只要有一個賬號,連上Dropbox后,Codeanywhere能夠在Dropbox上創建html等文件,你寫的代碼都存放在Dropbox上了。
10.AWS Cloud9 IDE
Cloud9 IDE是一個用來測試運行Node.js 和 JavaScript平臺,但也支持Python, Ruby和 Apache+PHP的應用程序,例如Wordpress。前幾天分享了支持Node.js、Python、Go、Rails等程序語言的Nitrous.io空間,很快有朋友給部落寫郵件,告知Cloud9可以比Nitrous.io更長久地運行應用實例。Cloud9支持的程序語言有Node.js、HTML5、PHP、Python / Django、Ruby on Rails、C/C++、StrongLoop,提供FTP、S-S-H和空間托管,有MysqL、MongoDB、SQLite數據庫,可以一鍵安裝Wordpress,也可以自己上傳程序代碼,支持協同編輯合作,另外可以和其它的云空間整合。
Cloud9支持將代碼一鍵發布到Heroku、Windows Azure、Google App Engine、CloudFoundry等云空間上,還可以同步應用到Github空間上,總之,除了Cloud9空間不支持綁定自己的域名、無法永久保持應用在線外,Cloud9空間用來測試程序和代碼還是不錯的。
以上就是為你推薦的10個最好的JavaScript在線編輯器。它們有的是單純的JavaScript代碼編輯器,有些則支持多種語言,還有一些提供完整的IDE。哪一個是你最喜歡的呢?分享你的評價吧。
vue是個web前端類庫
angular是個web前端框架
目前中大型公司都用vue以及相關的類庫和ui搭建適合自己業務的web前端框架。
如果你只是做個頁面,用vue你會覺得挺容易,如果你開發個中大型中后臺應用程序,用vue的作為底層庫的話,你就必須再篩選各種類庫和ui去搭建基礎框架了,當然目前市面上應該也會有基于vue的框架,還好現在社區基于vue的類庫插件還是挺多的,所以,我覺得vue比較適合中大型企業,畢竟要維護那么多類庫,還是需要人手的。
angular確實很尷尬,如果只是作為一個簡單頁面的話,它確實太臃腫了。如果你做大型項目,可能后期運維方面的需求沒辦法保障或者客戶的奇葩需求無法實現。所以,我覺得angular適合獨立開發人員或者小公司,畢竟已經是個成熟的框架了,目前中后web應用程序的需求都能滿足。至于學習起來,前期確實比較吃力,因為大部分人沒有架構概念,但是學習之后,你對整個web前端架構理解會深刻很多。
總之,vue上手簡單,越往后越難,因為初學者對前端架構理解不足,后期學習會吃力,但中大型公司為了滿足各種業務場景,就選擇用vue自己搭建整個web前端框架,至于剛入職的同學頂多就寫寫業務組件,長久以為,你對架構的理解進步就比較慢了。
angular上手比較難,但是呢上手后,你學習vue就很快了。我建議你學vue的同時,也去了解一下angular。
我可以說github之外不需要其他的嗎