设计模式知识连载（41）---简单模板模式:

最新推荐文章于 2020-06-09 20:50:32 发布

宇智波幽助

最新推荐文章于 2020-06-09 20:50:32 发布

阅读量157

点赞数

分类专栏：设计模式文章标签：设计模式格式化模板

本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/78942445

版权

设计模式专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<body>


<h3>设计模式知识连载（41）---简单模板模式:</h3>
<p>
    通过格式化字符串拼凑出视图避免创建视图时大量节点操作，优化内存开销
</p>

<hr>

<div id="container">

</div>


<script type="text/javascript">



    /**
    *   案例一：展示模板，方式一：初始
    */
    // // 命名空间，单体对象
    // var A = A || {} ;
    // // 主体展示区容器
    // A.root = document.getElementById('container') ;
    // // 创建视图方法集合
    // A.strategy = {
    //  // 文字列表展示
    //  'listPart' : function(data) {
    //      // 模块容器
    //      var s = document.createElement('div') ;
    //      // 标题容器
    //      var h = document.createElement('h2') ;
    //      // 描述容器
    //      var p = document.createElement('p') ;
    //      // 标题内容
    //      var ht = document.createTextNode(data.data.h2) ;
    //      // 描述内容
    //      var pt = document.createTextNode(data.data.p) ;
    //      // 列表容器
    //      var ul = document.createElement('ul') ;
    //      // 列表数据
    //      var ldata = data.data.li ;
    //      // li列表项容器，strong列表项标题，span列表项解释，t列表项标题内容，c列表项解释内容
    //      var li, strong, span, t, c ;
    //      // 有id设置模块id
    //      data.id && (s.id = data.id) ;
    //      // 设置模块类名
    //      s.className = 'part' ;
    //      // 将标题内容放入标题容器中
    //      h.appendChild(ht) ;
    //      // 将描述内容放入描述容器中
    //      p.appendChild(pt) ;
    //      // 将标题容器插入模块容器中
    //      s.appendChild(h) ;
    //      // 将描述容器插入模板容器中
    //      s.appendChild(p) ;

    //      // 遍历列表数据
    //      for(var i = 0, len = ldata.length; i < len; i++) {
    //          // 创建列表项容器
    //          li = document.createElement('li') ;
    //          // 创建列表项标题容器
    //          strong = document.createElement('strong') ;
    //          // 创建列表项解释容器
    //          span = document.createElement('span') ;
    //          // 创建列表项标题内容
    //          t = document.createTextNode(ldata[i].strong) ;
    //          // 创建列表项解释内容
    //          c = document.createTextNode(ldata[i].span) ;
    //          // 向列表项标题容器中插入标题内容
    //          strong.appendChild(t) ;
    //          // 向列表项解释容器中插入解释内容
    //          span.appendChild(c) ;
    //          // 向列表项中插入列表项标题
    //          li.appendChild(strong) ;
    //          // 向列表项中插入列表项标题
    //          li.appendChild(span) ;
    //          // 向列表容器中插入列表项
    //          ul.appendChild(li) ;
    //      }
    //      // 向模块中插入列表
    //      s.appendChild(ul) ;
    //      // 展现模块
    //      A.root.appendChild(s) ;
    //  },
    //  'codePart' : function() {},
    //  'onlyTitle' : function() {},
    //  'guide' : function() {}
    // }
    // // 创建视图入口
    // A.init = function(data) {
    //  // 根据传输的视图类型创建视图
    //  this.strategy[data.type](data) ;
    // }



    /**
    *   案例一：展示模板，方式二：进阶
    */
    // // 命名空间，单体对象
    // var A = A || {} ;

    // // 模板渲染方法
    // A.formateString = function(str, data) {
    //  return str.replace(/\{#(\w+)#\}/g, function(match, key) {
    //      return typeof data[key] === undefined ? '' : data[key]
    //  }) ;
    // }

    // // 主体展示区容器
    // A.root = document.getElementById('container') ;
    // // 创建视图方法集合
    // A.strategy = {
    //  // 文字列表展示
    //  'listPart' : function(data) {
    //      // 模块容器
    //      var s = document.createElement('div') ;
    //      // 列表字符串
    //      var ul = '' ;
    //      // 列表数据
    //      var ldata = data.data.li ;

    //      // 模块模板
    //      var tpl = [
    //          '<h2>{#h2#}</h2>',
    //          '<p>{#p#}</p>',
    //          '<ul>{#ul#}</ul>',
    //      ].join('') ;

    //      // 列表项模板
    //      var liTpl = [
    //          '<li>',
    //              '<strong>{#strong#}</strong>',
    //              '<span>{#span#}</span>',
    //          '</li>' 
    //      ].join('') ;

    //      // 有id设置模块id
    //      data.id && (s.id = data.id) ;

    //      // 遍历列表数据
    //      for(var i = 0, len = ldata.length; i < len; i++) {
    //          // 如果有列表项数据
    //          if(ldata[i].em || ldata[i].span) {
    //              // 列表字符串追加一项列表项
    //              ul += A.formateString(liTpl, ldata[i]) ;
    //          }
    //      }

    //      // 装饰列表数据
    //      data.data.ul = ul ;
    //      // 渲染模块并插入模块中
    //      s.innerHTML = A.formateString(tpl, data.data) ;
    //      // 渲染模块
    //      A.root.appendChild(s) ;
    //  },
    //  'codePart' : function() {},
    //  'onlyTitle' : function() {},
    //  'guide' : function() {}
    // }
    // // 创建视图入口
    // A.init = function(data) {
    //  // 根据传输的视图类型创建视图
    //  this.strategy[data.type](data) ;
    // }



    /**
    *   案例一：展示模板，方式三：进阶
    */

    // 命名空间，单体对象
    var A = A || {} ;

    // 模板渲染方法
    A.formateString = function(str, data) {
        return str.replace(/\{#(\w+)#\}/g, function(match, key) {
            return typeof data[key] === undefined ? '' : data[key]
        }) ;
    }

    // 模板生成器name : 标识
    A.view = function(name) {
        // 模板库
        var v = {
            // 代码模板
            code : '<pre><code>{#code#}</code></pre>',
            // 图片模板
            img : '<img src = "{#src#}" alt = "{#alt#}" title = "{#title#}">',
            // 带有id和类的模块模板
            part : '<div id = "{#id#}" class = "{#class#}">{#part#}</div>',
            // 组合模板
            theme : [
                '<div>',
                    '<h1>{#title#}</h1>',
                    '{#content#}',
                '</div>'
            ].join('')
        }
        // 如果参数是一个数组，则返回多行模板
        if(Object.prototype.toString.call(name) === '[object Array]') {
            // 模板缓存器
            var tpl = '' ;
            // 遍历标识
            for(var i = 0, len = name.length; i < len; i++) {
                // 模板缓存器追加模板
                tpl += arguments.callee(name[i]) ;
            }
            // 返回最终模板
            return tpl ;
        // 如果模板库中有该模板则返回该模板，否则返回简易模板
        }else{
            return v[name] ? v[name] : ('<' + name + '>{#'+ name +'#}</' + name + '>') ;
        }
    }


    // 主体展示区容器
    A.root = document.getElementById('container') ;
    // 创建视图方法集合
    A.strategy = {
        // 文字列表展示
        'listPart' : function(data) {
            // 模块容器
            var s = document.createElement('div') ;
            // 列表字符串
            var ul = '' ;
            // 列表数据
            var ldata = data.data.li ;

            // 模块模板
            // var tpl = [
            //  '<h2>{#h2#}</h2>',
            //  '<p>{#p#}</p>',
            //  '<ul>{#ul#}</ul>',
            // ].join('') ;
            var tpl = A.view(['h2', 'p', 'ul']) ;

            // 列表项模板
            // var liTpl = [
            //  '<li>',
            //      '<strong>{#strong#}</strong>',
            //      '<span>{#span#}</span>',
            //  '</li>' 
            // ].join('') ;
            var liTpl = A.formateString(A.view('li'), {
                li : A.view(['strong', 'span'])
            }) ;

            // 有id设置模块id
            data.id && (s.id = data.id) ;

            // 遍历列表数据
            for(var i = 0, len = ldata.length; i < len; i++) {
                // 如果有列表项数据
                if(ldata[i].em || ldata[i].span) {
                    // 列表字符串追加一项列表项
                    ul += A.formateString(liTpl, ldata[i]) ;
                }
            }

            // 装饰列表数据
            data.data.ul = ul ;
            // 渲染模块并插入模块中
            s.innerHTML = A.formateString(tpl, data.data) ;
            // 渲染模块
            A.root.appendChild(s) ;
        },
        'codePart' : function() {},
        'onlyTitle' : function() {},
        'guide' : function() {}
    }
    // 创建视图入口
    A.init = function(data) {
        // 根据传输的视图类型创建视图
        this.strategy[data.type](data) ;
    }



</script>    

</body>

宇智波幽助

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设计模式知识连载（41）---简单模板模式:

<body><h3>设计模式知识连载（41）---简单模板模式:</h3><p> 通过格式化字符串拼凑出视图避免创建视图时大量节点操作，优化内存开销</p><hr><div id="container"></div><script type="text/javascript"> /** * 案例一：展示模板，方式一：初始 */ // // 命名空间，
复制链接

扫一扫

专栏目录