ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptのテンプレートメソッドシングルトン

JavaScriptのテンプレートメソッドシングルトン

小云云
リリース: 2018-01-15 13:54:46
オリジナル
1190 人が閲覧しました

この記事は主にJavaScriptのテンプレートメソッドシングルトンの実装方法に関する情報を紹介していますので、困っている方の参考になれば幸いです。

JavaScriptでのテンプレートメソッドシングルトンの実装方法

テンプレートメソッドシングルトン

テンプレートメソッドの定義: 親クラスで操作アルゴリズムのスケルトンのセットを定義し、いくつかの実装手順をサブクラスに拡張して、サブクラスがクラスは、親クラスのアルゴリズム構造を変更せずに、アルゴリズムの一部の実装ステップを再定義できます。

コードブロック

html部分、例:


<p id="content"></p>
ログイン後にコピー

js部分、例:


  //格式化字符串方法
  function fromateString(str, data) {
   return str.replace(/\{#(\w+)#\}/g, function(match, key){
    return typeof data[key] === undefined ? &#39;&#39; : data[key]
   });
  }
  //基础导航
  var Nav = function (data) {
   //基础导航样式模板
   this.item = &#39;<a href="{#href#}" rel="external nofollow" title="{#title#}">{#name#}</a>&#39;;
   //创建字符串
   this.html=&#39;&#39;;
   for (var i = 0; i < data.length; i++) {
    this.html += fromateString(this.item, data[i]);
   }
   return this.html;
  }
  //带有信息提示信息导航
  var NumNav = function (data) {
   //消息提醒小心组件模板
   var tpl = &#39;<p>{#num#}</p>&#39;;
   for (var i = data.length -1; i >= 0; i--) {
    data[i].name += data[i].name + fromateString(tpl, data[i]);
   }
   return Nav.call(this, data);
  }
  //带有链接地址的导航
  var LinkNav = function (data) {
   //消息提醒小心组件模板
   var tpl = &#39;<span>{#link#}</span>&#39;;
   for (var i = data.length -1; i >= 0; i--) {
    data[i].name += data[i].name + fromateString(tpl, data[i]);
   }
   return Nav.call(this, data);
  }

  //测试带有信息提示的导航
  var nav = document.getElementById(&#39;content&#39;);
  nav.innerHTML = NumNav([
   {
    href : &#39;www.baidu.com&#39;,
    title : &#39;百度一下你就知道&#39;,
    name : &#39;百度&#39;,    
    num : 10,
    link : &#39;www.baidu.com&#39;
   },
   {
    href : &#39;www.taobao.com&#39;,
    title : &#39;淘宝商城&#39;,
    name : &#39;淘宝&#39;,    
    num : 2,
    link : &#39;www.taobao.com&#39;
   },
   {
    href : &#39;www.qq.com&#39;,
    title : &#39;腾讯首页&#39;,
    name : &#39;腾讯&#39;,    
    num : 3,
    link : &#39;www.qq.com&#39;
   }
  ]);
ログイン後にコピー

実際、テンプレートメソッドパターンはコンポーネントを正規化するときだけでなく、時にはよく使われるページの作成。上記のコードは、静的ページのカプセル化とビジネス ロジックの対話型カプセル化を導出できます。

関連する推奨事項:

Java クラシック設計パターンのテンプレート メソッド パターンの定義と使用法に関するコード例

PHP テンプレート メソッド パターンのコード共有例

テンプレート メソッド パターンとその PHP 実装

以上がJavaScriptのテンプレートメソッドシングルトンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート