开发工具分享: Web前端编码常用的在线编译器

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]