Why do comments affect the logic of my file?

2019-07-28 16:42发布

问题:

EDIT:

In here, it shows this as being a comment. In my IDE, it shows this as being code. So weird (Code set #2):

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>

I have two files. One has comments and one does not. The first set of code functions perfectly. The second set of code tells me Uncaught ReferenceError: $ is not defined in the JavaScript console, and the alert is not called. Why are the comments affecting my script?

Code Set #1

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</head>
<body>
<script>
    $(function () {
        alert("JQUERY!");
    });
</script>
</body>
</html>

Code Set #2

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
    <![endif]-->
</head>
<body>
<script>
    $(function () {
        alert("JQUERY!");
    });
</script>
</body>
</html>

回答1:

These are no ordinary comments, but conditional comments. See: http://www.quirksmode.org/css/condcom.html

The comment above comments all javascript includes, thus they are not loaded, except in Internet Explorer lower than Version 9.

You get the error message because jquery is not loaded (it is inside the HTML comments). If you Use e.g. IE8 there won't be an error.



回答2:

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<![endif]-->

The if construct there is a conditional comment used for IE.

The script tags will only be rendered if you're using an IE with a version number greater than 9. Every other browser will treat that whole section like a single comment and not include any of that javascript.



回答3:

Your file is expecting jQuery to be loaded. It seems that you commented out the jQuery script, you have to include the jQuery script, uncommented:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


回答4:

It won't be run by the browser right? It will only be in every case streamed by the server, and downloaded by the client.

It shouldn't make any difference, as long as you don't have too many characters

Although dynamic pages generated server side, you might have to use server-side comment such as: <%-- comment --%> or {% comment %}



回答5:

<!--[if lt IE 9]> & <![endif]--> are conditional comments for IE. Other browsers will read them as comments. If you are using an IE Version later than 9 these scripts will be loaded, which could be causing conflicts with other scripts.