js设想形式--模板要领形式

2023年3月25日 107次阅读 来源: aoping

媒介

本系列文章重要依据《JavaScript设想形式与开辟实践》整顿而来，个中会加入了一些本身的思索。愿望对人人有所协助。

文章系列

js设想形式–单例形式

js设想形式–战略形式

js设想形式–代办形式

js设想形式–迭代器形式

js设想形式–宣布定阅形式

js设想形式–敕令形式

js设想形式–组合形式

观点

模板要领形式是一种只需运用继续就能够完成的异常简朴的形式。
模板要领形式由两部份构造构成，第一部份是笼统父类，第二部份是详细的完成子类。平常 在笼统父类中封装了子类的算法框架，包含完成一些大众要领以及封装子类中所有要领的实行递次。子类经由历程继续这个笼统类，也继续了全部算法构造，而且能够挑选重写父类的要领。

场景

平常用于能够抽取大众要领，比方泡咖啡和沏茶，我们能够抽取烧水 洗濯杯具 冲泡等历程

优缺点

长处

能够复用大众要领，子类也不需要完成算法部份

例子

模板引擎

我们完成一个简朴的模板引擎:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="nav"></div>
  <script>
    var formateStr = function (param, data) {
      return param.replace(/\{#(\w+)#\}/g, function (match, key) {
        return typeof data[key] === undefined ? "" : data[key];
      });
    };

    var Nav = function (data) {
      var _this = this;
      _this.item = '<li><a href="{#hrefUrl#}" title="{#title#}" {#sign#}>{#content#}</a></li>';
      _this.html = '<ul>';
      for (var i = 0, l = data.length; i < l; i++) {
        _this.html += formateStr(_this.item, data[i]);
      }
      _this.html += '</ul>';
      return _this.html;
    }


    var objNav = document.getElementById('nav');
    objNav.innerHTML = Nav([{
        hrefUrl: 'http://www.baidu.com',
        content: '百度一下'
      },
      {
        hrefUrl: 'http://www.zhihu.com',
        content: '知乎一下'
      }
    ]);
  </script>
</body>

</html>

如今产物加了一个需求，想在content背面加个span标签展现接见次数

新需求

一般程序员就会着手去改Nav要领，但这违犯了开放关闭准绳，我们也不能确保不影响本来的功用，
实在我们加多一个模板要领就能够躲避如许的题目



<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="nav"></div>
  <script>
    var formateStr = function (param, data) {
      return param.replace(/\{#(\w+)#\}/g, function (match, key) {
        return typeof data[key] === undefined ? "" : data[key];
      });
    };

    var Nav = function (data) {
      var _this = this;
      _this.item = '<li><a href="{#hrefUrl#}" title="{#title#}" {#sign#}>{#content#}</a></li>';
      _this.html = '<ul>';
      for (var i = 0, l = data.length; i < l; i++) {
        _this.html += formateStr(_this.item, data[i]);
      }
      _this.html += '</ul>';
      return _this.html;
    }

    var infoNav = function (data) {
      var _this = this;
      _this.info = '<span>{#clickNum#}</span>';
      for (var i = data.length - 1; i >= 0; i--) {
        data[i].content += formateStr(_this.info, data[i]);
      };
      return Nav.call(this, data);
    };
    var objNav = document.getElementById('nav');
    objNav.innerHTML = infoNav([{
        hrefUrl: 'http://www.baidu.com',
        content: '百度一下',
        title: '百度',
        clickNum: '10',
        sign: 'sign="1"'
      },
      {
        hrefUrl: 'http://www.zhihu.com',
        content: '知乎一下',
        title: '知乎',
        clickNum: '100',
        sign: 'sign="2"'
      }
    ]);
  </script>
</body>

</html>
    原文作者：aoping
    原文地址: https://segmentfault.com/a/1190000017780756
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞