Optymalizacja kodu

**Surfer** · 22-11-2012, 00:31

Witam

posiadam taki kod

Kod html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">

        <head>
                <title>MouseMove</title>
                <meta http-equiv="Content-Type"
                content="text/html; charset=utf8" />
                <!-- dodanie jQuery do dokumentu -->
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
                <style type="text/css">
                        .bg1 {
                                background: #E8E8E8;
                        }
                        .bg2 {
                                background: #D4D4D4;
                        }
                        ul {
                                list-style-type: none;
                        }
                        ul li p {
                                position: fixed;
                                background-color: #DDDDDD;
                                display: none;
                                z-index: 1;
                                width: 300px;
                        }
                </style>
                <!-- Nasz kod Javascript: -->
                <script type="text/javascript">
                        $(document).ready(

                        function ()
                        {
                                $("ul li").hover(function ()
                                {
                                        $(this).children("p").toggle();
                                        $(this).mousemove(function (e)
                                        {
                                                $("ul li").children("p").css("top", e.pageY + 5);
                                                $("ul li").children("p").css("left", e.pageX + 5);
                                        });
                                }, function ()
                                {
                                        $(this).children("p").toggle();
                                });


                        });
                </script>
        </head>

        <body>
                <ul>
                        <li>Jeden
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                        </li>
                        <li>Dwa
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae
                                        mi.</p>
                        </li>
                        <li>Trzy
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae
                                        mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy
                                        lorem ut quam.</p>
                        </li>
                </ul>
        </body>

</html>

Zastanawiam się, jak teraz przerzucić ten kawałek:

Kod:

 $(this).mousemove(function (e)
{
        $("ul li").children("p").css("top", e.pageY + 5);
        $("ul li").children("p").css("left", e.pageX + 5);
}

do osobnej funkcji. W javascript niestety dopiero zaczynam i nie mam pojęcia, na jakiej zasadzie powinno to działać.

**karer** · 22-11-2012, 09:26

twojafunkcja = function (e)
{
$("ul li").children("p").css("top", e.pageY + 5);
$("ul li").children("p").css("left", e.pageX + 5);
}

$(this).mousemove(function (e)
{
twojafunkcja(e);
}

Ja preferuje taki zapis. Wtedy latwiej operowac funkcjami. Istnieje jeszcze zapis alternatywny ale mi sie mniej podoba bo jest mniej intuicyjny. W JS najlepiej traktowac funkcje jako zawartosc zmiennej. Tak samo lepiej przypisywac je do zmiennych jako funkcje anonimowe a nie przez odgorne deklarowanie jak w tym przypadku:

function twojafunkcja (e)
{
$("ul li").children("p").css("top", e.pageY + 5);
$("ul li").children("p").css("left", e.pageX + 5);
}