1.OneCompiler
工具網址:https://onecompiler.com/
OneCompiler支持60多種編程語言,在全球有超過1280萬用戶,讓開發者可以輕易實現代碼的編寫、運行和共享。
OneCompiler的線上調試功能完全免費,對編程語言的覆蓋也很全,他們的編譯環境除了對Java/C++/Python/Swift等主流編程語言的支持,還支持了Mongodb/Redis/MySQL等數據庫腳本語言和Vue/React等Web前端編程框架。
OneCompiler除了提供線上編譯環境,還提供了編程語言教程和API手冊方便用戶們學習。
2.Programiz
工具網址:https://www.programiz.com/
Programiz的宣傳語是"Learn to Code for Free",他們主要提供免費的編程教學和代碼樣例。
網站上提供了學習編程語言和數據結構的免費教程,還提供了OJ題庫用來編程練習。
網站的在線編譯環境也是對用戶完全免費。
Programiz除了提供網頁版,還提供了基于iOS和Android平臺的手機app版本,方便用戶在手機上學習。
3.myCompiler?
工具網址:https://www.mycompiler.io/
輕量級且小眾的在線編程網站,網站上有個"Recent"按鈕,點進去可以看到全球開發者最近在該網站上運行了哪些代碼,特別有趣味。
myCompiler除了支持C/C++/Java/Python等主流熱門的編程語言,還提供了對匯編語言的支持,這一點對學習嵌入式開發的用戶很有幫助。
4.CodePen
工具網址:?https://codepen.io/
很成熟且功能強大的前端編程工具,支持Vue/React等主流的前端編程庫。
提供了完全免費的代碼托管和代碼測試功能,支持用戶自定義工具界面和代碼自動補全。
除了編譯和調試,還支持在網站上保存自己的代碼筆記。
用于線上開發的時候,CodePen對HTML/CSS/JavaScript等前端語言的編輯和預覽功能做得比其他網站更強大。
除了對開發環境的支持,CodePen還分享了來自全球開發者的酷炫的前端網頁作品。
5.JSFiddle
工具網址:https://jsfiddle.net/
JSFiddle在編譯調試前端代碼的時候十分的簡潔且高效。
在JSFiddle上面可以利用現有的模板輕松創建自己的前端項目。
JSFiddle對調試和預覽很友好,支持炫酷的語法高亮和html/css的網頁界面渲染。
JSFiddle在調試JavaScript的時候還支持引入React/Vue/Angular等第三方庫。
6.CodeSandbox
工具網址:https://codesandbox.io/
除了支持在線的代碼編譯調試,還支持單元測試。
覆蓋的前端框架很廣,支持React/Vue/Next.JS/Node.JS等大多數JavaScript編程框架。
可以讓開發者根據自己的開發需要來定制單獨的虛擬開發環境microVMs。
CodeSandbox為開發者們提供了內置的Docker容器來部署微服務和數據庫應用,此外,CodeSandbox還提供了專門的VsCode插件。
對于大規模前端應用的開發可以考慮這個工具,畢竟功能和開發環境很強大,如果只是為了學習編程語法,建議使用其他網站,因為CodeSandbox內置了Docker容器,進入代碼界面的時候會首先啟動microVMs虛擬環境,啟動時間比較長。
7.Swiftfiddle
工具網址:https://swiftfiddle.com/
蘋果應用編程語言Swift語言的線上編譯環境,目前該網站最高支持到了Swift 6.x版本。
如果暫時不想買蘋果電腦,或者windows筆記本使用慣了,懶得拿出抽屜里面的蘋果筆記本,可以考慮使用該網站進行Swift語言的編譯和開發,進入網站即可編碼調試,不依賴Mac系統的xcode開發工具。
網站是開源的,項目代碼地址在:??https://github.com/swiftfiddle/swiftfiddle-web
補充:以上截圖中使用的JavaScript代碼,基于回調函數實現的模擬訂單交易系統。
function checkInventory(order, callback, errorCallback) {console.log(`Verifying inventory: ${order.productId}`);setTimeout(() => {Math.random() > 0.1 ?callback({...order, reserved: true}) :errorCallback('Insufficient inventory');}, 1000);
}function processPayment(order, callback, errorCallback) {console.log(`Processing payment: ${order.amount}`);setTimeout(() => {Math.random() > 0.3 ?callback({...order, paid: true}) :errorCallback('Payment failed');}, 1500);
}function shipOrder(order, callback) {console.log(`Processing order shipping: ${order.address}`);setTimeout(() => {callback({...order, shipped: true});}, 2000);
}function placeOrder(order) {checkInventory(order,(reservedOrder) => {processPayment(reservedOrder,(paidOrder) => {shipOrder(paidOrder, (finalOrder) => {console.log('Order completed: ', finalOrder);});},(paymentError) => {console.error('Error in payment stage:', paymentError);});},(inventoryError) => {console.error('Error in inventory stage:', inventoryError);});
}const testOrder1 = {productId: 'P123',amount: 99.99,address: 'Boston'
};const testOrder2 = {productId: 'P124',amount: 100,address: 'London'
};placeOrder(testOrder1);
placeOrder(testOrder2);
運行結果:
Verifying inventory: P123
Verifying inventory: P124
Processing payment: 99.99
Processing payment: 100
Processing order shipping: Boston
Processing order shipping: London
Order completed: {productId: 'P123',amount: 99.99,address: 'Boston',reserved: true,paid: true,shipped: true
}
Order completed: {productId: 'P124',amount: 100,address: 'London',reserved: true,paid: true,shipped: true
}[Execution complete with exit code 0]