JavaScript设计模式(三十六):分而治之-Widget模式

简介: 分而治之-Widget模式

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

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

art-templateejs

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

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

image.png

<!-- art-template -->
<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>

    <!-- 
        // 原始语法的界定符规则
        template.defaults.rules[0].test = /<%(#?)((?:==|=#|[=-])?)[ \t]*([\w\W]*?)[ \t]*(-?)%>/;

        // 标准语法的界定符规则
        template.defaults.rules[1].test = /{
   
   {([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*}}/; 
    -->

<!-- https://unpkg.com/art-template@4.13.2/lib/template-web.js -->
<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>

Widget模式

image.png

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

    span.selected {
    
    
        color: red;
    }
</style>

<body>
    <div id="demo"></div>
    <script src="./index.js"></script>
</body>
~(function (template) {
   
   
    /**
     * 处理模板
     *  处理结果示例:
     *      tpl_list.push('<div>');
     *      for (var i = 0; i < list.length; i++) {
     *          tpl_list.push('<span class="tag_item ');
     *          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"],
     *              '</span>'
     *          );
     *      }
     *      tpl_list.push('</div>');
     * @param {string} source 模板
     */
    function dealTpl(source) {
   
   
        let [left, right] = ['{%', '%}'];
        let str = source
            // 转义标签内的< 如:<div>{%if(a&lt;b)%}</div> -> <div>{%if(a<b)%}</div>
            .replace(/&lt;/g, '<')
            // 转义标签内的>
            .replace(/&gt;/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('<div>');
        //     for (var i = 0; i < list.length; i++) {
   
   
        //         tpl_list.push('<span class="tag_item ');
        //         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"],
        //             '</span>'
        //         );
        //     }
        //     tpl_list.push('</div>');
        //     // ==============【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 = {
   
   };
}())));
// 自定义模板。语法使用{% xxx %};属性值使用{%= xxx %}
var source =
    `<div>
        <p>{%= userInfo.name %}</p>
        {% for (var i = 0; i < list.length; i++) { %} 
            <span class="tag_item {% if (list[i]['is_selected']) { %} selected {% } %}" 
                title="{%= list[i]['title'] %}">
                {%= list[i]["text"] %}
            </span>
        {% } %}
    </div>`;

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);
目录
相关文章
|
13天前
|
JavaScript 前端开发 Docker
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
72 44
|
25天前
|
设计模式 Java
「全网最细 + 实战源码案例」设计模式——生成器模式
生成器模式(Builder Pattern)是一种创建型设计模式,用于分步骤构建复杂对象。它允许用户通过控制对象构造的过程,定制对象的组成部分,而无需直接实例化细节。该模式特别适合构建具有多种配置的复杂对象。其结构包括抽象建造者、具体建造者、指挥者和产品角色。适用于需要创建复杂对象且对象由多个部分组成、构造过程需对外隐藏或分离表示与构造的场景。优点在于更好的控制、代码复用和解耦性;缺点是增加复杂性和不适合简单对象。实现时需定义建造者接口、具体建造者类、指挥者类及产品类。链式调用是常见应用方式之一。
53 12
|
26天前
|
设计模式
「全网最细 + 实战源码案例」设计模式——模式扩展(配置工厂)
该设计通过配置文件和反射机制动态选择具体工厂,减少硬编码依赖,提升系统灵活性和扩展性。配置文件解耦、反射创建对象,新增产品族无需修改客户端代码。示例中,`CoffeeFactory`类加载配置文件并使用反射生成咖啡对象,客户端调用时只需指定名称即可获取对应产品实例。
88 40
|
27天前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——工厂方法模式
简单工厂模式是一种创建型设计模式,通过一个工厂类根据传入参数创建不同类型的产品对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。适用于创建对象种类较少且调用者无需关心创建细节的场景。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。
45 15
|
27天前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——简单工厂模式
简单工厂模式是一种创建型设计模式,通过工厂类根据传入参数创建不同类型的对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。适用于对象种类较少且调用者无需关心创建细节的场景。
54 19
|
1月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
90 33
|
2月前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
142 11
|
2月前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
3月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
57 2
|
3月前
|
设计模式 安全 Java
Kotlin - 改良设计模式 - 构建者模式
Kotlin - 改良设计模式 - 构建者模式

热门文章

最新文章