De JS-Encoder versión inicial ha sido liberado de un año, esta vez con excepción de la reparación de vez en cuando sobre el ERROR, la principal o ocupado con la escuela. Recientemente no es pacífica, tiempo de la escuela también se retrasa en gran medida, además de sí mismo no está muy satisfecho con su compilador de línea, por lo que pasé más de un mes desde el comienzo hasta un final re-escritura.
Si usted está interesado en el legado JS-Encoder, puede echar un vistazo a:
Como hacer un compilador en línea
Dado que es una re-escritura, por supuesto, aunque la interfaz se ha rediseñado también para ser honestos, habría que ver el legado de interfaz infeliz. Como una pequeña front-end, no entiendo lo que la interfaz de usuario, está completamente asiento de sus pantalones.
Este es el legado de JS-Encoder:
Esta es una nueva versión de la JS-Encoder:
Las cinco ventanas anteriores apiñados brinda la experiencia muy mala, por lo que poner tres ventanas de código apiladas juntas, revelo una única consola pongo el siguiente para mostrar ... Bueno, en realidad yo estaba brillando VSCoder hacer ╮ (╯-╰) ╭.
En cuanto a la versión antigua y casi la misma funcionalidad, pero correcciones de algunos errores existentes, aumentando el sistema del usuario, así como que quiero decir consola.
Aunque me di cuenta de la consola En las versiones anteriores, pero es demasiado simple, en comparación con Chrome viene de la consola, lo escribí yo mismo no lo podría hacer de la consola, que es sólo un visor de registro.
En la nueva versión, utilizo las herramientas de la consola algunos métodos comunes:
- Iniciar sesión
- advertir
- error
- info
- hora
- registro de tiempo
- timeand
- claro
Debido a que el navegador no proporciona una forma directa de obtener información de registro, además de dirigir sobreescritura consola elemento iframe, no puedo pensar en una mejor manera. Después de una cuidadosa consideración escribí una clase Console para manejar el registro, sus procedimientos de operación son los siguientes:
En primer lugar, digo que simplemente muestra el registro de cómo se implementan las funciones:
Cuando el usuario edita registro de salida de JavaScript, llama al método que tenía que volver a escribir el objeto Console, estos métodos de lista de parámetros y el método en nombres (tales como el usuario escribió console.log(1,2,3), es el nombre del método 'log', lista de parámetros es [1,2,3]) que se pasan al convertidor, el convertidor la lista de argumentos, dándole diferentes estilos y tipos de datos de acuerdo con un nombre de método del parámetro, el flujo es el siguiente:
Convertidor Parámetros de lista determinadas individualmente, si (como el tipo básico number, string, boolean, symbol, null, undefined), entonces el parámetro directamente en la cadena de empalme html, imparten diferentes estilos (como el método de error dependiendo de la invocación del método el color de fuente a rojo, advierten método para naranja, ingrese diferentes métodos para establecer un color diferente, etc., según el tipo de datos).
Si el usuario escribió:
console.log(1, '2', false);
Luego, después de los resultados convertidor para convertir de HTML debe ser la siguiente matriz de cadenas:
// 不同的样式代表不同的颜色
[
'<span class="cm-number">1</span>',
'<span class="cm-string">"2"</span>',
'<span class="cm-boolean">false</span>'
]
Luego hacer para efectuar la página es el siguiente:
Si se trata de un tipo mixto (es decir, los tipos de referencia, debido a que estos tipos de referencias por lo general contienen varios valores de tipos de datos diferentes, por lo que me gusta llamar un tipo híbrido), que elegimos para dirigir para lograr el efecto de la código de relieve por plug-in CodeMirror, debido a que el tipo de referencia es más complejo a sí mismos para hacer frente a tiempo, o no hay necesidad de tratar con CodeMirror tipos básicos ya hechos, simple, un rendimiento demasiado desperdicio.
Convertir a un tipo de referencia cadena no se puede utilizar directamente JSON.stringify, sabemos que los resultados de dicha conversión serían así:
Entonces estas deficiencias son como sigue:
- Hay una gran cantidad de comillas dobles
- JSON.stringify no puede manejar las referencias circulares
- tipo de símbolo no se puede convertir directamente en una cadena
- Tipo de función se traduce directamente en la cadena de
- Tipo de DOM no se puede convertir directamente en una cadena
......
Ya que hay muchas restricciones, entonces se utilizaría de forma selectiva JSON.stringify. Para que un objeto o una matriz, en el que las propiedades necesitan transversal, y se determina por el tipo de cada atributo de una manera diferente para convertirlo en una cadena, como sigue:
function JSONStringify (stringObject) {
const type = judge.judgeType(stringObject) // 判断stringObject的类型
if (type !== 'Object' && type !== 'Array' && type !== 'Map') {
return JSON.stringify(stringObject)
}
let prefix = '{', suffix = '}' // 用于包裹最后转换出的内容
if (type === 'Array') {
prefix = '['
suffix = ']'
}
let str = prefix
const keys = getObjAllKeys(stringObject) // 获取对象的所有键，包括不可枚举的键
for (let i = 0;i < keys.length;i++) { // 遍历
const key = keys[i]
let value = stringObject[key]
if(type === 'Map') value = stringObject.get(key)
try {
if (type !== 'Array') {
// 判断键的类型，普通对象的键只能是字符串类型，但Map却可以突破这个限制，需要进一步判断类型
const keyType = judge.judgeType(key)
switch (keyType) {
case 'Object':
case 'Array':
case 'symbol':
str += Object.prototype.toString.call(key)
break
default:
str += key
}
str += ': '
}
let valueType = judge.judgeType(value)
if (/^HTML/.test(valueType)) valueType = 'dom' // 如果类型以HTML开头，说明是DOM元素
switch (valueType) {
case 'Array':
str += JSONStringify(value)
break
case 'Object':
str += JSONStringify(value)
break
case 'function':
str += String(value)
break
case 'symbol':
str += String(value)
break
case 'dom':
str += stringifyDOM(value) // 将DOM转化为字符串
break
default:
str += JSON.stringify(value)
}
if (i < keys.length - 1) str += ', '
} catch (e) {
continue
}
}
str += suffix
return str
}
Después de que el objeto sobre un método previamente se puede convertir en:
{a: 1,b: "2",c: false,d: Symbol(123)}
Pero esto se traduce cadena en una fila, que no se ve bien, por lo que necesita para dar formato, lo uso bastante plugin de formato:
(bastante) [ https://www.npmjs.com/package/pretty ]
Y luego se pasa al tratamiento CodeMirror destacar:
Del mismo modo, además de lo más destacado, para advertir, la información de error y también se utiliza de la misma manera como log.
Además, debido a que algunos objetos demasiado grandes (como la ventana), en la página que muestra el rendimiento del consumo también, para este tipo de objetos, aparecerá una advertencia de que el navegador que viene con la consola a la vista.
Para time, timeLog, timeEndestos tres métodos, la necesidad de utilizar el incorporado en performancelos objetos
Mapa con nombres y temporizador de tiempo de almacenamiento de un objeto de mapa .
Si las ediciones de los usuarios:
console.time('timer1');
Esta vez en el objeto Map añadirá un ‘timer1’mapa:
setTimer (name) {
const timer = this.timer;
timer.set(name, performance.now());
}
Por supuesto, Date.now()lo mismo puede también ser programado, pero la precisión no es tan buena performance.now()a.
Cuando timeLogo timeEndmétodo se invoca, siempre y cuando la diferencia de tiempo de retorno como:
calcTime (name) {
const time = this.timerName.get(name);
return `${name}: ${performance.now() - time} ms`;
}
Luego hacerlo de nuevo resaltar el efecto del tratamiento es el siguiente:
La salida es más o menos estos aspectos, si hay que añadir nuevas características en el futuro, voy a actualizar primero el artículo.
Además de la consola a la salida, pero también es necesario para acceder a la función, vistazo a esta imagen:
Los comandos de entrada de usuario puede ser el bloque de entrada de comandos, realizado por los comandos para ser procesados.
Cuando el usuario introduce un comando y presione ENTRAR, ventana de la consola que se muestra es el propio comando, y tiene un valor de retorno .
Los profesionales tienen que hacer las siguientes cosas:
- Ejecutar comandos alcance iframe.
- El valor de retorno después de la orden de adquisición.
- Método consola llama a sí mismo el objeto de órdenes de salida y valores de retorno.
executeCommand (cmd) {
let returnVal
this.console.log(cmd) // 输出命令本身
try { // 由于用户输入的命令可能会出错，因此需要try catch一下，将错误取出渲染到console上
returnVal = this.window.eval(cmd) // 在iframe的window对象内执行命令
} catch (e) {
this.consoleInfo.push({ // 将错误push到日志列表
type: 'error',
content: e
})
return
}
// 如果没有错误，调用重写的console.log，代码略
// ...
}
Los resultados son los siguientes:
Por supuesto, el cuadro de entrada de comandos también puede comando historial de la caché, utilice las flechas arriba y abajo las teclas de flecha para abrir el historial de comandos
Esta función requiere que toda la historia se almacena en una serie de comandos, el proceso es el siguiente:
Muy sencillo de implementar, el efecto es el siguiente:
Para el error iframe en sí, es necesario volver a escribir su objeto ventana de onerroreventos:
this.window.onerror = (msg, _, row, col) => {
consoleInfo.push({ // 通过console对象的error方法输出
type: 'system-error',
content: msg,
row,
col
})
return false
}
Salida de error contiene la fila y columna
Por último, el control puede ser representada mediante un filtrado de tipo de registro:
Mientras se somete a un camino difícil, pero me hizo aprender mucho, recibió también un sentido sin precedentes de orgullo, voy a seguir para actualizar codificador-JS, GitHub dirección de proyecto de repositorio y la dirección del proyecto son los siguientes, si gusta, puede pedir una estrella apoyarme!