![](/img/trans.png)
[英]Can someone explain how the reduce method is working in this Functional JavaScript challenge?
[英]Can someone explain how this JavaScript is working?
因此,我设法整理了一些JavaScript(在其他人的帮助下),这基本上是一种形式,允许您更改项目的数量并将其值添加到总计(如果选中了复选框)(文本字段中的总计显示)在底部)。
我了解其中的一些,只是其中更复杂的部分使我感到困惑(例如逻辑)。 有人可以说说我的意思,也可以评论我的代码的主要部分,以便它可以帮助我理解代码的工作方式。
<script type="text/javascript">
function bump( which, bywhat ) {
var form = document.items;
var qty = form["qty" + which];
qty.value = Number(qty.value) + bywhat;
TotalCheckedValues( ); // in case user bumped an already checked line
}
function TotalCheckedValues( ) {
var form = document.items;
var total = 0;
for ( var n = 1; n <= 4; ++n )
{
if ( form["cb"+n].checked ) // if the checkbox of the item is ticked
{
total += form["cb"+n].value * form["qty"+n].value; //
}
}
form.Total.value = total.toFixed(2);
}
function validate(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
var regex = /[0-9]|\./;
key = String.fromCharCode( key );
if(!regex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) {
theEvent.preventDefault();
}
}
}
</script>
</head>
<body>
<form name="items">
Item <input type="text" onkeypress='validate(event)'name="qty1" value="0"/>
<input type="button" onclick="bump(1,1)" value="+"/>
<input type="button" onclick="bump(1,-1)" value="-"/>
<input type="checkbox" name="cb1" value="20.00"
onClick="TotalCheckedValues()" />Service 1 (£20.00) <br />
Item <input type="text" onkeypress='validate(event)' name="qty2" value="0"/>
<input type="button" onclick="bump(2,1)" value="+"/>
<input type="button" onclick="bump(2,-1)" value="-"/>
<input type="checkbox" name="cb2" value="20.00"
onClick="TotalCheckedValues()" />Service 2 (£20.00) <br />
Item <input type="text" onkeypress='validate(event)' name="qty3" value="0"/>
<input type="button" onclick="bump(3,1)" value="+"/>
<input type="button" onclick="bump(3,-1)" value="-"/>
<input type="checkbox" name="cb3" value="20.00"
onClick="TotalCheckedValues()" />Service 3 (£20.00) <br />
Item <input type="text" onkeypress='validate(event)' name="qty4" value="0"/>
<input type="button" onclick="bump(4,1)" value="+"/>
<input type="button" onclick="bump(4,-1)" value="-"/>
<input type="checkbox" name="cb4" value="10.00"
onClick="TotalCheckedValues()" />Service 4 (£10.00) <br />
Total: <input type="text" name="Total" readonly size="5" />
<input type="reset" name="reset" value="Clear Selected">
</form>
</body>
</html>
首先,我不确定那是您应该从中学习的javascript。但是,我会尽力给您一些提示
有3个函数: validate
, bump
和TotalCheckedValues
Validate
是最容易理解的。 注意每个onkeypress
属性中对此函数的调用。 调用Validate来验证刚刚按下以键入输入内容的键是0到9(包括)之间的数字还是点。 (正则表达式检查)
bump
以记录每个项目上+和-按钮的点击次数(以跟踪数量)。 它依赖于对document.items
表单的调用,该表单给出其items
,这些items
按升序命名,并由其名称中的数字标识(第一个项目的name="qty1"
)。 该函数将项目的索引以及增加或减少其值的数量作为参数bump(3,1)
第3个项目的+按钮的bump(3,1)
表示:取第3个项目并将其值加1)。 该函数以对第三个函数的调用结束
TotalCheckedValues
可以在其中重新计算总金额(如果选中了此项目的复选框,则为每个项目的sum(quantity*price)
)。 此功能检索项目,对其进行迭代,检查复选框是否被选中,如果是,则取价格和数量,相乘并将其加到总计中
// Also going to be cleaning up the code a little - no offense, I'm just anal
// One more note: I'll be specifying types in my function documentation - but remember
// that JS doesn't really *do* types
/**
* Grab a quantity and increase it by a given value
* @param int which Number of the field to target (comes out as 'qty1/2/3/4/etc')
* @param int bywhat Number to increase the value found with 'which' by
*/
function bump(which, bywhat) {
// Find the form child named 'qtyn', where n is a number
// Notice only one var definition here - no need to define form if
// you can just get to your target element/attribute/etc.
var qty = document.items['qty' + which].value;
qty = Number(qty) + bywhat; // Add bywhat to the form value
TotalCheckedValues(); // in case user bumped an already checked line
}
/**
* Iterate through all check boxes (cb) on the form and multiply quantities (qty)
* against values on checked boxes.
*/
function TotalCheckedValues() {
// Some consider it best practice to put all vars in the top of the method,
// in a comma-separated list using one "var" keyword.
var form = document.items,
total = 0,
checkbox = null,
n = 1;
for(n; n <= 4; ++n)
{
checkbox = "cb"+n; // make your code easier to read
if(form[checkbox].checked) // if the checkbox of the item is ticked
{
// If the checkbox is checked, multiply it's value to that of each qty field
total += form[checkbox].value * form["qty"+n].value;
}
}
form.Total.value = total.toFixed(2); // Shorten 'total' to 2 decimal places
}
/**
* Test for a valid key
* @param event evt The key-related event
*/
function validate(evt) {
/*
* In javascript, the OR operator || is used as a way of setting defaults. So,
* keep trying values until one that's considered "true" is found:
* var something = false;
* var foo = null;
* var bar = 'abc';
* var which = something || foo || bar; // value of 'which' is 'abc'
*/
var theEvent = evt || window.event,
key = theEvent.keyCode || theEvent.which,
regex = /[0-9]|\./; // Regex that matches 0-9 and '.'
key = String.fromCharCode( key ); // Convert from key code to something usable
// I almost think you could do...
// var ... key = String.fromCharCode(theEvent.keyCode || theEvent.which)
// but I'm not sure.
// If our key event's code doesn't pass our regex test
if(!regex.test(key)) {
theEvent.returnValue = false;
if(theEvent.preventDefault)
theEvent.preventDefault();
}
}
其他建议
我想分享其他一些建议,也许只是一些建议可以考虑:
依靠硬编码的限制(TotalCheckedValues()中for循环中的“ 4”)使代码的可重用性降低。 相反,您应该将所有匹配的子代迭代到父节点。 使用jQuery,它就像$('#MyFormId input[type="checkbox"]).each(...)
这样的代码,它使代码变得灵活并且不需要更新,因为您添加了另一个复选框。
在表单元素上使用ID可以使选择更加明显-依靠document [name]是可以的,但可能并非在所有地方都能很好地发挥作用。
其中 ,bywhat,EVT -变量名是伟大的,因为他们可以是任何东西,所以决定要打电话给你的变量时,记住这一点。 描述性名称1)帮助您记住两个月后返回代码时发生的事情,以及2)帮助出于任何原因必须仔细阅读代码的其他人以了解发生了什么。
一致性是关键:函数名混合使用: bumb vs TotalCheckedValues vs validate-您应该为代码选择一种方式并坚持下去。
如果您确实想要一些东西可以窃取您的代码,并且让您哭泣,请随时访问JSLint。 但是只要阅读“ JSLint如何工作?”即可。 关于如何以及为什么它们将代码的某些部分分开的页面,对于学习Javascript和JS的一些最佳实践©而言非常有价值。
注意:撰写本文的过程已经差不多完成了一半,发现人们已经回答了。对于任何重复,我都表示歉意,但是我想完成我开始的工作!
1.“凹凸”功能
此函数接受两个参数:
var form = document.items;
该函数首先获取全局文档对象中所有项目的数组,您可以从任何位置访问该数组。
var qty = form ['qty'+ which];
此代码然后尝试该阵列,其具有“数量”加上其参数的名称在访问特定项。 在这种情况下,当您使用'+'运算符时,您要在数字( which )上添加一个字符串('qty'),最后会得到一个字符串。 例如“ qty3”。
qty.value =数字(qty.value)+多少;
然后通过获取当前值,将其转换为数字,然后在其上添加bywhat参数,来设置输入元素“ qty + where ”的值。 在这种情况下,当您使用'+'运算符时,您要将数字加到数字上,就需要进行数学计算; 例如1 + 2 = 3。
TotalCheckedValues();
然后,代码调用TotalCheckedValues函数,该函数似乎用于计算总数(我们将在下一部分介绍)。
2.'TotalCheckedValues'函数
每次“凹凸”函数调用之后都会调用此函数,并且每次选中/取消选中复选框时也会调用此函数。
var form = document.items;
该函数再次从获取全局文档对象中所有项目的数组开始,您可以从任何位置访问该数组。
var total = 0;
然后,该函数定义一个“总计”变量,该变量设置为零。
“ for”循环
然后,该代码循环四次,对于HTML中的每个输入/按钮/复选框组,循环一次。 它尝试获取每个组的复选框元素,然后检查是否已选中该复选框。 如果是,则复选框值(即价格)乘以文本字段的数量值,然后添加到“总计”变量中。 这里的“ + =”运算符将其右侧的值添加到现有值,而不是覆盖现有值。
form.Total.value = total.toFixed(2);
然后,该函数尝试使用点符号而不是您之前看到的方括号符号(例如,form ['qty'])在document.items数组中查找名称为'Total'的元素。 使用上面的for循环生成的总数来设置该元素的值。 toFixed(2)函数可用于数字以返回具有给定小数位数的数字的字符串表示形式-在这种情况下为2。
3.“验证”功能
var theEvent = evt || window.event;
创建一个包含已引发的事件对象的变量。 它检查传递的evt参数中是否有事件对象-如果它为null或未定义,则使用window.event事件对象。
var key = theEvent.keyCode || theEvent。哪个;
尝试确定按下了哪个键来触发事件并将其存储在变量中。
var regex = /[0-9]|./;
定义一个正则表达式模式,它将匹配值零到九以及点字符。
键= String.fromCharCode(键);
尝试从密钥中检索字符串,这会...
if(!regex.test(key))
...然后针对正则表达式进行测试。 如果test()函数与模式匹配,则返回true;否则,返回false。 如果正则表达式匹配失败,则运行“ if”语句中的其余代码; 它设置事件的返回值,并取消事件(preventDefault),而不停止将事件传播到其他侦听器。
希望JavaScript函数演练对您有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.