使用jQuery和ajax构建页面

Question

我正在构建一个游戏，我只使用jQuery和AJAX来导航（加载内容）以及类似的东西。该页面不会刷新。

问题是我需要为所有的东西创建函数。例如：

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

这将导致很多功能在最后。我想知道是否有更好的方法去？或者我必须为游戏中发生的每一件小事情编写函数，玩家每一次点击都会发生什么？

Answer 1

确实！你必须这样做。即使你会写你的应用程序在asp php java python等你必须编程这些东西！如果你使用像spring，grails，Yii等框架，那些可以处理crud任务和页面创建......但是处理导航的逻辑和应用程序的工作方式必须由你自己编程！

铜

Answer 2

最终，你最终可能会写一串代码和许多不同的功能来控制你的游戏。但是，您可能可以重用某些功能，具体取决于您要实现的功能，这会更好地进行编码实践并获得更易维护的代码。例如，下面的代码：

<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 3

这就是想法..你可以尝试使你的功能尽可能通用。你可能想从阅读Javascript设计模式开始。here是一个免费的电子书。

此外，你想保持你的JavaScript在一个单独的文件，并不包括它在你的标记。因为你正在使用jQuery，你可以使用jquery事件将事件绑定到dom。检查这里的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 4

我沿着这些线路用过的东西

之前，我在每个网页的底部，它允许我使用的<a>标签的href和目标属性来控制页面：

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

Answer 5

由于您使用的是jQuery，因此您可能需要考虑使用jQuery widgets来封装行为。拥有一堆独立函数可能很难维护，但小部件将允许您更干净地使用继承和清理接口等内容。例如：

(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);