• JS模板实现


    概述

    我们在使用JS渲染DOM时,一般使用字符串创建DOM然后附加到父元素上,如果附加的DOM是动态易变的,那需要在函数中写大量逻辑。如果在控件实现过程中,这带来的问题更为严重。

    解决这个问题的常见解决方案是是使用模板,作为配置项传入控件,实现数据和渲染的分离。具体的实现方法有以下方法:

    1. 字符串替换,使用正则匹配将数据替换进字符串中。
    2. 渲染函数,函数返回字符串。
    3. 模板引擎,可以将执行字符串中的函数(内置或者自定义的)

    替换(Substitute)

    字符串替换是最简单的实现模板的方式,看一下具体的实现:

    1. 定义替换函数

    /**
    
     * 替换字符串中的字段.
    
     * @param {String} str 模版字符串
    
     * @param {Object} o json data
    
     * @param {RegExp} [regexp] 匹配字符串的正则表达式
    
     */
    
    function substitute(str,o,regexp){
    
      return  str.replace(regexp || /\\?\{([^{}]+)\}/g, function (match, name) {
    
        return (o[name] === undefined) ? '' : o[name];
    
      });
    
    }

    2.使用配置项:

    var config = {
    
      data : {value : '123',text:'abc'},
    
      template : '<label>{text}</label><input type="text" value="{value}"/>'
    
    };

    3. 在创建DOM的过程中我们这样调用:

    var str = substitute(template,data);
    
    $(str).appendTo('body');

    通过以上示例,我们就完成了数据和字符串的解耦,可以灵活的用在控件中,当前大多数JS框架都提供了此种方式的模板。

    在此基础上可以有下面的扩展,感兴趣的可以自己去实现:

    1. 使用数字代替参数名:

             如  '<label>{0}</label><input type="text" value="{1}"/>'

    2. 嵌套使用对象属性:

             如 '<label>{obj.name}</label><input type="text" value="{obj.value}"/>'

    优点:实现简单,易于理解。

    缺点:只能进行简单的数据结构,无法处理循环、条件语句。

    渲染方法(Render)

    我们可以在渲染函数中处理非常复杂的逻辑,可以将渲染函数作为参数传入配置项。

    配置项:

    var config = {
    
      data : [{value : '0',text:'abc'},{value : '1',text:'bcd'}],
    
      renderer : function(obj){
    
        if(obj.value === '0'){
    
          return obj.text;
    
        }else{
    
          return '<img title="' + obj.text + '" src=""/>';
    
        }
    
      }
    
    };

    在使用时:

    for(var i = 0 ; i< data.length; i++){
    
      var obj = data[i],
    
         str = config.renderer(obj);
    
      $(str).appendTo('body');
    
    }

    在处理循环,条件语句时,这是一种很好的解决方案。

    优点:实现相对简单,实现灵活,能满足复杂数据结构,易于调试

    缺点:

    1. 渲染函数作为配置项,不易理解。
    2. 函数较长时,使配置项臃肿。
    3. 每个场景都需要自己实现渲染函数。

    模板引擎(XTemplate)

    每一个JS UI库都会有一个功能强大的模板引擎,一个模板引擎需要实现以下功能:

    1. 字符串替换

    2. 处理复杂语句 条件、循环

    3. 使用内嵌函数

    4. 允许用户传入自定义函数

    目前的模板引擎有2种常见的实现方式:

    1. 使用正则分析字符串,执行其中的特殊语句逻辑,替换对应的数据

    我们来看一下KISSY 模板的一个实例:

    'Hello, {{#each users}}{{#if _ks_value.show}}{{_ks_value.name}}{{/if}}{{/each}}.'

    上面这是一个模板,可以处理循环、条件语句。

    2. 对字符串进行语法分析,生成语法树,执行替换对应的标签或数据。

    下面是Ext的 xtemplate使用方式:

    var tpl = new Ext.XTemplate(
              '<p>{name}\'s favorite beverages:</p>',
              '<tpl for="drinks">',
                  '<div> - {.}</div>',
              '</tpl>'
          );
          tpl.overwrite(panel.body, data);
     

    优点:功能强大,灵活性高

    缺点:使用复杂,更加不易理解。不便于调试。

    问题思考

    1. 控件中使用模板,可以将数据和DOM分离,但是如果一个控件中包含大量的模板,会增加使用者的工作量,而且不易于调试,需要权衡使用。

    2. 如果大量控件使用相同的模板,和相同的数据结构,每个控件单独配置不便于使用,更好的方案是允许父控件配置模板。

  • 相关阅读:
    c# 网络编程
    .net基础------抽象类和接口区别
    自己开发插件-------- 待续...........
    js 学习笔记 (this ,扩展方法,匿名函数)
    meta
    微信公众号支付接口-JSAPI
    跨境电商-311xml报文生成 更新到2018-10
    MooTools 异步请求验证
    微信JS-SDK 接口调用与 php 遇到的坑
    php 与 jquery中$.post()与attr()方法的简单实例 amaze modal 模态窗口
  • 原文地址:https://www.cnblogs.com/zaohe/p/2996441.html
Copyright © 2020-2023  润新知