Tags

  • Javascript more type save

    by Frans van Ek | Mar 01, 2015

    Ok ok, ik ben een beetje bevooroordeeld. Ik wil intellisense als ik codeer. Het voorkomt namelijk dat ik type fouten maak en het gaat gewoon een stuk sneller.

    Er is nog een andere reden dat ik graag interllisense gebruik. Het kan er namelijk ook voor zorgen dat ik minder runtime errors heb en dus minder hoef te debuggen.

    Dit is dan ook de reden dat ik let op de mogelijkheid om runtime errors te voorkomen.Een van de punten die ik zelf niet prettig vindt aan javascript is dat veel string literals worden gebruikt als identificatie van elementen.

    Neem het volgende stuk je code.

     

    function update_div(id) {

            $("#" + id).html(newDate().getTime().toLocaleString()).parent().addClass("selected");

        }

        function clear_div(id) {

            $("#" + id).html("&nbsp").parent().removeClass("selected");

        }

        $(document).on("trigger_selection_main", function () {

            $(document).trigger("on_selection_main");

        }

        );

       

        $(document).on("trigger_selection_both", function () {

            $(document).trigger("on_selection_both");

        }

          );


    Wat opvalt zijn de vele stukjes tekst. Dit zijn niet stukken tekst maar strings met daarin de naam van een event of een Id van een element. Met een typefout in deze zal het betreffende stukje code niet werken.

    Verbetering.

    Door in de javascript een object aan te maken met daarin alle string teksten kunnen we vervolgens met intellisense gaan verwijzen. Een ander voordeel is dat bij het veranderen van de teksten het nu maar op één centrale plek aangepast moet worden.




     

    <script>

        var naming = {
            selectClass: "selected",
            triggerMainSelection: "trigger_selection_main",
            onSelectionMain: "on_selection_main",
            onSelectionBoth: "on_selection_both",
            triggerSelectionBoth: "trigger_selection_both",
        }



        function update_div(id) {

            $("#" + id).html(new Date().getTime().toLocaleString()).parent().addClass(naming.selectClass);

        }
        function clear_div(id) {
            $("#" + id).html("&nbsp").parent().removeClass(naming.selectClass);
        }

        $(document).on(naming.triggerMainSelection, function () {

            $(document).trigger(naming.onSelectionMain);
        }
        );

        $(document).on(naming.triggerSelectionBoth, function () {
            $(document).trigger(naming.onSelectionBoth);
        }
          );

       
    </script>

    De voordelen in mijn ogen zijn:

    -       Intellisense

    -       Minder kans op runtime errors

    -       Centrale locatie van de namen

    -       Code is beter te lezen.

    Nadelen :

    -        Iets meer coderen.

    175 Comments

Sitefinity Web Content Management