js 模板方法模式

最新推荐文章于 2025-06-19 21:44:17 发布

午夜司令

最新推荐文章于 2025-06-19 21:44:17 发布

阅读量486

点赞数

CC 4.0 BY-SA版权

分类专栏： js设计模式文章标签： javascript 设计模式

本文链接：https://blog.youkuaiyun.com/u010271602/article/details/52563687

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

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的模板方法模式案例。该模式通过定义一个骨架算法，并将某些步骤留给子类实现，展示了如何创建可复用的导航条HTML代码。文章包括了基本的Nav构造函数以及两个扩展类NumNav和LinkNav的具体实现。

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

模板方法模式：父类中定义一组操作算法骨架，而将一些实现步骤延迟到子类中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="content"></div>
<script>
    function formateString(str, data) {
        return str.replace(/\{#(\w+)#\}/g, function (match, key) {
            return typeof data[key] === undefined ? '' : data[key]
        });
    }
    var Nav = function (data) {
        this.item = '<a href="{#href#}" title="{#title#}">{#name#}</a>';
        this.html = '';
        for (var i = 0, len = data.length; i < len; i++) {
            this.html +=formateString(this.item, data[i]);
        }
        return this.html;
    }
    var NumNav = function (data) {
        var tpl = '<b>{#num#}</b>';
        for (var i = data.length - 1; i >= 0; i--) {
            data[i].name = data[i].name + formateString(tpl, data[i]);
        }
        return Nav.call(this, data);
    }
    var LinkNav = function (data) {
        var tpl = '<span>{#link#}</span>';
        for (var i = data.length - 1; i >= 0; i--) {
            data[i].name = data[i].name + formateString(tpl, data[i]);
        }
        return Nav.call(this, data);
    }
    var nav = document.getElementById('content');
    nav.innerHTML = NumNav([{
        href: 'https://www.baidu.com/',
        title: '百度一下，你就知道',
        name: '百度',
        num: '10'
    }, {
        href:'http://www.qq.com/',
        title:'腾讯首页',
        name:'腾讯',
        num:'2'
    }, {
        href : 'http://www.taobao.com/',
        title:'淘宝商城',
        name:'淘宝',
        num:'3'
    }]);
</script>
</body>
</html>