日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
10個優(yōu)秀開源JavaScript模板引擎

目前前端主流的開發(fā)框架有Vue、React以及Angular等，但是依然有一部分開發(fā)人員并不會去使用這些框架，特別是一些偏向后端的開發(fā)者，可能依然在使用類似于jquery+Bootstrap的方式在開發(fā)一些項目，而且有些項目可能傳統(tǒng)的方式更加合適，因此JavaScript前端模板引擎就能夠發(fā)會很大作用了，那么今天就介紹10大開源模板引擎，依據(jù)不同的場景或者功能特性，可以選擇不同的模板引擎應(yīng)用到項目中去：

成都創(chuàng)新互聯(lián)公司2013年成立，先為壽縣等服務(wù)建站，壽縣等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為壽縣企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

  • Art-template
  • DOT
  • JavaScript-Templates
  • Template.js
  • Tempo
  • ECT
  • Dot Dom
  • Template7
  • Bunny
  • Squirrelly

1. Art-template

Art-template是一個簡單且超快速的模板引擎，可通過范圍預(yù)先聲明的技術(shù)優(yōu)化模板渲染速度。它實現(xiàn)了接近JavaScript極限的運行時性能。同時，它支持NodeJS和瀏覽器。

  • 擁有接近 JavaScript 渲染極限的的性能
  • 調(diào)試友好：語法、運行時錯誤日志精確到模板所在行;支持在模板文件上打斷點(Webpack Loader)
  • 支持 Express、Koa、Webpack
  • 支持模板繼承與子模板
  • 瀏覽器版本僅 6KB 大小
 
 
 
      
  
  
  1. https://github.com/aui/art-template 
    2.   
  
  
  2.  
    3.   
  
  
  3. var template = require('art-template'); 
    4.   
  
  
  4. var html = template(__dirname + '/tpl-user.art', { 
    5.   
  
  
  5.  user: { 
    6.   
  
  
  6.  name: 'aui' 
    7.   
  
  
  7.  } 
    8.   
  
  
  8. }); 
    9.

2. DOT

為了最快，最簡潔的JavaScript模板功能，重點是在V8和Nodejs下的性能。它對Node.js和瀏覽器均顯示出出色的性能。doT.js快速，小巧且沒有依賴性。

 
 
 
      
  
  
  1. https://github.com/olado/doT 
    2.   
  
  
  2. Hi {{=it.name}}! 
    3.   
  
  
  3. {{=it.age || ''}} 
    4.

3. JavaScript-Templates

快速且強大的JavaScript模板引擎，零依賴。與node.js之類的服務(wù)器端環(huán)境，RequireJS之類的模塊加載器以及所有Web瀏覽器兼容。

 
 
 
      
  
  
  1. https://github.com/blueimp/JavaScript-Templates 
    2.

4. Template.js

JavaScript模板引擎，簡單易用，支持webpack和fis。提供了一組模板語法，用戶可以編寫一個模板塊。每次傳入數(shù)據(jù)時，生成由相應(yīng)數(shù)據(jù)生成的HTML片段，呈現(xiàn)不同的效果。

 
 
 
      
  
  
  1. https://github.com/yanhaijing/template.jsconst data = { list: [ {name: "yan"}, {name: "haijing"} ]}; 
    2.   
  
  
  2.  <%for(var i = 0; i < list.length; i++) {%>  
    3.   
  
  
  3. <%:=list[i].name%> 
    4.   
  
  
  4.  <%}%> 
    5.

5. Tempo

Tempo是一個簡單，直觀的JavaScript渲染引擎，能夠以純HTML格式制作數(shù)據(jù)模板。關(guān)注點分離：JavaScript文件中沒有HTML，HTML中也沒有JavaScript;輕松處理AJAX / JSON內(nèi)容，可在Safari，Chrome，F(xiàn)ireFox，Opera和Internet Explorer 6+中運行

 
 
 
      
  
  
  1. https://github.com/twigkit/tempo 
    2.

6. ECT

聲稱具有嵌入式CoffeeScript語法的最快的JavaScript模板引擎。具有出色的性能，模板緩存，自動重新加載已更改的模板和模板中的CoffeeScript代碼

 
 
 
      
  
  
  1. https://github.com/baryshev/ect 
    2.   
  
  
  2.  
    3.   
  
  
  3. var ECT = require('ect'); 
    4.   
  
  
  4.  
    5.   
  
  
  5. var renderer = ECT({ root : __dirname + '/views', ext : '.ect' }); 
    6.   
  
  
  6.  
    7.   
  
  
  7. renderer.render('page', { title: 'Hello, World!' }, function (error, html) { 
    8.   
  
  
  8.     console.log(error); 
    9.   
  
  
  9.     console.log(html); 
    10.   
  
  
  10. }); 
    11.

7. Dot Dom

.dom從React.js借用了一些概念(例如可重用的組件和虛擬DOM)，并嘗試利用ES6 javascript功能以最小的占用空間復制它們。該庫的大小不超過512個字節(jié)。正在大力利用ES6規(guī)范。

 
 
 
      
  
  
  1. https://github.com/wavesoft/dot-dom 
    2.   
  
  
  2.  
    3.   
  
  
  3. function Clickable(props, state, setState) { 
    4.   
  
  
  4.  const {clicks=0} = state; 
    5.   
  
  
  5.  
    6.   
  
  
  6.  return H('button', 
    7.   
  
  
  7.  { 
    8.   
  
  
  8.  onclick() { 
    9.   
  
  
  9.  setState({clicks: clicks+1}) 
    10.   
  
  
  10.  } 
    11.   
  
  
  11.  }, 
    12.   
  
  
  12.  `Clicked ${clicks} times` 
    13.   
  
  
  13.  ); 
    14.   
  
  
  14. } 
    15.   
  
  
  15.  
    16.   
  
  
  16. R( 
    17.   
  
  
  17.  H('div', 
    18.   
  
  
  18.  H(Clickable), 
    19.   
  
  
  19.  H(Clickable) 
    20.   
  
  
  20.  ), 
    21.   
  
  
  21.  document.body 
    22.   
  
  
  22. ) 
    23.

8. Template7

Template7是第一個具有類似Handlebars語法的移動優(yōu)先JavaScript模板引擎。它在Framework7中用作默認模板引擎。它是超輕量級的(縮小并壓縮成1KB左右)并且運行迅速(比mobile Safari中的Handlebars快2-3倍)。

 
 
 
      
  
  
  1. https://github.com/nolimits4web/template7 
    2.   
  
  
  2.   
    3.   
  
  
  3.  {{#each items}}  
    4.   
  
  
  4.   
    5.   
  
  
  5.   
    6.   
  
  
  6. {{title}} 
    7.   
  
  
  7.   
    8.   
  
  
  8.   
    9.   
  
  
  9.  {{/each}}  
    10.

9. Bunny

BunnyJS是現(xiàn)代的原生JS和ES6庫以及下一代前端框架，無依賴性的小型獨立組件的軟件包。它沒有依賴性-可以隨時隨地在任何項目中使用

 
 
 
      
  
  
  1. https://github.com/Mevrael/bunny 
    2.   
  
  
  2.  
    3.   
  
  
  3. import { Component as BunnyComponent } from 'bunnyjs/src/...'; 
    4.   
  
  
  4.  
    5.   
  
  
  5. export const Component = Object.assign({}, BunnyComponent, { 
    6.   
  
  
  6.  
    7.   
  
  
  7.  init(arg) { 
    8.   
  
  
  8.  // do whatever you want 
    9.   
  
  
  9.  console.log(arg); 
    10.   
  
  
  10.  
    11.   
  
  
  11.  // call default (parent) 
    12.   
  
  
  12.  return BunnyComponent.init(arg); 
    13.   
  
  
  13.  } 
    14.   
  
  
  14.  
    15.   
  
  
  15. }); 
    16.

10. Squirrelly

Squirrelly是使用JavaScript實現(xiàn)的現(xiàn)代，可配置且功能強大的快速模板引擎。它在ExpressJS開箱即用，完整版壓縮后僅約2.2KB。

 
 
 
      
  
  
  1. https://github.com/squirrellyjs/squirrellyvar myTemplate = " 
    2.   
  
  
  2. My favorite kind of cake is: {{favoriteCake}} 
    3.   
  
  
  3. "Sqrl.Render(myTemplate, {favoriteCake: 'Chocolate!'})// Returns: ' 
    4.   
  
  
  4. My favorite kind of cake is: Chocolate! 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8. {{if(options.somevalue === 1)}} 
    9.   
  
  
  9. Display this 
    10.   
  
  
  10. {{#else}} 
    11.   
  
  
  11. Display this 
    12.   
  
  
  12. {{/if}} 
    13.   
  
  
  13.   
    14.   
  
  
  14. {{each(options.somearray)}} 
    15.   
  
  
  15. Display this 
    16.   
  
  
  16. The current array element is {{@this}} 
    17.   
  
  
  17. The current index is {{@index}} 
    18.   
  
  
  18. {{/each}} 
    19.

總結(jié)

Javascript的模板引擎相對較多，從性能、簡單性、易用性等方面會有所不同，開發(fā)者們可以根據(jù)不同的角度去選擇一個合適的模板引擎用于項目研發(fā)或者重構(gòu)，Enjoy it!


本文標題：10個優(yōu)秀開源JavaScript模板引擎
網(wǎng)頁鏈接：http://m.5511xx.com/article/cojpgcc.html