Javascript原型+ HTML呈现

Question

Noobie这里:我正在尝试为一个骰子(6个面)创建一个原型，每个骰子对象存储它的当前值(当前面值)和一个HTML对应的表示。我想要的是在掷骰子时更新表示和值。

我在实现以下三个函数时遇到了麻烦：

function rollD(){
  this.val = randomInt(1,6) //random integer function to choose between 1 - 6
  this.icons = ; //dice icons

}


rollD.prototype.render = function(){
     //how does HTMY rendering work?
   }


rollD.prototype.roll(){

//包含jQuery的掷骰子}

我很难理解如何更新图像和渲染是如何工作的，我想学习Javascript OOP，所以没有捷径是很好的。谢谢

Answer 1

试一试

(function ($) {
    $.fn.rollDice = function () {
        // `dice` array
        var dice = ["\u2680"
                    , "\u2681"
                    , "\u2682"
                    , "\u2683"
                    , "\u2684"
                    , "\u2685"];
        // return _two_ `dice` items,
        // remove `+ dice[
        // 1 + Math.floor(Math.random() * dice.length - 1)
        // ]` , to return _one_ die
        // `1 + Math.floor(Math.random() * dice.length - 1)
        // ]` returns "pseudo" random number,
        // utilized to reference an `index` within `dice` array
        return $(this).text(dice[
            1 + Math.floor(Math.random() * dice.length - 1)
        ] + dice[
            1 + Math.floor(Math.random() * dice.length - 1)
        ])
    }
}(jQuery));

// call `$.fn.rollDice` on `.dice` selector 
$(".dice").rollDice();

​

(function ($) {
    $.fn.rollDice = function () {
        var dice = ["\u2680"
                    , "\u2681"
                    , "\u2682"
                    , "\u2683"
                    , "\u2684"
                    , "\u2685"];
        return $(this).text(dice[
            1 + Math.floor(Math.random() * dice.length - 1)
        ] + dice[
            1 + Math.floor(Math.random() * dice.length - 1)
        ])
    }
}(jQuery));
    
    

$(".dice").rollDice()

.dice {
    font-size:72px;
    margin:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dice"></div>

​

Answer 2

您可以通过访问构造函数(函数)中的this关键字来为原型创建方法。我只会使用prototype成员来修改已经创建的(本机)原型，如数组、字符串或数学(数学使用__proto__而不是prototype)。

我在这里创建了一个快速骰子示例：(此示例使用jQuery)

http://codepen.io/anon/pen/emyjpz

HTML

<button id='d1' class='dice'>ROLE ME</button>
<button id='d2' class='dice'>ROLE ME</button>
<button id='d3' class='dice'>ROLE ME</button>
<button id='d4' class='dice'>ROLE ME</button>
<button id='d5' class='dice'>ROLE ME</button>
<br>
<button onclick='$(".dice").trigger("click");'>Roll All</button>

CSS

.dice {
  display: inline-block;
  border: 1px solid black;
  background: transparent;
  width: 50px;
  height: 50px;
  margin: 16px;
}

JavaScript (带jQuery)

Math.randInt = function(min, max){
  return Math.floor((Math.random()*((max+1)-min))+min);
}
function Dice(htmlID){
  this.id = htmlID;
  this.value = false;
  this.roll = function(){
    this.value = Math.randInt(1,6);
    $("#"+this.id).html(this.value);
  }
  $("#"+this.id).on("click",this.roll);
}
$(document).ready(function(){
  new Dice("d1");
  new Dice("d2");
  new Dice("d3");
  new Dice("d4");
  new Dice("d5");
});

编辑:使用.prototype

这是相同的示例，但它使用了prototype成员。

http://codepen.io/dustinpoissant/pen/KwZBGN

JavaScript (带jQuery)

Math.randInt = function(min, max){
  return Math.floor((Math.random()*((max+1)-min))+min);
}
function Dice(htmlID){
  this.id = htmlID;
  this.value = false;
  $("#"+this.id).on("click",this.roll);
}
Dice.prototype.roll = function(){
    this.value = Math.randInt(1,6);
    $("#"+this.id).html(this.value);
  }
$(document).ready(function(){
  new Dice("d1");
  new Dice("d2");
  new Dice("d3");
  new Dice("d4");
  new Dice("d5");
});

希望这能把事情说清楚一点。