Soy muy nuevo en javascript y no puedo entender si hay una diferencia entre esas 2 piezas de código usando una entrada "selectize".

Ambos funcionan pero no puedo entender si uno es mejor o si son realmente iguales. ¿Cuál es preferible, si hay alguno? ¿existen "reglas" o mejores prácticas en cuanto a dónde colocar javascripts en el documento html?

Disculpas si esto es muy trivial :)

tl; dr

El primer código tiene la $('#location').selectize({ .... }) dentro de la etiqueta <body>

El segundo código tiene el mismo $('#location').selectize({ .... }) pero en la etiqueta <head> y está encerrado en

$(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>

Y la versión 2 que tiene el elemento seleccionado en la cabeza

<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>
0
euri10 11 dic. 2015 a las 00:29

4 respuestas

La mejor respuesta

Siempre es mejor colocar JavaScript en la parte inferior justo antes de </body>. De esa manera no bloquea el renderizado (bueno para el rendimiento). Además, en ese momento ya sabes que el DOM (el árbol de elementos HTML) está listo para ti.

$(document).ready(function () {}) es la forma de esperar de jQuery hasta que el DOM esté listo. Si coloca su javascript en <head>, debe usar esta técnica, porque obviamente todo el HTML real con el que desea trabajar viene después y necesita ser analizado. La devolución de llamada (la función pasada a .ready()) se llama una vez que el DOM está listo.

3
klaemo 10 dic. 2015 a las 21:41

Bueno, al comienzo de la revolución jQuery, esta pregunta no era muy candente. jQuery en la parte superior y el script siempre que lo desee.

Con el crecimiento explosivo de los miles de complementos desarrollados para cualquier propósito posible, verá páginas web con muchos de esos complementos que deben cargarse.

Al colocar todo esto, que no se necesita directamente para mostrar su sitio, en la etiqueta se ralentizará el tiempo de carga del sitio, y esto debido a que se deben hacer demasiadas solicitudes para cargar los complementos .

Así que triste es una regla general común para colocar en la cabeza solo el 'css' y el 'js' necesarios para ejecutar su HTML inicial y al final de la página ANTES de que el 'cuerpo' cierre todas las demás secuencias de comandos.

Al final de todo esto, puede tener la etiqueta de script adicional donde se puede colocar algún código personalizado, por ejemplo

$(document).ready(function(){
    //stuff here
})
1
Kevin B 10 dic. 2015 a las 22:12

Si coloca JS en la cabeza y no tiene un oyente para detectar la carga DOM, entonces es posible que no pueda manipular objetos DOM. Por lo general, es mejor mantener los scripts en la parte inferior del cuerpo, esto evitará cualquiera de esos errores y le permitirá agregar cosas a todos los elementos DOM.

P.ej. Poner el siguiente script en la cabeza dará como resultado un error

<script>
   document.getElementById('myElement').setAttribute('data-myValue','myValue')
</script>
1
Joe Thomas 10 dic. 2015 a las 21:46

Debe poner el código javascript para cargar la página rápidamente. Código de renderizado del navegador de arriba a abajo. Si pone su código de JavaScript al final, los elementos de la página se cargarán primero y luego cargarán los códigos de JavaScript.

1
neurocranium 10 dic. 2015 a las 21:35
34212089