• JavaScript设计模式（七）：架构型设计模式-Widget模式

    分而治之-Widget模式

    Widget（Web Widget指的是一块可以在任意页面中执行的代码块）

    Widget模式是指借用Web Widget思想将页面分解成部件，针对部件开发，最终组合成完整的页面。

    art-template 和 ejs

    art-template: http://aui.github.io/art-template/zh-cn/

    ejs: https://ejs.bootcss.com/#promo

    在这里插入图片描述

    
<div id="test">div>
<script id="tpl-user" type="text/html">
    <label>标准语法: </label>
    {{if user}}
        <span>{{user.name}}</span>
    {{/if}}
    <hr>
    <label>原始语法: </label>
    <% if (user) { %>
        <span><%= user.name %></span>
    <% } %>
script>

    {([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*}}/; 
    -->


<script src="./template-web.js">script>
<script>
    const source = document.getElementById('tpl-user').innerHTML;
    var html = template.render(source, {
        user: {
            name: 'Lee'
        }
    });
    console.log(html);
    document.getElementById('test').innerHTML = html;
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    Widget模式

    在这里插入图片描述

    <style>
    span {
        padding: 0 5px;
        color: cornflowerblue;
    }

    span.selected {
        color: red;
    }
style>

<body>
    <div id="demo">div>
    <script src="./index.js">script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    ~(function (template) {
    /**
     * 处理模板
     *  处理结果示例：
     *      tpl_list.push('
    ');
     *      for (var i = 0; i < list.length; i++) {
     *          tpl_list.push('',
     *              typeof (list[i]["text"]) === 'undefined' ? '' : list[i]["text"],
     *              ''
     *          );
     *      }
     *      tpl_list.push('
    ');
     * @param {string} source 模板
     */    
    function dealTpl(source) {
        let [left, right] = ['{%', '%}'];
        let str = source
            // 转义标签内的< 如：
    {%if(a<b)%}
     -> 
    {%if(a
            .replace(/</g, '<')
            // 转义标签内的>
            .replace(/>/g, '>')
            // 过滤回车符，制表符，回车符
            .replace(/[\r\t\n]/g, '')
            // 替换内容
            .replace(new RegExp(`${left}=(.*?)${right}`, 'g'), `', typeof($1) === 'undefined' ? '' : $1,'`)
            // 替换左分隔符
            .replace(new RegExp(left, 'g'), `');`)
            // 替换右分隔符
            .replace(new RegExp(right, 'g'), `tpl_list.push('`);
        return `tpl_list.push('${str}');`
    }


    /**
     * 编译模板为字符串
     * @param {string} source 模板
     * @param {any} data 数据
     * @returns 编译好的html文本
     */
    template.compile = function (source, data) {

        let str = dealTpl(source);

        /**
         * fnBody目标逻辑
         */
        // let tpl_list = [];
        // // 闭包，模板容器组添加成员
        // let fn = (function (data) {
        //      
        //     // ==============【START】 由eval(tpl_key)生成 ====================
        //     var list = data['list'];
        //     // ==============【END】 由eval(tpl_key)生成 ====================
        // 
        //     // ==============【START】 由dealTpl函数生成 ====================
        //     tpl_list.push('
    ');
        //     for (var i = 0; i < list.length; i++) {
        //         tpl_list.push('//         if (list[i]['is_selected']) {
        //             tpl_list.push(' selected ');
        //         }
        //         tpl_list.push(
        //             '" title="',
        //             typeof (list[i]['title']) === 'undefined' ? '' : list[i]['title'],
        //             '">',
        //             typeof (list[i]["text"]) === 'undefined' ? '' : list[i]["text"],
        //             ''
        //         );
        //     }
        //     tpl_list.push('
    ');    
        //     // ==============【END】 由dealTpl函数生成 ====================
        //
        // }(data));
        // fn = null; // 释放闭包
        // return tpl_list.join('');

        const fnBody = `
            let tpl_list = [];

            // 闭包，模板容器组添加成员
            let fn = (function (data) {

                // 渲染数据变量的执行函数体
                let tpl_key = ''; // 目标 ---> var list = data['list'];

                Object.keys(data).forEach(key => {
                    tpl_key += ('var ' + key + ' = data["' + key + '"];');
                });

                // 执行渲染数据变量函数
                eval(tpl_key);
                
                ${str}

            }(tplData));

            fn = null; // 释放闭包

            return tpl_list.join('');
        `;

        return new Function('tplData', fnBody)(data);
    };


}((function () {
    return window.template = {};
}())));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    // 自定义模板。语法使用{% xxx %}；属性值使用{%= xxx %}
var source =
    `
    
        
    {%= userInfo.name %}
    
        {% for (var i = 0; i < list.length; i++) { %} 
            
                {%= list[i]["text"] %}
            
        {% } %}
    
    `    ;

var data = {
    userInfo: {
        name: 'Lee'
    },
    list: [
        { is_selected: 1, title: '这是一本设计模式书', text: '设计模式' },
        { is_selected: 0, title: '这是一本HTML书', text: 'HTML' },
        { is_selected: 0, title: '这是一本CSS书', text: 'CSS' },
        { is_selected: 0, title: '这是一本JavaScript书', text: 'JavaScript' },
    ]
};

document.getElementById('demo').innerHTML = template.compile(source, data);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
  • 相关阅读:
    Elasticsearch 8.X 路径检索的企业级玩法
    java计算机毕业设计无人驾驶汽车管理系统源程序+mysql+系统+lw文档+远程调试
    js笔试题(三)
    Kafka&陌陌案例,220903,,
    SQL优化
    ASEMI快恢复二极管ES8JC参数，ES8JC规格，ES8JC封装
    Spring原生api操作之如何在spring配置文件添加Bean对象到Spring容器
    【Netty】第3章-Java NIO 编程
    Delphi 取消与设置CDS本地排序
    ipsec主模式加密身份信息有什么意义？
  • 原文地址：https://blog.csdn.net/weixin_43526371/article/details/127845461