【AmazeUI】AmazeUI的肯定框与肯定框的致命缺陷
在AmazeUI这个手机前端框架能够经过如下的脚本：javascript
function calculate(){
$('#confirm1').modal({
});
}
来触发在HTML已经以下布局的肯定框：
<div class="am-modal am-modal-alert" tabindex="-1" id="confirm1">
<div class="am-modal-dialog">
<div class="am-modal-bd">肯定框内容</div>
<div class="am-modal-footer">
<span class="am-modal-btn" data-am-modal-confirm>肯定</span>
<span class="am-modal-btn" data-am-modal-cancel>取消</span>
</div>
</div>
</div>
这种肯定框已经在《【AmazeUI】在模态框中嵌入表单，造成模态输入框》（ 点击打开连接）详细介绍过了。下面以一个例子，重点说说这个肯定框的致命缺陷。
以下的一个HTML布局：css
<!--使用HTML5开发-->
<!doctype html>
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--自动适应移动屏幕-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--优先使用webkit内核渲染-->
<meta name="renderer" content="webkit">
<!--不要被百度转码-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!--如下才是引入amazeui资源-->
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<!--引入js的时候要注意，必须先引入jQuery，再引入amazeui，由于这个框架是基于jQuery开发的-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<title>AmazeUI模态框</title>
</head>
<body>
<input type="text" id="num1" />+<input type="text" id="num2" /><button onClick="calculate()">=</button><span id="result"></span>
<!--警告框-->
<div class="am-modal am-modal-alert" tabindex="-1" id="confirm1">
<div class="am-modal-dialog">
<div class="am-modal-bd">肯定计算吗？</div>
<div class="am-modal-footer">
<span class="am-modal-btn" data-am-modal-confirm>肯定</span>
<span class="am-modal-btn" data-am-modal-cancel>取消</span>
</div>
</div>
</div>
</body>
</html>以下的一个脚本：
<script>
function calculate(){
var num1=$("#num1").val();
var num2=$("#num2").val();
if(isNaN(num1)||isNaN(num2)||!num1||!num2)
alert("任意一个不是数！");
else{
var result=parseFloat(num1)+parseFloat(num2);
}
$('#confirm1').modal({
onConfirm: function(){
alert("num1的值为:"+num1);
alert("num2的值为:"+num2);
$("#result").html(result);
}
});
}
</script>原本是但愿达到以下的效果，作一个加法器，在作加法以后，给出用户的一个提示，询问是否计算？
但实际运行结果你们看到了，第一次运行的时候，脚本获取到值是正确，可是第二次运行的时候仍是第一次运行的值。html
根据AmazeUI官网的资料说明，是由于基于性能的考虑，这样的模态框只保存第一次运行的值。这样是很是致命的！正如上面的一些场合，在用户增删改查以前，但愿经过先肯定的方法，来问用户是否执行操做，可是，因为AmazeUI这样的所谓的性能考虑，致使没法达到屡次更新函数数值的效果。前端
虽然官网中提出了设置经过relatedTarget这个钩子获取数据，该元素为桥梁获取想要的数据等一系列的方式（点击打开连接）java
可是实质操做很不理想，至少设置了relatedTarget以后，还没法与Ajax正确交互。jquery
我也曾想过，写成这样行不行能呢：web
<script>
function calculate(){
$('#confirm1').modal({
onCancel: function() {
return false;
}
});
//写你要执行的东西……
}
</script>然而，这并无什么卵用
……尚未等用户点击肯定，则执行下面的内容了。不会像alert();打断脚本。
这个对话框，还不如JavaScript原生态，兼容任何浏览器的对话框，这个对话框在UC、手机自带的浏览器有效，视觉效果还不错。编程
if(confirm("提示框内容")){
//用户点肯定以后的内容
}
else{
//用户点取消以后的内容
}
都不知道AmazeUI怎么搞的？什么基于性能考虑？明明连功能都没有实现好，就性能考虑，我只能呵呵了害得我还觉得是后台那些神级什么缓存机制与Ajax出了问题。竟然还有剔除做用域的作法，根本就不符合编程思想。浏览器