前端開發：JavaScript 模板引擎（二）

此文為大家整理一些實用的JavaScript 模板引擎，希望對大家有所幫助！

1、handlebars.js（是 Mustache 模板語言的擴展）

2、eco（嵌入式的 CoffeeScript 模板）

3、dustjs（適用于瀏覽器和 node.js 的異步模板）

4、Jade（健壯的、優雅且功能豐富的 nodejs 模板引擎）

5、marko（快速輕量且基于 HTML 的模板引擎，支持異步、流、自定義標簽和 CommonJS 模編譯后輸出。適用于 Node.js）

6、EJS（高效的 JavaScript 模板）

切圖 qietu(.com)

avaScript的框架、庫和工具的冒出似乎有點超出大家的想象，截止到2017年5月，在GitHub上搜索JavaScript項目，你會發現其已經超過了110萬；npmjs.org上有50萬個可用的軟件包，每月下載量近100億次。

為了幫助大家更好地選擇JavaScript框架、庫和工具，本文將對流行的框架、庫和工具進行一些對比，但是由于篇幅有限，可能并不能包含到所有的框架、庫和工具，所以歡迎大家在下方補充評論，共同學習進步。

為了讓大家的討論在共同的水平線上，首先我們先來確定一下框架、庫和工具的概念。可能每個人對于這三者都有自己的理解，但是本文是基于以下的概念來進行討論的。

庫

庫是有用功能的有組織的集合。庫的典型功能包括處理字符串、日期、HTML DOM元素、事件、Cookie、動畫、網絡請求等。每個函數將值返回給調用應用程序，但是你可以從中選擇參數來應用。如果用汽車來做比喻，那就是你可以任意使用所有的零部件來搭建汽車，但是你必須自行構建引擎。

庫通常是提供一個更高的抽象層，平滑的實現細節和矛盾。例如，Ajax通常依賴于XMLHttpRequest API，但是由于各瀏覽器之間的差異，你可能需要修改幾行代碼來實現。但是庫可以提供一個更簡單的ajax()函數，讓程序員更專注于高層次的業務邏輯。

因為庫不必在意更多的細節，所以開發時間可能會縮短20%，但是它也不是沒有缺點的：

庫內的錯誤可能難以定位和修復
開發團隊不能保證快速發布補丁
修補程序可能會更改API，并對您的代碼進行重大更改。

框架

框架是一個應用程序的骨架，它要求你以特定的方式處理軟件設計，并在某些點插入自己的邏輯。通常框架提供事件、存儲和數據綁定等功能。如果我們還是用汽車了來做類比，那么框架就是一輛車的底盤、車身和發動機，為了讓車輛始終保持運行狀態，你可以添加、刪除或修改某些組件。

框架通常會提供比庫更高的抽象層，并且幫助用戶快速構建項目的08%，但它的缺點是：

如果應用程序超出了框架的范圍，那么剩下的20%可能會很難完成；
框架更新可能很困難；
框架核心代碼和概念很少更新，但是同樣的事情，程序員往往都會在短時間內發現一個更好的解決方式；

工具

工具有助于開發，但并不是項目的組成部分。工具包括系統構建，編譯器， transpilers，代碼分割器，圖像壓縮器等。

工具的應用使得開發過程變得更加容易，例如很多程序員都喜歡將Sass to CSS，因為它提供了代碼分離，嵌套，渲染時間變量，循環和函數。瀏覽器不了解Sass / SCSS語法，因此在測試和部署之前，必須使用適當的工具將代碼編譯為CSS。

JavaScript框架和庫

jQuery

jQuery是最常用的JavaScript庫，它革命性的在客戶端開發，將CSS選擇器引入到DOM節點檢索加鏈接來應用事件處理程序、動畫和Ajax調用。jQuery近年來備受青睞，對于一個很需要JavaScript功能的項目來說，jQuery絕對是一個可行的選擇。

優點：

分布規模小；
學習曲線平緩，在線幫助多；
語法簡潔；
容易延伸；

缺點：

增加了本機API的速度開銷
瀏覽器兼容性的改善降低了它的重要性；
用法扁平
有些行業反饋有很多不必要的使用。

React

React可能是去年一年最受關注的庫了吧。React聲稱是一個用于構建用戶界面的JavaScript庫，它專注于MVC開發的“View”部分，并且可以輕松創建保留狀態的UI組件。它是實現虛擬DOM的第一個庫，內存結構計算差異，有效地更新頁面。

從使用情況來看，React的情況似乎有些不好，但這是因為它是在應用程序中使用而不是網站，38%的程序員表示他們正在使用該庫。

優點：

小巧，高效，快捷靈活；
簡單的組件模型；
良好的文檔和在線資源；
服務器端渲染；
處于高速發展期；

缺點：

需要學習新的概念和語法；
構建工具必不可少；
要求其他庫或框架提供Model和Control；
與修改DOM的代碼和其他庫不兼容；

Lodash and Underscore

Lodash和Underscore提供了數百個功能性的JavaScript實用程序來補充本地字符串，數字，數組和其他原始對象方法。它在客戶端使用率較低，但是可以在服務器端的Node.js應用程序中使用很頻繁。

優點：

小而簡單；
擁有優質文檔，易于學習；
與大多數庫和框架兼容；
不擴展內置對象；
可以在客戶端或服務器上使用；

缺點：

有些方法只適用于ES2015及更高版本的JavaScript。

AngularJS 1.x

Angular最流行的版本是1.x版本，它使用雙向數據綁定擴展HTML，同時將DOM操作與應用程序邏輯脫鉤。盡管版本2已經發布（當然現在已經到了版本4），但是Angular 1.x仍在開發中。

優點：

眾多大公司采用；
以單一的解決方案來生產現代Web應用程序；
一個解決方案來生產現代Web應用程序；
MEAN堆棧（MongoDB，Express.JS，AngularJS，NodeJS），有眾多文檔和教程可用來參考；

缺點：

學習曲線更加陡峭；
大代碼庫
不能升級到Angular 2.x

Angular 2.x (now 4.x)

Angular 2.0于2016年9月發布。這是一個完整的重寫，它引入了使用TypeScript（被編譯為JavaScript）創建的基于模塊化組件的模型。 Angular 4.0版本于2017年3月發布。

Angular2+和1.0版本截然不同，與其他也不兼容，所以也許谷歌應該給該項目另外起一個名字。

優點：

單一的解決方案來生產現代Web應用程序；
盡管Angular 2+的可用文檔較少，但它仍是MEAN堆棧的一部分；
對于熟悉靜態類型語言（如C＃和Java）的人員，TypeScript提供了一些優勢。

缺點：

更陡峭的學習曲線；
大代碼庫；
不能從Angular 1.x升級；
與1.x相比，Angular 2.x的使用率相對較低；
盡管是Google的項目，但Google似乎并沒有使用它？

Vue.js

Vue.js是一個用于構建用戶界面的輕量級漸進框架。該核心提供了一個React-like 的虛擬 DOM-powered層，它可以與其他庫集成，也可以支持單頁應用程序。

Vue.js使用HTML模板語法將DOM綁定到實例數據。模型是在更改數據時更新視圖的純JavaScript對象。附加工具提供了scaffolding，路由，狀態管理，動畫等功能。

優點：

易于上手，普及度高；
起點簡單，但完成滿意度高；
依賴性小，性能好；

缺點：

是一個新項目，所以風險可能會很大；
依賴開發人員來更新；
相對同類框架，資源較少；

Backbone.js

Backbone.js是提供常見的服務器端框架MVC結構最早的客戶端選項之一，它唯一的依賴是由同一開發人員創建的Underscore.js。

Backbone.js聲稱是一個庫，因為它可以與其他項目集成，但我認為大多數程序員都認為它是一個框架。

優點：

體積小，重量輕，復雜度低；
不添加HTML的邏輯；
文檔豐富；
采用了許多應用，包括Trello，WordPress.com，LinkedIn和Groupon；

缺點：

與AngularJS等相比，抽象度較低；
需要額外的組件來實現數據綁定等功能；
新的框架基本已經不再采用MVC架構；

Ember.js

Ember.js是基于Model-View-ViewModel（MVVM）模式的框架之一。它在單個包中實現模板化，數據綁定和庫。如果 Ruby on Rails體驗的用戶，能夠迅速熟悉其配置概念。

優點：

為客戶端應用程序提供單一解決方案；
程序員可以快速開發—其使用jQuery；
良好的向后兼容性和升級選項；
采用了現代Web開發標準；

缺點：

與其他正在向較小組件結構移動的框架相比，被認為是單一的；
陡峭的學習曲線；

Knockout.js

較早的MVVM框架之一，Knockout.js使用觀察者來確保UI與底層數據保持同步，它具有模板和依賴關系跟蹤。

優點：

小而輕便，無依賴
支持回溯到IE6
優質文檔；

缺點：

較大的項目可能變得復雜；
發展速度已經放緩；
使用情況正在下降；

值得注意，下面這些項目雖然不如上面的受歡迎，但還是值得一試的：

Polymer- 可以跨瀏覽器支持HTML5網頁組件的庫

Meteor - 一個用于Web應用程序的全棧平臺。

Aurelia - 一種相對較新的，輕量級的跨平臺框架

Svelte - 一個將框架源代碼轉換為JavaScript的新項目

Conditioner.js - 一個基于狀態自動加載和卸載模塊的庫。

工具：General-Purpose Task Runners

構建工具可以自動執行各種Web開發任務，例如預處理，編譯，優化圖像，縮小代碼，運行測試等等。所有的任務都可以在一個可執行包中管理，比較受歡迎的工具包括：

Gulp.js

Gulp雖然不是第一個工具，但是它是最受歡迎的工具，Gulp使用易于閱讀的JavaScript代碼，將源文件加載到流中，并在將數據輸出到構建文件夾之前通過各種插件管理數據。

npm

npm是Node.js包管理器，但其腳本工具可用于運行通用任務。對于具有很少依賴關系的簡單項目來說，這是一個有吸引力的選擇，但是對于復雜的任務來說，它可能就有些有心無力。

Grunt

Grunt是第一個實現批量采用的JavaScript任務的工具，但其速度和復雜的JSON配置，使得Gulp異軍突起。如今，這些問題解決了，Grunt仍然是一個不錯的選擇。

工具：Module Bundlers

多個JavaScript文件的管理成為了程序員們的煩惱，在默認情況下，瀏覽器文件未被編譯，因此依賴關系必須以適當的順序加載或連接。雖然有各種選項，如ES6模塊和CommonJS，但瀏覽器支持畢竟是有限的，因此Module Bundlers就變得至關重要。

Webpack

Webpack支持所有流行的模塊選項，并已成為React開發的代名詞。雖然它聲稱是一個Module Bundlers，但是也可以用作通用任務運行程序。

Browserify

Browserify支持Node.js使用的CommonJS模塊，將所有模塊編譯成單個瀏覽器兼容的文件。

RequireJS

RequireJS是一種瀏覽器中的模塊加載器，它也可以在Node.js中使用。

Tools: Linting

“Linting”是分析你的代碼的潛在錯誤或偏離語法標準。有了這種工具，你永遠不出現只有一半括號或者未聲明變量的情況。

ESLint

ESLint是一種可插拔的Linting工具，每個規則都是一個插件，因此可以根據您的喜好進行配置。

JSHint

一個靈活的JavaScript linter，在真正的錯誤和迂腐的語法需求之間取得了很好的平衡！

JSLint

JSLint是最早的Linter之一，遵循一套嚴格的默認規則。

Tools: Test Suites

在應用程序的編寫過程中有一個很重要的步驟那就是代碼測試。代碼測試的工具有很多，如Ava、Tape和Jest。下面，我們就為大家介紹最受歡迎的三個選擇：

Mocha

Mocha是一個JavaScript測試框架，可以在Node.js或瀏覽器中運行測試。它支持異步測試，并且經常與Chai配對，以使測試代碼能夠以可讀取的方式表達。

Jasmine

Jasmine是一個行為驅動的測試套件，可以在瀏覽器中自動測試您的UI和交互。

QUnit

QUnit是一個單元測試框架，可以通過特定參數檢查函數結果。

Tools: Miscellaneous

雖然JavaScript比較常見常用，但是也并不是每個程序員都喜歡JavaScript，例如TypeScript，LiveScript和CoffeeScrip這些也可以使得程序員的開發過程很愉快。

JavaScript-powered HTML的引擎模板有數十種，其中包括Mustache，Handlebars，Pug（Jade）和EJS。但在我而言，更喜歡保留JavaScript語法（如EJS和doT）的輕量級選項。

如何自己來編寫文檔呢？ES2015兼容的文檔生成器包括ESDoc，JSDoc，YUIdoc，documentation.js和Transcription。

寫在最后

如果你想要走在技術的前端，那么React以及和其相關的技術發展方向值得關注。如果你想要為Web應用程序選擇一個安全的選項，那么你可以考慮Vue.js。

雖然整體框架現在不再那么受歡迎，但是如果你是要做嚴格的大型項目結構，AngularJS會是一個不錯的選擇。雖然，現在大多數人還在使用1.0版本，但是從長遠來看，學習一下TypeScript，選擇4.0版本會更加安全。

jQuery雖然在技術新聞中很少被提到，但是它的學習曲線平緩，幾乎所有的程序員都可以理解，而且它現在還在積極開發。

工具的選擇會因項目而異，但是不可否認，大多數項目都會選擇Gulp和WebPack。每個項目和團隊的技能都是不同的，所以你在選擇的時候要在有限時間內準確評估。

最后，永遠不要忘記庫，框架和工具是可選的！ JavaScript在過去的十年中發生了革命性的變化，幾乎每隔幾個月都會有熱門框架的出現，所以很容易就掉進陷阱之中。所以，在選擇時，就要考慮自己的實際需求，也要積極學習新的知識。

對html+js的傳統設計，現在很多網站都采用div&css+標簽化+模塊化的設計。模板引擎根據一定的語義，將數據填充到模板中，產生最終的HTML頁面。模板引擎主要分兩種：客戶端引擎和服務端引擎。

客戶端渲染：

模板和數據分別傳送到客戶端，在客戶端由JavaScript模板引擎渲染出最終的HTML視圖。將模板渲染放置在客戶端做，可以降低服務端的壓力，并且如果前端內容分別來自多個后臺系統，而這些后臺的架構各不相同（Java、.NET、Ruby等），則服務器端渲染需要采用不同的技術，模板資源無法共享。

服務端渲染：

引擎在服務器端將模板和數據合成，返回最終的html頁面，相對于客戶端渲染，數據存儲更加安全。主要有freemarker、velocity、thymeleaf等。

相較與其他的模板引擎，thymeleaf它有如下三個特點：

（a）在有網絡和無網絡的環境下皆可運行，即它可以讓美工在瀏覽器查看頁面的靜態效果，同時也可以讓程序員在服務器查看帶數據的動態頁面效果。這是由于它支持 html 原型，然后在 html 標簽里增加額外的屬性來達到模板+數據的展示方式。瀏覽器解釋 html 時會忽略未定義的標簽屬性，所以 thymeleaf 的模板可以靜態地運行；當有數據返回到頁面時，Thymeleaf 標簽會動態地替換掉靜態內容，使頁面動態顯示。

（b）開箱即用的特性。它提供標準和spring標準兩種方言，可以直接套用模板實現JSTL、 OGNL表達式效果，避免每天套模板、改jstl、改標簽的困擾。同時開發人員也可以擴展和創建自定義的方言。

（c）提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊，可以快速的實現表單綁定、屬性編輯器、國際化等功能。

1、新建項目sc-thymeleaf，對應的pom.xml文件如下

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>spring-cloud</groupId>
 <artifactId>sc-thymeleaf</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <packaging>jar</packaging>
 <name>sc-thymeleaf</name>
 <url>http://maven.apache.org</url>
 <parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>2.0.4.RELEASE</version>
 </parent>
 <dependencyManagement>
 <dependencies>
 <dependency>
 <groupId>org.springframework.cloud</groupId>
 <artifactId>spring-cloud-dependencies</artifactId>
 <version>Finchley.RELEASE</version>
 <type>pom</type>
 <scope>import</scope>
 </dependency>
 </dependencies>
 </dependencyManagement>
 <dependencies>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
 </dependency>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 </dependencies>
</project>

2、新建springboot啟動類

package sc.thymeleaf;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class ThymeleafApplication {
 public static void main(String[] args) {
 SpringApplication.run(ThymeleafApplication.class, args);
 }
}

3、新建配置文件application.yml

server:
 port: 8090
spring:
 application:
 name: sc-thymeleaf
 thymeleaf:
 cache: false

說明：thymeleaf所有的配置項可以參考類

org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties

常用配置說明：

# THYMELEAF (ThymeleafAutoConfiguration)

#開啟模板緩存（默認值：true）

spring.thymeleaf.cache=true

#Check that the template exists before rendering it.

spring.thymeleaf.check-template=true

#檢查模板位置是否正確（默認值:true）

spring.thymeleaf.check-template-location=true

#Content-Type的值（默認值：text/html）

spring.thymeleaf.content-type=text/html

#開啟MVC Thymeleaf視圖解析（默認值：true）

spring.thymeleaf.enabled=true

#模板編碼

spring.thymeleaf.encoding=UTF-8

#要被排除在解析之外的視圖名稱列表，用逗號分隔

spring.thymeleaf.excluded-view-names=

#要運用于模板之上的模板模式。另見StandardTemplate-ModeHandlers(默認值：HTML5)

spring.thymeleaf.mode=HTML5

#在構建URL時添加到視圖名稱前的前綴（默認值：classpath:/templates/）

spring.thymeleaf.prefix=classpath:/templates/

#在構建URL時添加到視圖名稱后的后綴（默認值：.html）

spring.thymeleaf.suffix=.html

#Thymeleaf模板解析器在解析器鏈中的順序。默認情況下，它排第一位。順序從1開始，只有在定義了額外的TemplateResolver Bean時才需要設置這個屬性。

spring.thymeleaf.template-resolver-order=

#可解析的視圖名稱列表，用逗號分隔

spring.thymeleaf.view-names=

其實完全可以使用不用配置，但是Spring Boot官方文檔建議在開發時將緩存關閉，默認為true

4、新建Controller

package sc.thymeleaf.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import sc.thymeleaf.model.User;
@Controller
public class UserController {
 @RequestMapping("/user/list")
 public String userList2(Model model) throws Exception {
 model.addAttribute("hello", "Hello, thymeleaf!");
 List<User> list = new ArrayList<User>();
 User u1 = new User();
 u1.setId(1);
 u1.setName("huangjinjin");
 u1.setAge(30);
 u1.setPosition("cto");
 list.add(u1);
 User u2 = new User();
 u2.setId(2);
 u2.setName("huang ge");
 u2.setAge(32);
 u2.setPosition("cco");
 list.add(u2);
 model.addAttribute("list", list);
 return "/user/list";
 }
}

5、新建模板文件

說明：Thymeleaf默認模板路徑在classpath:/templates/下

6、運行ThymeleafApplication.java類，啟動項目

7、在瀏覽器輸入http://127.0.0.1:8090/user/list

這里不深入講解Thymeleaf模板引擎的語法，如果想學習Thymeleaf的基本語法可以參考https://www.cnblogs.com/ityouknow/p/5833560.html或者自行找些資料學習

在線咨詢

上一篇：你不能錯過的創意CSS文字陰影效果第三彈
下一篇：HTML網頁制作常用標簽及說明-前端開發入門

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端開發：JavaScript 模板引擎（二）

您的項目需求