JavaScript设计模式(三十):卡片拼图-简单模板模式

简介: 卡片拼图-简单模板模式

简单模板模式(Simple template)

通过格式化字符串拼凑出视图避免创建视图时大量节点操作。优化内存开销。

image.png

<div id="container"></div>
AI 代码解读

创建文字列表视图

// 命名空间
const A = {
   
   
    // 主体展示区容器
    root: document.getElementById('container'),
    // 创建视图方法集合
    strategy: {
   
   
        // 文字列表展示
        listPart({
   
   data: d}) {
   
   
            let part = document.createElement("div");       // 模块容器
            let titleBox = document.createElement("h2");    // 标题容器
            let title = document.createTextNode(d.title);    // 标题内容
            let descBox = document.createElement("p");      // 描述容器
            let desc = document.createTextNode(d.desc);      // 描述内容
            let listBox = document.createElement("ul");     // 列表容器

            titleBox.appendChild(title);    // 将标题内容放入标题容器中
            descBox.appendChild(desc);      // 将描述内容放入描述容器中

            part.className = "part";        // 设置模块类名
            part.appendChild(titleBox);     // 将标题容器插入模块容器中
            part.appendChild(descBox);      // 将描述容器插入模板容器中

            let list = d.list;      // 列表数据
            let rowBox, labelBox, label, valueBox, value;
            // 遍历列表数据
            list.forEach(item => {
   
   
                rowBox = document.createElement("li");         // 创建列表项容器
                labelBox = document.createElement("strong");   // 创建列表项标题容器
                label = document.createTextNode(item.label);            // 创建列表项标题内容
                valueBox = document.createElement("span");     // 创建列表项解释容器
                value = document.createTextNode(item.value);            // 创建列表项解释内容

                labelBox.appendChild(label);
                valueBox.appendChild(value);

                rowBox.appendChild(labelBox);
                rowBox.appendChild(valueBox);

                listBox.appendChild(rowBox);
            });

            part.appendChild(listBox);  // 向模块中插入列表
            A.root.appendChild(part);   // 展现模块
        },
        codePart(data) {
   
   
            /* ···CODE··· */
        },
        onlyTitle(data) {
   
   
            /* ···CODE··· */
        },
        guide(data) {
   
   
            /* ···CODE··· */
        },
        /* ···CODE··· */
    },
    // 创建视图入口
    init: function (data) {
   
   
        // 根据传输的视图类型创建视图
        this.strategy[data.type](data);
    }
}

A.init({
   
   
    type: 'listPart',
    data: {
   
   
        title: 'You瞧谁不起 - 道不尽世间的沧桑,诉不完人生的悲凉',
        desc: '人海茫茫,你我依旧孤独~~~',
        list: [
            {
   
   label: '姓名:', value: 'Lee'},
            {
   
   label: '年龄:', value: 18},
            {
   
   label: '性别:', value: '男'}
        ]
    }
});
AI 代码解读

缺点

创建一个简单的视图就要操作这么多大节点,如果需求创建一个比较复杂的页面,那么很难想象会操作每个节点多少次。当然这过程中还可能会遇到像添加类、绑定事件什么的,这样你的开销就大了。

新方案(简单模板模式

// 命名空间
const A = {
   
   
    // 模板渲染方法
    formatString(str, data) {
   
   
        return str.replace(/\{#(\w+)#\}/g, function (match, key) {
   
   
            return typeof data[key] === undefined ? '' : data[key]
        });
    },
    // 视图模板
    view(data) {
   
   
        const tpl = {
   
   
            listPart: {
   
   
                row: `<li><strong>{#label#}</strong><span>{#value#}</span></li>`,
                theme: `
                    <div class="{#class#}">
                        <h2>{#title#}</h2>
                        <p>{#desc#}</p>
                        <ul>{#content#}</ul>
                    </div>
                `
            },
            codePart: {
   
   },
            onlyTitle: {
   
   },
            guide: {
   
   },
            /* ···CODE··· */
        };
        let rowStr = data.list.map(d => this.formatString(tpl.listPart.row, d)).join('');
        return this.formatString(tpl.listPart.theme, {
   
   ...data, content: rowStr});
    },
    // 主体展示区容器
    root: document.getElementById('container'),
    // 创建视图方法集合
    strategy: {
   
   
        // 文字列表展示
        listPart({
   
   data: d}) {
   
   
            A.root.innerHTML = A.view({
   
   ...d, class: 'part'});
        },
        codePart(data) {
   
   
            /* ···CODE··· */
        },
        onlyTitle(data) {
   
   
            /* ···CODE··· */
        },
        guide(data) {
   
   
            /* ···CODE··· */
        },
        /* ···CODE··· */
    },
    // 创建视图入口
    init: function (data) {
   
   
        // 根据传输的视图类型创建视图
        this.strategy[data.type](data);
    }
}

A.init({
   
   
    type: 'listPart',
    data: {
   
   
        title: 'You瞧谁不起 - 道不尽世间的沧桑,诉不完人生的悲凉',
        desc: '人海茫茫,你我依旧孤独~~~',
        list: [
            {
   
   label: '姓名:', value: 'Lee'},
            {
   
   label: '年龄:', value: 18},
            {
   
   label: '性别:', value: '男'}
        ]
    }
});
AI 代码解读

特点

简单模板模式主要包含三部分,字符串模板库,格式化方法,字符串拼接操作。

简单模板模式意在解决运用DOM操作创建视图时造成资源消耗大、性能低下、操作复杂等问题。

用正则匹配方式去格式化字符串的执行的性能要远高于DOM操作拼接视图的执行性能,因此这种方式常备用于大型框架(如MVC等)创建视图操作中。

目录
打赏
0
0
0
0
25
分享
相关文章
【设计模式】【创建型模式】工厂方法模式(Factory Methods)
一、入门 什么是工厂方法模式? 工厂方法模式(Factory Method Pattern)是一种创建型设计模式,它定义了一个用于创建对象的接口,但由子类决定实例化哪个类。工厂方法模式使类的实例化延迟
86 16
并发设计模式实战系列(2):领导者/追随者模式
🌟 ​大家好,我是摘星!​ 🌟今天为大家带来的是并发设计模式实战系列,第二章领导者/追随者(Leader/Followers)模式,废话不多说直接开始~
62 0
并发设计模式实战系列(1):半同步/半异步模式
🌟 ​大家好,我是摘星!​ 🌟今天为大家带来的是并发设计模式实战系列,第一章半同步/半异步(Half-Sync/Half-Async)模式,废话不多说直接开始~
50 0
并发设计模式实战系列(12):不变模式(Immutable Object)
🌟 大家好,我是摘星!🌟今天为大家带来的是并发设计模式实战系列,第十二章,废话不多说直接开始~
47 0
设计模式觉醒系列(04)策略模式|简单工厂模式的升级版
本文介绍了简单工厂模式与策略模式的概念及其融合实践。简单工厂模式用于对象创建,通过隐藏实现细节简化代码;策略模式关注行为封装与切换,支持动态替换算法,增强灵活性。两者结合形成“策略工厂”,既简化对象创建又保持低耦合。文章通过支付案例演示了模式的应用,并强调实际开发中应根据需求选择合适的设计模式,避免生搬硬套。最后推荐了JVM调优、并发编程等技术专题,助力开发者提升技能。
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
335 11
并发设计模式实战系列(20):扇出/扇入模式(Fan-Out/Fan-In)(完结篇)
🌟 大家好,我是摘星!🌟今天为大家带来的是并发设计模式实战系列,第二十章,废话不多说直接开始~
66 0
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
525 44
设计模式:工厂方法模式(Factory Method)
工厂方法模式是一种创建型设计模式,通过将对象的创建延迟到子类实现解耦。其核心是抽象工厂声明工厂方法返回抽象产品,具体工厂重写该方法返回具体产品实例。适用于动态扩展产品类型、复杂创建逻辑和框架设计等场景,如日志记录器、数据库连接池等。优点包括符合开闭原则、解耦客户端与具体产品;缺点是可能增加类数量和复杂度。典型应用如Java集合框架、Spring BeanFactory等。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问