Formatage et compression du code JS

Auteur：Eve Cole Date de mise à jour：2009-06-08 18:34:09

Avez-vous déjà eu mal à la tête en regardant du code désordonné écrit par d'autres ? Avez-vous déjà été gêné par la lecture du code BWindow ? Avez-vous déjà hésité quant à la contradiction entre la réduction de la taille de JS et la lisibilité de JS ? avoir un code Un programme de formatage et de compression de code est enfin disponible aujourd'hui. Il est écrit en JS pur, et bien sûr il est open source. Désolé, laissez-moi d'abord faire une publicité :). longtemps, et je l'ai finalement utilisé aujourd'hui. J'ai fini de l'écrire ce week-end. En raison de la précipitation de l'écriture, il y a encore quelques petits bugs. Veuillez faire attention aux mises à jour fréquemment !

<HTML><HEAD><TITLE>Format</TITLE>
<META content="MSHTML 6.00.2800.1528" nom=GÉNÉRATEUR>
<META content="" nom=Auteur>
<META content="" nom=Mots clés>
<META content="" nom=Description></HEAD>
<CORPS>
<Langage SCRIPT=JavaScript>
<!--
/**//**//**//**
** ================================================= ===================================================
** Nom de la classe : CLASS_FORMATER
** Fonction : formatage JS
** Exemple:
-------------------------------------------------- --------------------------------------------------

var xx = nouveau CLASS_FORMATER(code);

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

-------------------------------------------------- --------------------------------------------------
** Auteur : ttyp
** Courriel : [email protected]
** Date : 2006-5-21
**Version : 0.1
** ================================================= ===================================================
**/

fonction CLASS_FORMAT(code){
//Classe de table de hachage
fonction Table de hachage(){
this._hash = new Object();
this.add = fonction (clé, valeur) {
if(typeof(key)!="undéfini"){
if(this.contains(key)==false){
this._hash[key]=typeof(value)=="undefined"?null:value;
renvoie vrai ;
} autre {
renvoie faux ;
}
} autre {
renvoie faux ;
}
}
this.remove = function(key){supprimer this._hash[key];}
this.count = function(){var i=0;for(var k in this._hash){i++;} return i;}
this.items = function(key){return this._hash[key];}
this.contains = function(key){return typeof(this._hash[key])!="undéfini";}
this.clear = function(){for(var k in this._hash){delete this._hash[k];}}

}

this._caseSensitive = true

//Convertir la chaîne en table de hachage;
this.str2hashtable = fonction(clé,cs){

var _key = key.split(/,/g);
var _hash = new Hashtable();
var _cs = vrai ;

if(typeof(cs)=="undéfini"||cs==null){
_cs = this._caseSensitive;
} autre {
_cs = cs;
}

pour(var i dans _key){
si(_cs){
_hash.add(_key[i]);
} autre {
_hash.add((_key[i]+"").toLowerCase());
}

}
retourner _hash ;
}

//Récupère le code à convertir
this._codetxt = code ;

if(typeof(syntax)=="undefined"){
syntaxe = "" ;
}

this._deleteComment = false;
//Que ce soit sensible à la casse
this._caseSensitive = true;
//Mots clés pouvant être ajoutés après l'instruction block
this._blockElement = this.str2hashtable("switch,if, while,try,finally");
//C'est une déclaration de fonction
this._function = this.str2hashtable("fonction");
//Le point-virgule entre parenthèses de cette ligne ne provoque pas de saut de ligne.
this._isFor = "pour";

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

this._beginBlock = "{";
this._endBlock = "}";

this._singleEyeElement = this.str2hashtable("var,new,return,else,delete,in,case");
//Obtenir le caractère divisé
this._wordDelimiters= " ,.?!;:\/<>(){}[]"'rnt=+-|*%@#$^&";
//Citations de caractères
this._quotation = this.str2hashtable("",'");
// Caractères de commentaire de ligne
this._lineComment = "//";
//Caractère d'échappement
this._escape = "\";
//Début des références multilignes
this._commentOn = "/*";
//Fin de la cotation multiligne
this._commentOff = "*/";
//Terminateur de ligne
this._rowEnd = ";";

this._in = "dans";

this.isCompress = faux ;
ceci.style = 0;

ceci._tabNum = 0;

this.format = fonction() {
var codeArr = nouveau tableau();
var mot_index = 0 ;
var htmlTxt = new Array();

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

//Obtenir le tableau de caractères divisé (segmentation de mots)
pour (var i = 0; i < this._codetxt.length; i++) {
if (this._wordDelimiters.indexOf(this._codetxt.charAt(i)) == -1) { //Mot clé introuvable
if (codeArr[word_index] == null || typeof(codeArr[word_index]) == 'indéfini') {
codeArr[index_mot] = "";
}
codeArr[word_index] += this._codetxt.charAt(i);
} autre {
if (typeof(codeArr[word_index]) != 'indéfini' && codeArr[word_index].length > 0)
mot_index++;
codeArr[word_index++] = this._codetxt.charAt(i);
}
}

var quote_opened = false; //Guillemets
var slash_star_comment_opened = false; //Marque de commentaire multiligne
var slash_slash_comment_opened = false; //Marque de commentaire sur une seule ligne
var numéro_ligne = 1; //numéro de ligne
var quote_char = ""; //Type de guillemet

var function_opened = false;

var bracket_open = false;
var for_open = false;

//Selon le mot divisé, affichage en blocs
pour (var i=0; i <=word_index; i++){
//Gérer les lignes vides (en raison d'un échappement)
if(typeof(codeArr[i])=="undefined"||codeArr[i].length==0){
continuer;
} sinon if(codeArr[i]==" "||codeArr[i]=="t"){
si(slash_slash_comment_opened||slash_star_comment_opened){
if(!this._deleteComment){
htmlTxt[htmlTxt.length] = codeArr[i];
}
}
si(quote_opened){
htmlTxt[htmlTxt.length] = codeArr[i];
}
} sinon if(codeArr[i]=="n"){
//Gérer la nouvelle ligne
} sinon si (codeArr[i] == "r"){
slash_slash_comment_opened = faux ;
quote_opened = faux ;
numéro_ligne++;
si(!this.isCompress){
htmlTxt[htmlTxt.length] = "rn"+ this.getIdent();
}
// Traiter les marqueurs de paramètres dans la fonction
} sinon if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&this.isFunction(codeArr[i])){
htmlTxt[htmlTxt.length] = codeArr[i] + " ";
function_opened = vrai ;
} sinon if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==this._isFor){
htmlTxt[htmlTxt.length] = codeArr[i];
for_open = vrai ;
} sinon if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]=="("){
bracket_open = vrai ;
htmlTxt[htmlTxt.length] = codeArr[i];
} sinon si (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==")"){
bracket_open = faux ;
htmlTxt[htmlTxt.length] = codeArr[i];
} sinon if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==this._rowEnd){
si(!this.isCompress){
si(!for_open){
if(i<word_index&&(codeArr[i+1]!="r"&&codeArr[i+1]!="n")){
htmlTxt[htmlTxt.length] = codeArr[i] + "n" + this.getIdent();
}autre{
htmlTxt[htmlTxt.length] = codeArr[i] + this.getIdent();
}
}autre{
htmlTxt[htmlTxt.length] = codeArr[i];
}
}autre{
htmlTxt[htmlTxt.length] = codeArr[i];
}
} sinon if(!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==this._beginBlock){
for_open = faux ;
si(!this.isCompress){
changer (ce.style){
cas 0 :
this._tabNum++;
htmlTxt[htmlTxt.length] = codeArr[i] + "n" + this.getIdent();
casser;
cas 1 :
htmlTxt[htmlTxt.length] = "n" + this.getIdent();
this._tabNum++;
htmlTxt[htmlTxt.length] = codeArr[i] + "n"+ this.getIdent();
casser;
défaut:
this._tabNum++;
htmlTxt[htmlTxt.length] = codeArr[i];
casser;

}
}autre{
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<word_index&&codeArr[i+1]!=this._rowEnd){
htmlTxt[htmlTxt.length] = "n" + this.getIdent() + codeArr[i];
}autre{
htmlTxt[htmlTxt.length] = "n" + this.getIdent() + codeArr[i];
}
}autre{
if(i<word_index&&codeArr[i+1]!=this._rowEnd){
htmlTxt[htmlTxt.length] = codeArr[i] + this._rowEnd;
}autre{
htmlTxt[htmlTxt.length] = codeArr[i];
}
}
//processus de mots-clés
} sinon if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened && this.isBlockElement(codeArr[i])){
htmlTxt[htmlTxt.length] = codeArr[i];
// Traiter les objets intégrés (ajouter un espace après)
} sinon 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] + " ";
// Traiter les guillemets doubles (pas de caractères d'échappement avant les guillemets)
} sinon if (!slash_star_comment_opened&&!slash_slash_comment_opened&&this._quotation.contains(codeArr[i])){
si (quote_opened){
// est le guillemet correspondant
si(quote_char==codeArr[i]){
htmlTxt[htmlTxt.length] = codeArr[i];
quote_opened = faux ;
quote_char = "";
} autre {
htmlTxt[htmlTxt.length] = codeArr[i];
}
} autre {
htmlTxt[htmlTxt.length] = codeArr[i];
quote_opened = vrai ;
quote_char = codeArr[i];
}
//Gérer les caractères d'échappement
} sinon if(codeArr[i] == this._escape){
htmlTxt[htmlTxt.length] = codeArr[i];
si(i<word_index-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);
je = je + 1 ;
}
}
//Gérer le début des commentaires multilignes
} sinon if (!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened&&this.isStartWith(this._commentOn,codeArr,i)){
slash_star_comment_opened = vrai ;
if(!this._deleteComment){
htmlTxt[htmlTxt.length] = this._commentOn;
}
je = je + this.getSkipLength(this._commentOn);
// Traiter les commentaires sur une seule ligne
} sinon if (!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened&&this.isStartWith(this._lineComment,codeArr,i)){
slash_slash_comment_opened = vrai ;
if(!this._deleteComment){
htmlTxt[htmlTxt.length] = this._lineComment;
}
je = je + this.getSkipLength(this._lineComment);
// Gérer les mots ignorés
} sinon if (!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened&&this.isStartWith(this._ignore,codeArr,i)){
slash_slash_comment_opened = vrai ;
htmlTxt[htmlTxt.length] = this._ignore;
je = je + this.getSkipLength(this._ignore);
//Fin du traitement des commentaires multilignes
} sinon if (!quote_opened&&!slash_slash_comment_opened&&this.isStartWith(this._commentOff,codeArr,i)){
si (slash_star_comment_opened) {
slash_star_comment_opened = faux ;
if(!this._deleteComment){
htmlTxt[htmlTxt.length] = this._commentOff;
}
je = je + this.getSkipLength(this._commentOff);
}
} autre {
//pas dans la chaîne
si(!quote_opened){
//Si ce n'est pas dans le commentaire
si(!slash_slash_comment_opened && !slash_star_comment_opened){
htmlTxt[htmlTxt.length] = codeArr[i];
//Commentaire
}autre{
if(!this._deleteComment){
htmlTxt[htmlTxt.length] = codeArr[i];
}
}
}autre{
htmlTxt[htmlTxt.length] = codeArr[i];
}
}

}

return htmlTxt.join("");
}

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

if(typeof(str)!="undefined"&&str.length>0){
var cc = nouveau tableau ();
pour(var i=index;i<index+str.length;i++){
cc[cc.longueur] = code[i];
}
var c = cc.join("");
si(this._caseSensitive){
if(str.length>=code[index].length&&c.indexOf(str)==0){
renvoie vrai ;
}
}autre{
if(str.length>=code[index].length&&c.toLowerCase().indexOf(str.toLowerCase())==0){
renvoie vrai ;
}
}
retourner faux ;

} autre {
renvoie faux ;
}
}

this.isFunction = fonction(val){
return this._function.contains(this._caseSensitive?val:val.toLowerCase());
}

this.isBlockElement = fonction (val) {
return this._blockElement.contains(this._caseSensitive?val:val.toLowerCase());
}

this.isChoiceElement = fonction(val) {
return this._choiceElement.contains(this._caseSensitive?val:val.toLowerCase());
}

this.isSingleEyeElement = fonction (val) {
return this._singleEyeElement.contains(this._caseSensitive?val:val.toLowerCase());
}

this.isNextElement = fonction (de, mot) {
pour(var i=from;i<word.length;i++){
if(word[i]!=" "&&word[i]!="t"&&word[i]!="r"&&word[i]!="n"){
renvoie this.isChoiceElement(word[i]);
}
}
renvoie faux ;
}

this.getSkipLength = fonction(val){
nombre de variables = 0 ;
pour(var i=0;i<val.length;i++){
if(this._wordDelimiters.indexOf(val.charAt(i))>=0){
compte++;
}
}
si(compte>0){
compte=compte-1 ;
}
nombre de retours ;
}

this.getIdent=fonction(){
var n = [];
pour(var i=0;i<this._tabNum;i++){
n[n.longueur] = "t";
}
return n.join("");
}
}

fonction doformat(o){
var htmltxt = "";

si (o == nul){
alert("domNode est nul!");
retour;
}

var _syn = nouveau CLASS_FORMAT(_codetxt);
htmltxt = _syn.format();
renvoyer htmltxt ;
}

fonction aller()
{
var code = document.getElementById("code").value;
var xx = nouveau CLASS_FORMAT(code);
var a = new Date();

if(document.getElementById('cboOperate').selectedIndex==1){
xx.isCompress=true ;
}autre{
xx.style = parseInt(document.getElementById('cboStyle').value);
}
document.getElementById("display").value = xx.format();
alert("Total de fleurs :" + (new Date().getTime()-a.getTime()) + "ms");
}
//-->
</SCRIPT>
<TEXTAREA id=code rows=12 cols=100>
/*
C'est une classe
*/

fonction xx (num,str){//Description
var a = num;this.aa = a;
this.bb = function(){alert(str);}
this.cc = function(){for(var i=0;i<10;i++){document.title=i;}}};

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

var a = new xx(100,"bonjour"),b=new xx(0,"ttyp");
si(1>2) { alerte();
}
autre {
alert(" l'enfer ");
}

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

</TEXTAREA> <BR>
<select id="cboOperate" onchange="if(this.selectedIndex==1)document.getElementById('cboStyle').disabled=true;else document.getElementById('cboStyle').disabled=false;">
<option value="0">Format</option>
<option value="1">Compression</option>
</sélectionner>
<select id="cboStyle">
<option value="0">Classique</option>
<option value="1">Microsoft</option>
</sélectionner>
<INPUT onclick=go() type=bouton value=go><br>
<textarea id=display rows=12 cols=100>
</textarea>
</BODY></HTML>