整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端开发: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或者自行找些资料学习