JavaScript设计模式(十一)【桥接模式】

最新推荐文章于 2025-11-23 09:18:32 发布

转载最新推荐文章于 2025-11-23 09:18:32 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

Javascript设计模式专栏收录该内容

37 篇文章

订阅专栏

本文通过JavaScript实例详细介绍了桥接模式的应用，展示了如何通过分离抽象与其实现细节来提高系统的灵活性和扩展性。具体实现了运动、着色、变性和说话等不同功能的组合，形成球、人和精灵等复杂对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>桥接模式</title>
</head>
<body>
<script>
    //多维变量类
    //运动单元
    function Speed(x, y) {
        this.x = x;
        this.y = y;
    }

    Speed.prototype.run = function() {
        console.log('运动起来');
    }

    //着色单元
    function Color(c1) {
        this.color = c1;
    }

    Color.prototype.draw = function() {
        console.log('绘制色彩');
    }

    //变性单元
    function Shape(sp) {
        this.shape = sp;
    }

    Shape.prototype.change = function() {
        console.log('改变形状');
    }

    //说话单元
    function Speek(wd) {
        this.word = wd;
    }

    Speek.prototype.say = function() {
        console.log('书写字体');
    }

    //球
    function Ball(x, y, c) {
        //实现运动单元
        this.speed = new Speed(x, y);
        //实现着色单元
        this.color = new Color(c);
    }

    Ball.prototype.init = function() {
        this.speed.run();
        this.color.draw();
    }

    //人
    function People(x, y, f) {
        this.speed = new Speed(x, y);
        this.font = new Speek(f);
    }

    People.prototype.init = function() {
        this.speed.run();
        this.font.say();
    }

    //精灵
    function Spirite(x, y, c, s) {
        this.speed = new Speed(x, y);
        this.color = new Color(c);
        this.shape = new Shape(s);
    }

    Spirite.prototype.init = function() {
        this.speed.run();
        this.color.draw();
        this.shape.change();
    }


    window.onload = function() {
        var p = new People(10, 12, 16);
        p.init();
    }
</script>
</body>
</html>