JavaScript-Repeater-Vorlagensteuerung-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

JavaScript-Repeater-Vorlagensteuerung

Nov 26, 2016 am 11:28 AM

功能强大的模板引擎大都需要对模板进行语法解析，会有性能问题。通过把一个大的模板引擎根据不同呈现需求分隔成多个互相独立模板控件，可以降低处理复杂度提供处理性能,可以根据需求灵活组合这些模板控件得到一个可以定制的模板功能库。
一个模板控件规定了它的模板语法和js api，这是一个repeater控件的JS实现:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>JavaScript Repeater控件</title>
</head>

<body>
<div id="crossRate">
    
    <table width="815" class="table-data">
    <tr>
      <th>代码</th>
      <th>名称</th>
      <th>最新价</th>
      <th>涨跌额</th>
      <th>涨跌幅</th>
      <th>开盘</th>
      <th>最高</th>
      <th>最低</th>
      <th>昨收</th>
    </tr>
    </table>
    

    <script type="text/template" id="crossRateHeader">
        <table width="815" class="table-data">
        <tr>
          <th>代码</th>
          <th>名称</th>
          <th>最新价</th>
          <th>涨跌额</th>
          <th>涨跌幅</th>
          <th>开盘</th>
          <th>最高</th>
          <th>最低</th>
          <th>昨收</th>
        </tr>
    </script>
    <script type="text/template" id="crossRateItem">
    <tr>
      <td>{$dataRow[1]}</td>
      <td>{$dataRow[2]}</td>
      <td>{$dataRow[5]}</td>
      <td>{$dataRow[17]}</td>
      <td>{$dataRow[18]}</td>
      <td>{$dataRow[4]}</td>
      <td>{$dataRow[6]}</td>
      <td>{$dataRow[7]}</td>
      <td>{$dataRow[3]}</td>
    </tr>
    </script>
    <script type="text/template" id="crossRateFooter">
    </table>
    </script>
</div>
<script>

//View
(function(ns){

    function init(){
        var container = document.getElementById( "crossRate");
        container.setAttribute("data-headertemplate", document.getElementById("crossRateHeader").text);
        container.setAttribute("data-itemtemplate", document.getElementById("crossRateItem" ) .text); container = document.getElementById("crossRate"),
            headerhtml = container.getAttribute("data-headertemplate"),
            rowhtml = container.getAttribute("data-itemtemplate"),
            footerhtml = Container. getAttribute("data-footertemplate");
             .length; i<n; i++){
            dataRow = dt[i].split(",");
            repater.set("dataRow",dataRow);
            repater.parse();
        }
        container.innerHTML = repater.toHTML();
    🎜>        ausfüllen : function(data){
            render(data);
        }
    };
    ns.crossRate.init();
}(window));

//异步获取数据渲染数据data
var datas =. ["USDEUR0,USDEUR,美元欧元,0.7731,0.7732,0.7723,0.7734,0.7717,0,22913,0.0000,0 ,0,0.7731,0.0000,0 ,0,-0.0008,-0.10%,0.0000,1,3848,0,-1,1,0.0000,0.0000,2012-05-10 13:49:53,3","USDHKD0,USDHKD,美元港币,7.7625 ,7.7633,7.7621,7.7634,7.7617,0,14208,0.0000,0,0,7.7625,0.0000,0,0,-0.0004,-0.01%,0.0000,2,2062,0,-1,0,0.0000,0.0000 ,2012-05-10 13:49:49,3","USDJPY0,USDJPY,美元日元,79.71,79.73,79.62,79.77,79.57,0,25489,0.00,0,0,79.71,0.00,0, 0,-0.09,-0.11%,0.00,1,4307,0,-1,-1,0.00,0.00,2012-05-10 13:50:13,3","USDCHF0,USDCHF,美元瑞郎, 0.9285,0.9287,0.9276,0.9289,0.9266,0,29637,0.0000,0,0,0.9285,0.0000,0,0,-0.0009,-0.10%,0.0000,1,4960,0,-1,1,0.0000, 0,0000,2012-05-10 13:50:02,3, 0,0.0004,0.02%,0.0000,2,5381,0,-1,0,0.0000,0.0000,2012-05-10 13:50:04,3"];

//填充数据到view
crossRate.fill(datas);

//Repater模板控件 www.2cto.com
function Repater(headerhtml,rowhtml,footerhtml) {
    var _this = this ;
    var n = 0;
    _this.cache = [];
    _this.dic = {};
    _this.header = headerhtml;
    _this.row = rowhtml;
_this.footer = '</table>';
    if (headerhtml) _this.header = headerhtml;
    if (rowhtml) _this.row = rowhtml;
    if (footerhtml) _this.footer = footerhtml ;
    _this.set = function(tag, val) {
        this.dic[tag] = val;
    };

    _this.parse = function(dic) {
var row = this.row,
                dic = dic || this.dic,
                re = /{$(w+)(?:[(d+)])?(?:|(w+))?}/g,
                html;
        html = row.replace(re, function(a, b, c, d) {
            var val;
            if (typeof dic[b] == "undefiniert"){
return b;
                  val = dic[b ];
            }
            if (Repater[d] || window[d]) {//修饰符
                val = (Repater[d] || window[d])(val);
           _this.toHTML = function(args ): + _this.footer;
        for (i in args) {
            if (args.hasOwnProperty(i)) {
                result = result.replace("{$"+i+"}", args[i ]);
            }
        /html>

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn