javascript桥接设计模式

最新推荐文章于 2023-12-13 10:13:53 发布

caiwanxia

最新推荐文章于 2023-12-13 10:13:53 发布

阅读量398

点赞数

分类专栏： javascript 设计模式

本文链接：https://blog.csdn.net/caiwanxia1/article/details/52813004

版权

javascript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

设计模式

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" charset="utf-8" src="common.js"></script>
    <script type="text/javascript" charset="utf-8" src="../jquery.js"></script>
    <script>
        //桥接模式：主要作用就是把抽象和现实分离开来，是他们可以完全独立变化
        //应用场景，事件监听回调机制
        //用户点击一个按钮，向服务器端发送消息
        //当页面加载完毕之后执行函数体window.onload
        $(function(){
            //1.前台业务逻辑
            var inp = document.getElementById('inp');
            //用事件注册的方式使元素上添加事件
            BH.EventUtil.addHandler(inp,'click',bridgeHandler);
            //利用桥模式分开
            function bridgeHandler(){
                sendReq(this.value);
            }

            //2.后台业务逻辑
            function sendReq(msg){
                //ajax
//                $.post('url',{msg:this.value},function (result) {
//
//                });
                alert('发送数据到后台'+msg);
            }
        });
        $.onReady(function () {
            
        });
    </script>
</head>
<body>
    <input id="inp" type="button" value="我是数据。。。。"/>
</body>
</html>