使用PHP即时缩小Javascript

Question

I use PHP to remove extra spaces and lines on the fly for HTML, CSS and javascript:- At the start of the PHP file I use ob_start();

At the end of the script this :-

echo preg_replace(array('/\s{2,}/', '/[\t\n]/'), ' ', ob_get_clean() );

But after this my javascript code doesn't work. I use semi-colons and brackets properly with javascript, so I wonder what is wrong in this code ! Here is a bit of my javascript, it works if I dont use the function to remove extra lines :-

function delfile(fileid)
    {
      var div = "f_" + fileid;
      var location = "/delfile/" + fileid;
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange=function()  {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
                    {
                        var patt = /Deleted/;
                        var text = xmlhttp.responseText;
                        if(patt.test(text))
                        {
                            var elem = document.getElementById(div);
                            elem.parentNode.removeChild(elem);
                        }
                    else    
                        {
                            alert('Some error deleting that');
                        }

                }
                            }
      xmlhttp.open("POST", location, true);
      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xmlhttp.send("");
  }

After minifying all code on the fly, this code doesn't work ! It gives this error : Uncaught ReferenceError: show is not defined files:1onclick files:1

Minified Output : <script>function delfile(fileid) { var div = "f_" + fileid; var location = "/delfile/" + fileid; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var patt = /Deleted/; var text = xmlhttp.responseText; if(patt.test(text)) { var elem = document.getElementById(div); elem.parentNode.removeChild(elem); } else { alert('Some error deleting that'); } } } xmlhttp.open("POST", location, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(""); }</script> <script>function delfile(fileid) { var div = "f_" + fileid; var location = "/delfile/" + fileid; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var patt = /Deleted/; var text = xmlhttp.responseText; if(patt.test(text)) { var elem = document.getElementById(div); elem.parentNode.removeChild(elem); } else { alert('Some error deleting that'); } } } xmlhttp.open("POST", location, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(""); }</script>

I guess there is some problem near xmlhttp.onreadystatechange=function() { .

Answer 1

You're missing a semicolon after the xmlhttp.onreadystatechange so it should look like this

xmlhttp.onreadystatechange=function()  { ... };

Although the best advice I think is not to use such minification because you're risking unexpected errors (such as the one you're asking about). Also, I'm not sure if the few bytes you will safe are worth this extra hassle.

If you really have a good reason to minify your js/html, then I'd go for some reliable software/library to do this.