Question

我对javascript很新，并且不能确定使用＆＃34; selectize＆＃34;这两个代码之间是否存在差异。输入

两者都有效，但我无法判断一个人是否更好，或者他们是否真的相同。哪一个更好，如果有的话？是否有＆＃34;规则＆＃34;关于将javascripts放在html文档中的最佳实践？

如果这非常简单，请道歉：）

TL;博士

第一个代码在$('#location').selectize({ .... })代码

中包含<body>

第二个代码具有相同的$('#location').selectize({ .... })，但位于<head>标记中并附在

中

$(document).ready(function () { $('#location').selectize({ .... }) )}

<html lang="en">
<head>
    <title>title</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css"
          rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
</head>
<body>
<form role="form" class="form-vertical" method="POST" action="/profile">
    <div class="form-group">
        <label for="location">location</label>


        <input type="text" value="Lorien, 58120 Corancy, France" placeholder="" name="location"
               id="location" class="form-control selectized" tabindex="-1" style="display: none;">

        <div class="selectize-control form-control single">
            <div class="selectize-input items full has-options has-items">
                <div class="item" data-value="Lorien, 58120 Corancy, France">Lorien, 58120 Corancy,
                    France
                </div>
                <input type="text" autocomplete="off" tabindex="" style="width: 4px;"></div>
            <div class="selectize-dropdown single form-control" style="display: none;">
                <div class="selectize-dropdown-content"></div>
            </div>
        </div>
        <input type="submit" value="Update" name="submit" id="submit">
    </div>
</form>
<script>
    $('#location').selectize({
        valueField: 'formatted_address',
        labelField: 'formatted_address',
        searchField: 'formatted_address',
        maxItems: 1,
        delimiter: ';',
        create: false,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: "googleloc",
                type: 'GET',
                dataType: 'json',
                data: {
                    search: query,
                },
                error: function () {
                    callback();
                },
                success: function (res) {
                    callback(res.results);
                    googresults = res.results;
                }
            });
        },
        onChange: function (value) {
            if (!value.length) return;
            for (var key in googresults) {
                if (googresults[key].formatted_address == value) {
                    var lat = googresults[key].geometry.location.lat;
                    var lng = googresults[key].geometry.location.lng;
                    for (var component in googresults[key].address_components) {
                        if (googresults[key].address_components[component].types[0] == "country") {
                            var cc = googresults[key].address_components[component].short_name;
                        }
                    }
                }
            }
            $('#latitude').val(lat);
            $('#longitude').val(lng);
            $('#country_code').val(cc);
        }
    });
</script>
</body>
</html>

和版本2，其中包含头部中的选择项目

<html lang="en">
<head>
    <title>title</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css"
          rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
    <script>
    $(document).ready(function () {
    $('#location').selectize({
        valueField: 'formatted_address',
        labelField: 'formatted_address',
        searchField: 'formatted_address',
        maxItems: 1,
        delimiter: ';',
        create: false,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: "googleloc",
                type: 'GET',
                dataType: 'json',
                data: {
                    search: query,
                },
                error: function () {
                    callback();
                },
                success: function (res) {
                    callback(res.results);
                    googresults = res.results;
                }
            });
        },
        onChange: function (value) {
            if (!value.length) return;
            for (var key in googresults) {
                if (googresults[key].formatted_address == value) {
                    var lat = googresults[key].geometry.location.lat;
                    var lng = googresults[key].geometry.location.lng;
                    for (var component in googresults[key].address_components) {
                        if (googresults[key].address_components[component].types[0] == "country") {
                            var cc = googresults[key].address_components[component].short_name;
                        }
                    }
                }
            }
            $('#latitude').val(lat);
            $('#longitude').val(lng);
            $('#country_code').val(cc);
        }
    });
});
</script>
</head>
<body>
<form role="form" class="form-vertical" method="POST" action="/profile">
    <div class="form-group">
        <label for="location">location</label>


        <input type="text" value="Lorien, 58120 Corancy, France" placeholder="" name="location"
               id="location" class="form-control selectized" tabindex="-1" style="display: none;">

        <div class="selectize-control form-control single">
            <div class="selectize-input items full has-options has-items">
                <div class="item" data-value="Lorien, 58120 Corancy, France">Lorien, 58120 Corancy,
                    France
                </div>
                <input type="text" autocomplete="off" tabindex="" style="width: 4px;"></div>
            <div class="selectize-dropdown single form-control" style="display: none;">
                <div class="selectize-dropdown-content"></div>
            </div>
        </div>
        <input type="submit" value="Update" name="submit" id="submit">
    </div>
</form>
</body>
</html>

Answer 1

最好将javascript放在</body>之前的底部。这样它就不会阻止渲染（有利于提高性能）。此外，您知道DOM（HTML元素树）已为您准备好了。

$(document).ready(function () {})是jQuery等待DOM准备好的方式。如果你把你的javascript放在<head>中，你必须使用这种技术，因为很明显你要使用的所有实际HTML都需要解析它。一旦DOM准备就绪，就会调用回调（传递给.ready()的函数）。

Answer 2

你应该把javascript代码用于快速页面加载。浏览器从上到下呈现代码。如果您将javascript代码置于底部，则首先加载页面元素，然后加载javascript代码。

Answer 3

如果你把JS放在头脑中并且没有监听器来检测DOM加载，那么你可能无法操纵DOM对象。通常最好将脚本保留在正文的底部，这样可以防止出现任何错误，并允许您向所有DOM元素添加内容。

e.g。将以下脚本放在头部会导致错误

<script>
   document.getElementById('myElement').setAttribute('data-myValue','myValue')
</script>

Answer 4

嗯，在jQuery革命的开始，这个问题不是很热。每当你希望时，jQuery就会出现在顶部和脚本上。

随着为任何可能目的而开发的数千个插件的爆炸式增长，您会看到包含许多必须加载的插件的网页。

在＆lt; head＆gt;中放置所有这些不是直接需要的内容，以便显示您的网站。标记会减慢网站加载的时间，这是因为为了加载插件，必须完成太多的请求。

因此，只有'css'和'js'需要运行您的初始HTML并且在页面的末尾才能关闭'body'标记所有其他内容，这是一个常见的经验法则脚本。

在所有这些结束时，您可以使用附加的脚本标记，例如可以放置一些自定义代码。

$(document).ready(function(){
    //stuff here
})

将javascript放在头部或身体中有区别吗？

4 个答案: