promise实现公共弹框组件（异步回调）

最新推荐文章于 2022-11-05 17:06:37 发布
最新推荐文章于 2022-11-05 17:06:37 发布
阅读量2.6k 收藏 1
点赞数 1
分类专栏： ES6

情景再现：

        1、用户点击按钮，弹出确认窗体

        2、用户确认和取消有不同的处理

解决方案： 

        1、采用ES6的promise语法，实现异步回调（jquery3.0以后支持）

        2、案例样式采用bootstrap

上代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>confirm重写</title>
        <link rel="stylesheet" href="bootstrap3.3.5.min.css" />
        <style type="text/css">
            .console-show {
                margin-top: 200px;
                background-color: red;
                color: white;
            }
        </style>
    </head>

    <body>
        <div class="text-center">
            <h1>confirm重写</h1>
            <button type="button" class="btn btn-info" id="confirmBtn">Confirm</button>
            <button type="button" class="btn btn-danger" id="alertBtn">Alert</button>
            <div class="console-show"></div>
        </div>
        <!--下面是模态框-->
        <div class="modal fade" id="alertModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        <p></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger sureBtn" data-dismiss="modal">确定</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

        <!--下面是模态框-->
        <div class="modal fade" id="confirmModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        <p></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default cancelBtn" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger sureBtn" data-dismiss="modal">确定</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </body>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="bootstrap-3.3.5.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        function ReAlert(title, content) {
            var alertPromise = new Promise(function(resolve, reject){
                $('#alertModal .modal-title').text(title);
                $('#alertModal .modal-body p').text(content);
                $('#alertModal').modal('show');
                $('#alertModal .sureBtn').off('click').click(function() {
                    resolve(content);
                })
            })
            return alertPromise;
        };


        function ReConfirm(title, content) {
            var confirmPromise = new Promise(function(resolve, reject){
                $('#confirmModal .modal-title').text(title);
                $('#confirmModal .modal-body p').text(content);
                $('#confirmModal').modal('show');
                $('#confirmModal .sureBtn').off('click').click(resolve);
                $('#confirmModal .cancelBtn').off('click').click(reject);
            })
            return confirmPromise;
        };

        $('#alertBtn').click(function() {
            ReAlert('提示', '确定加入索尼大法？').then(function(str){
                console.log(str);
                $('.console-show').text('Prmoise_alert页面点击"确定"');
            })
        });

        $('#confirmBtn').click(function() {
            ReConfirm("警告", '确认退出索尼教？').then(function(){
                console.log('确定被点击，执行后续操作');
                $('.console-show').text('Promise_resolve_confirm页面点击"确定"');
            },function(){
                console.log("取消被点击，返回之前的操作");
                $('.console-show').text('Promise_reject_confirm页面点击"取消"');
            })
        })
    </script>

</html>

愤怒的小青春
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
使用Promise链式调用解决多个异步回调的问题
11-27
介绍 所谓Promise，简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 缺少场景支撑，对于新手而言，很难理解Promise的意义。 在《你不知道的JavaScript中》有个场景介绍得很形象： 我走到快餐店的柜台，点了一个芝士汉堡。我交给收银员1.47美元。通过下订单并付款，我已经发出了一个对某个值（就是那个汉堡）的请求。我已经启 动了一次交易。 但是，通常我不能马上就得到这个汉堡。收银员会交给我某个东西来代替汉堡：一张带有 订单号的收据。订单号就是一个 IOU（I owe you， 我欠你的）承诺（promise），保证了最 终我会得到我的汉堡。
ES6 关于Promise不得不说的事
热门推荐
眉目成书
10-19 1万+
ES6 Promise
2021-9-14 子组件消失+watch异步侦听问题
m0_52458664的博客
10-08 119
最近遇到一个问题，效果是想做成watch是异步侦听的，导致我赋值的数据在刷新之后才可能赋值成功（4），但刷新的过程导致了子组件的消失，（除了第一个，id相同子组件没消失），状态转成了另一个值（2），就造成了这个值（4）不存在过。 如果我把这条指令异步处理，5秒后，刷新成功了，再emit就没有问题。 然后呢，我的mentor觉得这个事情还是看刷新返回的是不是最新的已删除后的列表。所以他觉得后端删完后emit给我一个消息我再刷新比较好 ，所以呢，目前的做法是后端删完后通过websocket，emit一...
Vue.js基础总结
m0_37643322的博客
10-09 1036
1.认识Vuejs Vue是一个渐进式框架, 什么是渐进式的呢? 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 Vue有很多特点和Web开发中常见的高级功能 解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM 2.Vue初体验 3.Vue中的MVVM View层 视图层前端开发中, 通常就是DOM层主要的作用是给用户展示各种信息 Model层 数据层数据可能是我们固定的死数据, 更多的是来自我们的服务器, 从
vue封装带确定、取消按钮的弹窗和提示组件，可用promise回调
YX0711的博客
11-05 3107
vue封装带确定和取消的全局弹窗组件，支持promise回调，任意组件之间调用方法
【js】iframe页面实现异步通信
Handsome_gir的博客
04-11 786
异步方式就是在点击发送数据的时候并没有刷新整个页面，而是借助于iframe标签实现了页面的异步刷新。当然，我们也可以点击发送的时候向服务器发送数据，并借助iframe实现异步刷新。 【js页面】将输入框里的值赋给iframe的src属性，实现异步。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"...
【js模块化+promise】让弹窗们弹起来
baidu_zhongce的博客
06-30 2506
弹窗或者浮层是页面上看起来微不足道，却又常常起到重要作用的“零件”。比如最近做的项目中，一个页面上涉及了6个以上的弹窗及其对应的逻辑处理，可以说页面几乎是由弹窗逻辑构成的。因此，如何让这些弹窗优雅地弹起来（别人能够很快地对这些代码进行维护），是一个很重要的问题。 对于弹窗的实现，比较旧的做法是直接在html上加上弹窗的元素，在不需要的时候先将其隐藏，通过js逐个实现弹窗的展示和逻辑。但是这种做法
记录：vue中使用axios添加了babel-polyfill和es6-promise在ie下依然app.js报错页面一片空白的解决办法
qq_30068989的博客
11-20 4649
最近一个vue开发的项目，事先已经兼容ie9+，但是最后写完整个项目后chrome，firefox下完美运行，可是用ie的时候却一片空白？？？？？网上找了很多方法都是已经做好的ie兼容babel-polyfill、es6-promise。但是为什么还是不行？？ 好吧点进去看看 =&gt; 最后一行看到了是在自己写的请求文件mainPublic.js里出问题了，去看了一下代码 发现原来是axio...
Promise
qq_54250695的博客
02-17 621
Promise是异步编程的一种解决方案,其实是一个构造函数，自身身上有all,reject,resolve，这几个方法，原型上有then、catch,等方法。 ps：什么是异步编程: fs读取文件、发送ajax、定时器运用等等。 我们可以通俗理解为异步就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。排在异步任务后面的代码，不用等待异步任务结束会马上运行，也就是说，异步任务不具有”堵塞“效应。比如，有一个任务是读取文件进行处理。
JS 弹窗与ajax执行顺序问题
FightingITPanda的博客
11-04 582
情况： 有个页面a,填写表单，保存按钮 页面a引a.js，生命要触发的保存事件 前端框架：与后台交互方式：ajax,统一放在common.js中，common页面引common.js a页面引common页面 如下图： 问题： 页面表单填写完，点解保存触发save（），想做两件事 1、给个提示框 2、调ajax调后台 3、给另一个提示框 a.js var result = HAMain.fileAndFormSubmit(JSON.stringify(data),HAMain.getSaveLetterM
jQuery的promise与deferred对象在异步回调中的作用
10-22
主要介绍了jQuery的promise与deferred对象在异步回调中的作用,需要的朋友可以参考下
JavaScript异步回调的Promise模式封装实例
01-19
异步请求完成的操作必须预先定义在回调函数中，等到请求完成就必须调用这个函数。这种非线性的异步编程方式会让开发者很不适应，同时也带来了诸多的不便，增加了代码的耦合度和复杂性，代码的组织上也会很不优雅，...
jquery Deferred 快速解决异步回调的问题
11-27
jquery Deferred 快速解决异步回调的问题 function ok(name){ var dfd = new $.Deferred(); callback:func(){ return dfd.resolve( response ); } return dfd.promise(); } $.when(ok(1),ok(2)).then(function...
神经网络与量子计算的交叉研究.pptx
04-19
神经网络与量子计算的交叉研究.pptx
非线性端口 MEMS 麦克风的 Simscape 模型.zip
04-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
用于超声成像和仿真的 MATLAB 工具箱.zip
最新发布
04-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
HFI高频注入仿真—matlab.zip
04-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
北京工商大学上网登陆版源码.zip
04-19
android 源码学习. 资料部分来源于合法的互联网渠道收集和整理，供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权，请通知本人删除。感谢CSDN官方提供大家交流的平台
攻击离开优化器 (ALO)matlab代码.zip
04-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
vue如何实现动态组件和异步组件
05-13
Vue中可以使用动态组件和异步组件来实现按需加载和优化性能。下面是两种方式的实现方法。 1. 动态组件 动态组件是通过使用`<component>`标签，并在`is`属性中指定组件名来实现的。动态组件可以在运行时动态绑定组件，实现按需加载。 示例代码： ```html <template> <div> <button @click="toggleComponent">Toggle Component</button> <component :is="currentComponent"></component> </div> </template> <script> import ComponentA from './ComponentA.vue'; import ComponentB from './ComponentB.vue'; export default { components: { ComponentA, ComponentB, }, data() { return { currentComponent: 'ComponentA', }; }, methods: { toggleComponent() { this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'; }, }, }; </script> ``` 2. 异步组件 异步组件是通过使用`Vue.component()`方法来实现的。该方法接收一个函数作为参数，函数返回一个`Promise`对象，在`Promise`对象被解决时，将组件作为参数传递给`Vue.component()`方法。 示例代码： ```html <template> <div> <button @click="loadComponent">Load Component</button> <component v-if="currentComponent" :is="currentComponent"></component> </div> </template> <script> export default { data() { return { currentComponent: null, }; }, methods: { async loadComponent() { const { default: ComponentC } = await import('./ComponentC.vue'); this.currentComponent = ComponentC; }, }, }; </script> ``` 在上面的代码中，我们使用了ES6的动态导入语法来异步加载组件。这将返回一个`Promise`对象，我们可以使用`await`关键字来等待`Promise`对象被解决。在`Promise`对象被解决时，我们将组件作为参数传递给`currentComponent`，并将其渲染到页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值