【AmazeUI】AmazeUI的确定框与确定框的致命缺陷

最新推荐文章于 2025-06-16 14:08:19 发布

原创最新推荐文章于 2025-06-16 14:08:19 发布 · 8.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AmazeUI #Confirm #确定框 #作用域 #缺陷

AmazeUI 专栏收录该内容

12 篇文章

订阅专栏

本文通过实例展示了AmazeUI模态框存在的问题，特别是其无法在多次调用时更新参数值的情况，这对于涉及用户确认的操作造成了限制。文章探讨了官方提出的解决方案及其局限性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在AmazeUI这个手机前端框架可以通过以下的脚本：

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布局：

<!--使用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>

本来是希望达到如下的效果，做一个加法器，在做加法之后，给出用户的一个提示，询问是否计算？

但实际运行结果大家看到了，第一次运行的时候，脚本获取到值是正确，但是第二次运行的时候还是第一次运行的值。

根据AmazeUI官网的资料说明，是因为基于性能的考虑，这样的模态框只保存第一次运行的值。这样是非常致命的！正如上面的一些场合，在用户增删改查之前，希望通过先确定的方法，来问用户是否执行操作，但是，由于AmazeUI这样的所谓的性能考虑，导致无法达到多次更新函数数值的效果。

虽然官网中提出了设置通过relatedTarget这个钩子获取数据，该元素为桥梁获取想要的数据等一系列的方式（点击打开链接）

但是实质操作很不理想，至少设置了relatedTarget之后，还无法与Ajax正确交互。

我也曾想过，写成这样行不行能呢：

<script>
	function calculate(){	
		$('#confirm1').modal({			
			onCancel: function() {
				return false;
			}
		});
		//写你要执行的东西……
	}
</script>

然而，这并没有什么卵用

……还没有等用户点击确定，则执行下面的内容了。不会像alert();打断脚本。

这个对话框，还不如JavaScript原生态，兼容任何浏览器的对话框，这个对话框在UC、手机自带的浏览器有效，视觉效果还不错。

if(confirm("提示框内容")){
	//用户点确定之后的内容
}
else{
	//用户点取消之后的内容
}

都不知道AmazeUI怎么搞的？什么基于性能考虑？明明连功能都没有实现好，就性能考虑，我只能呵呵了害得我还以为是后台那些神级什么缓存机制与Ajax出了问题。居然还有剔除作用域的做法，根本就不符合编程思想。