此文为大家整理一些实用的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小时内与您取得联系。