Создание страницы с помощью jQuery и ajax

Question

Я создаю игру, в которой я использую только jQuery и AJAX для навигации (загрузки контента) и тому подобного. Страница никогда не обновляется.

Проблема в том, что мне нужно создавать функции точно для всего. Например:

<p onclick="a_function('a_value')">Click me!</p>

Это приведет к большому количеству функций в конце. Мне интересно, есть ли лучший способ пойти? Или я должен написать функции для каждой мелочи, которая происходит в игре, каждый клик, который делает игрок?

Answer 1

В конечном счете, вы, вероятно, в конечном итоге напишите множество кода и множество различных функций для управления своей игрой.Тем не менее, вы можете повторно использовать некоторые функции в зависимости от того, что вы пытаетесь выполнить, что улучшит практику кодирования и приведет к более удобному коду.Например, этот код:

<p onclick="moveup()">Up</p>
<p onclick="movedown()">Down</p>
<p onclick="moveleft()">Left</p>
<p onclick="moveright()">Right</p>

Может стать:

<p onclick="move('up')">Move Up</p>
<p onclick="move('down')">Move Down</p>
<p onclick="move('left')">Move Left</p>
<p onclick="move('right')">Move Right</p>

Опять же, все зависит от того, что вы пытаетесь сделать.

Answer 2

ну вот и идея ... вы можете попытаться сделать ваши функции как можно более общими.Возможно, вы захотите начать с прочтения шаблонов проектирования Javascript. здесь - бесплатная электронная книга.

Также вы хотели бы сохранить свой JavaScript в отдельном файле и не включать его в разметку,Так как вы используете jquery, вы можете привязывать события к dom, используя события jquery.проверьте API здесь: http://api.jquery.com/category/events/

Например.

$("p").click(function(){alert("you clicked on p");});  //binds an event on all <p> tags in the page

Answer 3

Действительно!ты должен сделать это.даже если вы напишите свое приложение в asp php java python и т. д., вам придется программировать эти вещи!если вы используете такие фреймворки, как spring, grails, Yii и т. д., они могут справиться с грубыми задачами и созданием страниц ... но логика для навигации и работы приложения должна быть запрограммирована вами!

у.е.

Answer 4

Поскольку вы используете jQuery, вы можете рассмотреть возможность инкапсуляции поведения при использовании виджетов jQuery .Наличие множества автономных функций может быть сложно поддерживать, но виджеты позволят вам более аккуратно использовать такие вещи, как наследование и чистые интерфейсы.Например:

(function($) {

    var DEAD_SPRITE_IDX = 0;
    var HEALTHY_SPRITE_IDX = 1;
    var WOUNDED_SPRITE_IDX = 2;

    $.widget('creature', {

        options: {
            hitPoints: 100,
            images: undefined
        },

        _create: function() {
            var me = this;

            this.element.css(
                'background-image', this.options.images[HEALTHY_SPRITE_IDX]);

            this.element.click(function() {
                me.damage(25);
            });
        },

        damage: function(points) {
            this.hitPoints -= points;
            if (this.hitPoints <= 0) {
                this._die();
            }
        },

        _die: function() {
            this.element.css('background-image', this.options.images[DEAD_SPRITE_IDX]);
        }

    });
})(jQuery);

Вы бы использовали это так:

var monster = $('.the-creature').creature({
    hitPoints: 500, 
    images: ['images/dead.png', 'images/healthy.png', 'images/wounded.png']});
monster.creature('damage', 15);

Answer 5

Я использовал что-то в этом духе, прежде чем включить его внизу каждой страницы, и это позволяет мне управлять страницей, используя атрибуты href и target тегов <a>:

(function(){
    var as = document.getElementsByTagName('a');
    for(var i = 0; i < as.length; i++){
        if(as[i].getAttribute('target') == '_None')
            as[i].onclick = targetNone;
        if(as[i].getAttribute('target').substring(0, 5) == '_Load')
            as[i].onclick = loadIntoTarget;
     }

    function targetNone(){
        alert('Make Ajax call to "'+this.href+'"');
        return false;
    }

    function loadIntoTarget(){
        alert('Make Ajax call to "'+this.href+'", and put it in "'+this.getAttribute('target').substring(6)+'"');
        document.getElementById(this.getAttribute('target').substring(6)).innerHTML = 'Ajax Result';
        return false;
    }
})();

Таким образом, вы можете написать простой HTML как:

<a href="process/purchase-weapon.php" target="_None">Buy!</a><br />
<a href="process/sell-weapon.php" target="_None">Sell!</a><br />
<a href="page/weapon.php?id=10" target="_Load-thediv">Info</a><br />
<div id="thediv">Weapon info will be loaded here.</div>

См. Пример здесь: http://jsfiddle.net/Paulpro/AD9Gj/