Formateo y compresión de código JS.

Autor：Eve Cole Fecha de actualización：2009-06-08 18:34:09

¿Alguna vez le ha dolido la cabeza ver código desordenado escrito por otros? ¿Alguna vez le ha preocupado mirar el código BWindow? ¿Alguna vez ha dudado sobre la contradicción entre reducir el tamaño de JS y la legibilidad de JS? tengo un código Un programa para formatear y comprimir código finalmente está disponible hoy. Está escrito en JS puro y, por supuesto, es de código abierto. Lo siento, primero quiero hacer un anuncio :). Mucho tiempo, finalmente lo usé hoy. Terminé de escribirlo durante el fin de semana. Debido a la prisa por escribir, todavía hay algunos errores pequeños. ¡Preste atención a las actualizaciones!

<HTML><HEAD><TITLE>Formato</TITLE>
<META content="MSHTML 6.00.2800.1528" nombre=GENERADOR>
<META contenido="" nombre=Autor>
<META content="" nombre=Palabras clave>
<META content="" nombre=Descripción></HEAD>
<CUERPO>
<Idioma SCRIPT=JavaScript>
<!--
/**//**//**//**
** ================================================= ====================================================
** Nombre de clase: CLASS_FORMATER
** Función: formato JS
** Ejemplo:
-------------------------------------------------- --------------------------------------------------

var xx = nuevo CLASS_FORMATER(código)

document.getElementById("pantalla").innerHTML = xx.format();

-------------------------------------------------- --------------------------------------------------
** Autor: ttyp
** Correo electrónico: [email protected]
** Fecha: 2006-5-21
** Versión: 0.1
** ================================================= ====================================================
**/

función CLASS_FORMAT(código){
//clase de tabla hash
función tabla hash(){
this._hash = nuevo Objeto();
this.add = función (clave, valor) {
if(tipode(clave)!="indefinido"){
si(esto.contiene(clave)==falso){
this._hash[key]=typeof(value)=="indefinido"?null:value;
devolver verdadero;
} demás {
devolver falso;
}
} demás {
devolver falso;
}
}
this.remove = función(clave){eliminar this._hash[clave];}
this.count = function(){var i=0;for(var k in this._hash){i++;} return i;}
this.items = función(clave){devolver this._hash[clave];}
this.contains = function(key){return typeof(this._hash[key])!="undefinido";}
this.clear = function(){for(var k in this._hash){delete this._hash[k];}}

}

this._caseSensitive = true

//Convertir cadena en tabla hash

;

this.str2hashtable = función(clave,cs){

var _key = key.split(/,/g);
var _hash = nueva Hashtable();
var _cs = verdadero;

if(tipode(cs)=="indefinido"||cs==null){
_cs = this._caseSensitive;
} demás {
_cs = cs;
}

para(var i en _key){
si(_cs){
_hash.add(_key[i]);
} demás {
_hash.add((_key[i]+"").toLowerCase());
}

}
devolver _hash;
}

//Obtiene el código que necesita ser convertido
this._codetxt = código;

if(typeof(syntax)=="indefinido"){
sintaxis = "";
}

this._deleteComment = falso;
//Si distingue entre mayúsculas y minúsculas
this._caseSensitive = verdadero;
//Palabras clave que se pueden agregar después de la declaración de bloque
this._blockElement = this.str2hashtable("cambiar,si,mientras,intentar,finalmente");
//Es una declaración de función
this._function = this.str2hashtable("función");
//El punto y coma entre paréntesis de esta línea no provoca saltos de línea.
this._isFor = "para";

this._choiceElement = this.str2hashtable("else,catch")

;
this._endBlock = "}";

this._singleEyeElement = this.str2hashtable("var,new,return,else,delete,in,case");
//Obtener el carácter dividido
this._wordDelimiters= " ,.?!;:\/<>(){}[]"'rnt=+-|*%@#$^&";
//Cita de caracteres
this._quotation = this.str2hashtable("",'");
//Caracteres de comentario de línea
this._lineComment = "//";
// Carácter de escape
this._escape = "\";
//Inicio de referencias multilínea
this._commentOn = "/*";
//Fin de la cotización de varias líneas
this._commentOff = "*/";
//terminador de línea
this._rowEnd = ";";

this._in = "en";

this.isCompress = falso;
este.estilo = 0;

este._tabNum = 0;

este.formato = función() {
var codeArr = nueva matriz();
var índice_palabra = 0;
var htmlTxt = nueva matriz();

if(this.isCompress){
this._deleteComment = verdadero;
}

//Obtener la matriz de caracteres dividida (segmentación de palabras)
para (var i = 0; i < this._codetxt.length; i++) {
if (this._wordDelimiters.indexOf(this._codetxt.charAt(i)) == -1) { //Palabra clave no encontrada
if (codeArr[índice_palabra] == null || typeof(codeArr[índice_palabra]) == 'indefinido') {
codeArr[word_index] = "";
}
codeArr[word_index] += this._codetxt.charAt(i);
} demás {
if (typeof(codeArr[word_index]) != 'indefinido' && codeArr[word_index].length > 0)
índice_palabra++;
codeArr[word_index++] = this._codetxt.charAt(i);
}
}

var quote_opened = false // Comillas
var slash_star_comment_opened = false //Marca de comentario de varias líneas
var slash_slash_comment_opened = false //Marca de comentario de una sola línea
var line_num = 1; //número de línea
var quote_char = ""; // Tipo de comillas

var function_opened = false;

var bracket_open = false;
var for_open = false;

//Según la palabra dividida, se muestra en bloques
para (var i=0; i <=word_index; i++){
//Maneja líneas vacías (debido al escape)
if(typeof(codeArr[i])=="indefinido"||codeArr[i].length==0){
continuar;
} más si(codeArr[i]==" "||codeArr[i]=="t"){
si(slash_slash_comment_opened||slash_star_comment_opened){
si(!this._deleteComment){
htmlTxt[htmlTxt.length] = codeArr[i];
}
}
si(quote_opened){
htmlTxt[htmlTxt.length] = codeArr[i];
}
} si no (codeArr[i]=="n"){
//Manejar nueva línea
} si no (codeArr[i] == "r"){
slash_slash_comment_opened = falso;
quote_opened = falso;
número_línea++;
si(!this.isCompress){
htmlTxt[htmlTxt.length] = "rn"+ this.getIdent();
}
// Marcadores de parámetros de proceso en función
} else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&this.isFunction(codeArr[i])){
htmlTxt[htmlTxt.length] = codeArr[i] + " ";
function_opened = verdadero;
} else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==this._isFor){
htmlTxt[htmlTxt.length] = codeArr[i];
for_open = verdadero;
} else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]=="("){
bracket_open = verdadero;
htmlTxt[htmlTxt.length] = codeArr[i];
} else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==")"){
bracket_open = falso;
htmlTxt[htmlTxt.length] = codeArr[i];
} else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==this._rowEnd){
si(!this.isCompress){
si(!for_open){
if(i<índice_palabra&&(codeArr[i+1]!="r"&&codeArr[i+1]!="n")){
htmlTxt[htmlTxt.length] = codeArr[i] + "n" + this.getIdent();
}demás{
htmlTxt[htmlTxt.length] = codeArr[i] + this.getIdent();
}
}demás{
htmlTxt[htmlTxt.length] = codeArr[i];
}
}demás{
htmlTxt[htmlTxt.length] = codeArr[i];
}
} else if(!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==this._beginBlock){
for_open = falso;
si(!this.isCompress){
cambiar(este.estilo){
caso 0:
this._tabNum++;
htmlTxt[htmlTxt.length] = codeArr[i] + "n" + this.getIdent();
romper;
caso 1:
htmlTxt[htmlTxt.length] = "n" + this.getIdent();
this._tabNum++;
htmlTxt[htmlTxt.length] = codeArr[i] + "n"+ this.getIdent();
romper;
por defecto:
this._tabNum++;
htmlTxt[htmlTxt.length] = codeArr[i];
romper;

}
}demás{
htmlTxt[htmlTxt.length] = codeArr[i];
}

} else if(!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==this._endBlock){
si(!this.isCompress){
this._tabNum--;
if(i<índice_palabra&&codeArr[i+1]!=this._rowEnd){
htmlTxt[htmlTxt.length] = "n" + this.getIdent() + codeArr[i];
}demás{
htmlTxt[htmlTxt.length] = "n" + this.getIdent() + codeArr[i];
}
}demás{
if(i<índice_palabra&&codeArr[i+1]!=this._rowEnd){
htmlTxt[htmlTxt.length] = codeArr[i] + this._rowEnd;
}demás{
htmlTxt[htmlTxt.length] = codeArr[i];
}
}
//procesar palabras clave
} else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened && this.isBlockElement(codeArr[i])){
htmlTxt[htmlTxt.length] = codeArr[i];
//Procesar objetos integrados (agregar un espacio después)
} else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened && this.isSingleEyeElement(codeArr[i])){
si(codeArr[i]==this._in){
htmlTxt[htmlTxt.length] = " ";
}
htmlTxt[htmlTxt.length] = codeArr[i] + " ";
//Procesar comillas dobles (sin caracteres de escape antes de las comillas)
} else if (!slash_star_comment_opened&&!slash_slash_comment_opened&&this._quotation.contains(codeArr[i])){
si (quote_opened){
// es la comilla correspondiente
si(quote_char==codeArr[i]){
htmlTxt[htmlTxt.length] = codeArr[i];
quote_opened = falso;
quote_char = "";
} demás {
htmlTxt[htmlTxt.length] = codeArr[i];
}
} demás {
htmlTxt[htmlTxt.length] = codeArr[i];
quote_opened = verdadero;
quote_char = códigoArr[i];
}
// Manejar caracteres de escape
} más si (codeArr[i] == this._escape){
htmlTxt[htmlTxt.length] = codeArr[i];
si(yo<índice_palabra-1){
if(codeArr[i+1].charCodeAt(0)>=32&&codeArr[i+1].charCodeAt(0)<=127){
htmlTxt[htmlTxt.length] = codeArr[i+1].substr(0,1);
htmlTxt[htmlTxt.length] = codeArr[i+1].substr(1);
yo=yo+1;
}
}
// Maneja el comienzo de comentarios de varias líneas
} else if (!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened&&this.isStartWith(this._commentOn,codeArr,i)){
slash_star_comment_opened = verdadero;
si(!this._deleteComment){
htmlTxt[htmlTxt.length] = this._commentOn;
}
yo = yo + this.getSkipLength(this._commentOn);
//Procesar comentarios de una sola línea
} else if (!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened&&this.isStartWith(this._lineComment,codeArr,i)){
slash_slash_comment_opened = verdadero;
si(!this._deleteComment){
htmlTxt[htmlTxt.length] = this._lineComment;
}
i = i + this.getSkipLength(this._lineComment);
// Manejar palabras ignoradas
} else if (!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened&&this.isStartWith(this._ignore,codeArr,i)){
slash_slash_comment_opened = verdadero;
htmlTxt[htmlTxt.length] = this._ignore;
yo = yo + this.getSkipLength(this._ignore);
//Fin del procesamiento de comentarios multilínea
} else if (!quote_opened&&!slash_slash_comment_opened&&this.isStartWith(this._commentOff,codeArr,i)){
si (slash_star_comment_opened) {
slash_star_comment_opened = falso;
si(!this._deleteComment){
htmlTxt[htmlTxt.length] = this._commentOff;
}
yo = yo + this.getSkipLength(this._commentOff);
}
} demás {
//no en cadena
si(!quote_opened){
//Si no está en el comentario
si(!slash_slash_comment_opened && !slash_star_comment_opened){
htmlTxt[htmlTxt.length] = codeArr[i];
//Comentando
}demás{
si(!this._deleteComment){
htmlTxt[htmlTxt.length] = codeArr[i];
}
}
}demás{
htmlTxt[htmlTxt.length] = codeArr[i];
}
}

}

devolver htmlTxt.join("");
}

this.isStartWith = function(str,code,index){

if(typeof(str)!="undefinido"&&str.length>0){
var cc = nueva matriz();
for(var i=índice;i<índice+cadena.longitud;i++){
cc[cc.longitud] = código[i];
}
var c = cc.join("");
si(this._caseSensitive){
if(cadena.longitud>=código[índice].longitud&&c.indexOf(cadena)==0){
devolver verdadero;
}
}demás{
if(str.length>=code[index].length&&c.toLowerCase().indexOf(str.toLowerCase())==0){
devolver verdadero;
}
}
devolver falso;

} más {
devolver falso;
}
}

this.isFunction = función(val){
devuelve this._function.contains(this._caseSensitive?val:val.toLowerCase());
}

this.isBlockElement = función(val) {
devuelve this._blockElement.contains(this._caseSensitive?val:val.toLowerCase());
}

this.isChoiceElement = función(val) {
devuelve this._choiceElement.contains(this._caseSensitive?val:val.toLowerCase());
}

this.isSingleEyeElement = función(val) {
devuelve this._singleEyeElement.contains(this._caseSensitive?val:val.toLowerCase());
}

this.isNextElement = función(de,palabra){
for(var i=from;i<palabra.longitud;i++){
if(palabra[i]!=" "&&palabra[i]!="t"&&palabra[i]!="r"&&palabra[i]!="n"){
devolver this.isChoiceElement(palabra[i]);
}
}
devolver falso;
}

this.getSkipLength = función(val){
recuento de variables = 0;
for(var i=0;i<val.length;i++){
if(this._wordDelimiters.indexOf(val.charAt(i))>=0){
contar++;
}
}
si(cuenta>0){
contar=cuenta-1;
}
recuento de devoluciones;
}

this.getIdent=función(){
varn = [];
para(var i=0;i<this._tabNum;i++){
n[n.longitud] = "t";
}
devolver n.join("");
}
}

función doformato(o){
var htmltxt = ""

si (o == nulo){
alert("domNode es nulo!");
devolver;
}

var _syn = nuevo CLASS_FORMAT(_codetxt);
htmltxt = _syn.format();
devolver htmltexto;
}

función ir()
{
código var = document.getElementById("código").valor;
var xx = nuevo CLASS_FORMAT(código);
var a = nueva fecha();

if(document.getElementById('cboOperate').selectedIndex==1){
xx.isCompress=verdadero;
}demás{
xx.style = parseInt(document.getElementById('cboStyle').value);
}
document.getElementById("display").value = xx.format();
alert("Total de flores:" + (new Date().getTime()-a.getTime()) + "ms");
}
//-->
</SCRIPT>
<TEXTAREA id=filas de código=12 columnas=100>
/*
esta es una clase
*/

función xx (num,cadena){//Descripción
var a = num;this.aa = a;
this.bb = función(){alerta(str);}
this.cc = function(){for(var i=0;i<10;i++){document.title=i;}}};

xx.prototype.dd= function(){alert("d d kd"); }

var a = nuevo xx(100,"hola"),b=nuevo xx(0,"ttyp");
if(1>2) { alerta();
}
demás {
alerta("infierno");
}

a.bb();
b.dd();
alerta(a.aa);

</TEXTAREA> <BR>
<select id="cboOperate" onchange="if(this.selectedIndex==1)document.getElementById('cboStyle').disabled=true; de lo contrario document.getElementById('cboStyle').disabled=false;">
<option value="0">Formato</option>
<option value="1">Compresión</option>
</seleccionar>
<seleccione id="cboStyle">
<option value="0">Clásico</option>
<opción valor="1">Microsoft</option>
</seleccionar>
<ENTRADA al hacer clic=ir() tipo=valor del botón=ir><br>
<textarea id=mostrar filas=12 columnas=100>
</textarea>
</BODY></HTML>