Recientemente hice un "ejecutor de código" para el sitio web. Copié el tema de Xcode directamente, y ahora el código finalmente puede ver el efecto de ejecución en el navegador en tiempo real. El efecto es el siguiente:
También puede editar el código en pantalla completa:
En el futuro, puede leer artículos técnicos como este:
Alguien puede preguntar, ¿para qué sirve esta función?
Esto no es alardear, si el artículo técnico puede estar equipado con un ejecutor de código, sería genial. Por ejemplo, en un artículo sobre algoritmos, pensar no es suficiente, la clave es ser capaz de dominar la escritura del código. Si no comprende el código, puede hacer clic en el botón "Ejecutar" directamente para ver el efecto de ejecución del código. Por ejemplo, la imagen de arriba es una captura de pantalla de mi pequeño libro "Entrevista de algoritmo con Dachang". Puede ejecutar el código directamente. Para obtener más detalles, puede ver:
Título: Determine si es una dirección IP
Libro pequeño "Entrevista sobre el algoritmo de Dachang"
¿Cuál es la función de una api? Es mejor usar texto para explicar durante mucho tiempo y generar directamente el resultado de la ejecución con código.
Cómo lograr esta función
La ecología del front-end es realmente asombrosa. No importa qué función implemente, habrá una solución lista para usar. Solo necesita cambiarla ligeramente. Si no puede satisfacer sus necesidades, cambie el código fuente. Esto es mucho más fuerte que el terminal móvil.
En el sitio web front-end de clases pequeñas, puse una biblioteca de terceros de uso común, que mencionaba codeMirror, que es un editor de código basado en el cual se implementa un "ejecutor de código".
https://lefex.gitee.io/framework-book/codeMirror.html
Se encontraron varios problemas en el proceso de implementación:
1. El tema es demasiado feo
Para ser honesto, no encontré un tema que me gustara en codeMirror, y copié el tema de Xcode directamente. codeMirror admite la función de personalización del tema, simplemente modifique el estilo css directamente y luego impórtelo al proyecto:
2. Ejecute el código
Ejecute la cadena de código js, use directamente la función eval
console.log(eval('2 + 2'));
// expected output: 4
Se pueden ver los detalles:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
3. Enlace de salida Console.log
Durante la ejecución del código, puede generar contenido a través de console.log para depurar el código. Simplemente vuelva a escribir la función console.log y muestre el contenido que se generará en la interfaz de usuario.
Este artículo habla principalmente de una idea general, y hay muchos detalles que tratar. Puede ir directamente al sitio web de clases pequeñas para experimentar.
Dirección web:
https://lefex.gitee.io/
https://lefex.github.io/
¡Vamos todos!
Mantenga pulsado para seguir
Su Yan "Clase de interfaz"
Ayude a las personas de 10W a comenzar y avanzar a la interfaz