找回密码
当前位置：前端开发者 > 更多 > 正文

前端开发策略模式实现之一

2018-12-26 分类：更多 阅读(794) 评论(0)
杭州前端开发公司招聘
手游前端开发招聘
web前端开发招聘运城

先弄个简单的点的。
策略模式。封装算法，并允许人家相互替换。具体百度定义
也是少写if else语句的好办法！！
在js中，可以用函数封装算法，这个一等公民真是牛啊。
用对象把所有算法写在一块，这样便于允许相互替换。
html 代码

<!DOCTYPE html>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
<style>
    .radio {
        width: 100px;
        height: 100px;
        display: table;
        float: left;
        margin: 20px;
    }
    .radio input[type=’radio’] {
        display: none;
    }
    .radio input[type=’radio’]:checked ~ span {
        background: green;
    }
    .radio span {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        height: inherit;
        width: inherit;
        border-radius: 50px;
        color: white;
        cursor: pointer;
        background: #ff6100;
    }
    .role {
        position: absolute;
        width: 130px;
        height: 130px;
        background: blue;
        top: 200px;
        left: 220px;
    }
    .info {
        font-family: 微软雅黑;
        font-size: 22px;
        color: #555555;
    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    @keyframes scale {
        0% {
            transform: scale(1, 1);
        }
        50% {
            transform: scale(1.3, 1.3);
        }
        100% {
            transform: scale(1, 1);
        }
    }
    @keyframes move {
        0% {
            transform: translate(0, 0);
        }
        20% {
            transform: translate(100px, 0);
        }
        40% {
            transform: translate(0px, 0);
        }
        80% {
            transform: translate(-100px, 0);
        }
        100% {
            transform: translate(0, 0);
        }
    }
    @keyframes compose {
        0% {
            transform: translate(0, 0);
        }
        20% {
            transform: translate(100px, 0) rotate(180deg);
        }
        40% {
            transform: translate(0px, 0) scale(1.5, 1.5);
        }
        80% {
            transform: translate(-100px, 0) rotate(-180deg);
        }
        100% {
            transform: translate(0, 0);
        }
    }
    .role.rotate {
        animation: rotate 1s linear infinite;
    }
    .role.scale {
        animation: scale 1s ease-in-out infinite;
    }
    .role.move {
        animation: move 1s linear infinite;
    }
    .role.compose {
        animation: compose 1s linear infinite;
    }
</style>
<section>
    <label class=”radio”>
        <input name=”order” data-action=”rotate” type=”radio” />
        <span>旋转</span>
    </label>
    <label class=”radio”>
        <input name=”order” data-action=”scale” type=”radio” />
        <span>缩放</span>
    </label>
    <label class=”radio”>
        <input name=”order” data-action=”move” type=”radio” /> <span>移动</span>
    </label>
    <label class=”radio”>
        <input name=”order” data-action=”compose” type=”radio” />
        <span>组合</span>
    </label>
    <div class=”role”></div>
    <p class=”info”></p>
</section>
<script>
    // 所有的动作策略
    var target = document.querySelector(‘.role’)
    var strategy = {
        rotate: function() {
            target.className = ‘role rotate’
            showMsg(‘转啊转’)
        },
        scale: function() {
            target.className = ‘role scale’
            showMsg(‘胖瘦自由我控制’)
        },
        move: function() {
            target.className = ‘role move’
            showMsg(‘在你的世界里，跑来跑去’)
        },
        compose: function() {
            target.className = ‘role compose’
            showMsg(‘折腾’)
        },
    }
    var radios = document.querySelectorAll(‘[type=radio]’)
    for (var i = 0; i < radios.length; i++) {
        radios[i].onclick = function() {
            this.checked && strategy[this.getAttribute(‘data-action’)]()
        }
    }
    var showMsg = function(text) {
        var p = document.querySelector(‘.info’)
        p.innerHTML = text
    }
</script>
招聘前端开发人员信息编写
昆明web前端开发招聘
宜昌招聘前端开发
赞(0)
前端开发者 » 前端开发策略模式实现之一
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论