Javascript原型+ HTML渲染 [英] Javascript Prototype + HTML rendering

问题描述

Noobie在这里：我试图为骰子创建一个原型（6面），每个骰子对象存储它的当前值（当前面值）和HTML对应的表示。我想要的是在滚动骰子时更新表示形式和值。

我有以下三个函数难以执行：

 函数rollD（）{
 this.val = randomInt（1,6）//随机整数函数在1  - 6 
 this.icons =; //骰子图标
 
} 
 
 
 rollD.prototype.render = function（）{
 // HTMY渲染如何工作？ 
 
 
 
 rollD.prototype.roll（）{
  

//包含jQuery的掷骰子
}

我在理解如何更新图像以及渲染如何工作方面遇到了很多麻烦，想要学习Javascript面向对象，所以没有捷径会很好。谢谢

解决方案

您可以通过访问这个关键字在构造函数（函数）。我只会推荐使用原型成员来修改已经创建的（本地）原型，如Array，String或Math（数学用途 __ proto __ 代替原型）



我在这里创建了一个快速骰子示例:(这个例子使用 jQuery ）

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

$ b 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）;'>全部滚动< / button> 
  

CSS

  .dice {
 display：inline-block; 
 border：1px纯黑色; 
背景：透明; 
 width：50px; 
 height：50px; 
 margin：16px; 
 
  

JavaScript Math.randInt = function（min，max）{
return Math.floor（（Math.random（）*（（max 1）-min））+分钟）;
}
函数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）;
新骰子（d4）;
新骰子（d5）;
}）;


---

编辑：使用.prototype

这是相同的例子，但它使用原型成员。

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

JavaScript （使用jQuery）

  Math.randInt = function（min ，（max）{
 return Math.floor（（Math.random（）*（（max + 1）-min））+ min）; 
} 
函数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）; 
新骰子（d4）; 
新骰子（d5）; 
}）; 
  

希望这可以让事情变得更加简单。

Noobie here: I'm trying to create a prototype for a dice (6 sides), with each dice object storing it's current value (the current face value) and a HTML-corresponded representation. What I would like is to have the representation and values both update when rolling the dice.

I have the three following functions that I'm having trouble implementing:

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

//roll dice incorporating jQuery }

I'm having a lot of trouble understanding how to update the image and how the rendering works and would like to learn Javascript OOP, so no short cuts would be great. Thank you

解决方案

You can create methods for a prototype by accessing the this keyword within the constructor (function). I would only recomment using the prototype member for modifying already created (native) prototypes such as Array, String, or Math (math uses __proto__ instead of prototype)

I created a quick dice example here: (this example uses 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 (with 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");
});

---

Edit: Using .prototype

This is the same example but it uses the prototype member.

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

JavaScript (with 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");
});

Hope this clears things up a little.

这篇关于Javascript原型+ HTML渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！