此文為大家整理一些實用的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或者自行找些資料學習
*請認真填寫需求信息,我們會在24小時內與您取得聯系。