javascript簡單模板引擎介紹

admin發表於2017-04-08
JavaScript

當前網站為了開發效率等因素，通常採用模板的方式。

本章節就通過程式碼例項簡單介紹一下模板的實現原理，當然這裡的模板是非常的簡單的，和jQuery tmpl或者handlebarsjs等相比較不值得一提，但是我們們這裡只是學習實現原理，來開闊一下視野和思路。

一.定義模板:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
</head>
<body>
<div class="result"></div>
<script type="template" id="template">
  <h2>
    <a href="{{href}}">
      {{title}}
    </a>
  </h2>
  <img src="{{imgSrc}}" alt="{{title}}">
</script>
</body>
</html>

在實際應用中都是要通過ajax等方式從後臺獲取資料，這裡我們為了方便演示，就將資料放在本地:

[JavaScript] 純文字檢視 複製程式碼
var data=[
  {
    title:"螞蟻部落一",
    href:"softwhy.com/a",
    imgSrc:"image/a.jpg"
  },
  {
    title:"螞蟻部落二",
    href:"softwhy.com/b",
    imgSrc:"image/b.jpg"
  },
  {
    title:"螞蟻部落三",
    href:"softwhy.com/c",
    imgSrc:"image/c.jpg"
  }
]

我們只要把模板中的相應部分替換為資料就可以了。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script type="template" id="template">
  <h2>
    <a href="{{href}}">
      {{title}}
    </a>
  </h2>
  <img src="{{imgSrc}}" alt="{{title}}">
</script>
</head>
<body>
<div class="result"></div>
<script>
var data=[
  {
    title:"螞蟻部落一",
    href:"softwhy.com/a",
    imgSrc:"image/a.jpg"
  },
  {
    title:"螞蟻部落二",
    href:"softwhy.com/b",
    imgSrc:"image/b.jpg"
  },
  {
    title:"螞蟻部落三",
    href:"softwhy.com/c",
    imgSrc:"image/c.jpg"
  }
];
 
var template=document.querySelector('#template').innerHTML
    result=document.querySelector('.result'),
    index=0,len=data.length,
    fragment='';
  
for(;index<len;index++){
  fragment += template
  .replace( /\{\{title\}\}/,data[index].title)
  .replace( /\{\{href\}\}/,data[index].href)
  .replace( /\{\{imgSrc\}\}/,data[index].imgSrc);
}
result.innerHTML=fragment;
</script>
</body>
</html>

上面的程式碼實現了一定的替換功能，程式碼有沒有發現有個問題，那就是圖片中的title並沒有被替換到，因為這裡的正規表示式並沒有採用全域性匹配，只要將對應的程式碼修改如下即可:

[JavaScript] 純文字檢視 複製程式碼
for(;index<len;index++){
  fragment += template
  .replace( /\{\{title\}\}/g,data[index].title)
  .replace( /\{\{href\}\}/g,data[index].href)
  .replace( /\{\{imgSrc\}\}/g,data[index].imgSrc);
}

相關文章