对于基于模板的前端框架的补充

简介: 上次我发了一个帖子,讨论了几种前端的实现方式,在此文中想针对模板方式进行一些补充。   其实说白了,这么多方式可以分为两类,一种是HTML在客户端组装,一种是HTML在服务端组装。 那么模板引擎也可以分成两类:   1) 客户端模板引擎,比如jtemplate。

 

上次我发了一个帖子,讨论了几种前端的实现方式,在此文中想针对模板方式进行一些补充。

 

其实说白了,这么多方式可以分为两类,一种是HTML在客户端组装,一种是HTML在服务端组装。

那么模板引擎也可以分成两类:

 

1) 客户端模板引擎,比如jtemplate。

在这里也有很多种实现方式:

  • 模板在客户端,数据源通过ajax请求而来
  • 模板和数据源都通过ajax请求而来
  • 模板和数据源都在客户端(在生成页面的时候动态把数据嵌入进去)

这种方式的优点是数据和呈现(小部分不涉及安全的业务逻辑)很好得分离(ashx可以和html分不同的物理服务器放置),缺点是SEO支持不好。

如果模板和数据源都在客户端的话,性能会非常不错。

当然,一般大家都会把模板放在客户端(也是由服务器输出,或者可以说是模板是静态的),数据通过ajax请求获取。

 

2)服务端模板引擎。

对于这种方式,我想进一步扩展介绍各种实现方式:

  • 运行时动态构建HTML的模板方式

运行时动态构建HTML的模板方式,就是在每一次请求的时候读取模板(可以在内存中缓存),然后为模板引擎(比如NVelocity)填充数据上下文,模板引擎按照规则把数据填充到HTML中去。

然后输出填充后的HTML,比如context.Put(“time”, DateTime.Now.ToSting()) ,为context的哈希表填充了一个键值对,这个值是固定的,就是一个时间点。

由于填充后的HTML的读者就是浏览器,而不会通过其它动态引擎构建,所以无法实现context.Put(“time”, “DateTime.Now.ToSting()”),让time的值是一段服务端代码的执行结果。

这种方式的缺点是使用不是特别灵活,我们只能为上下文绑定固定的值。

  • 结合Webform的编译时构建方式

比如,在编译的时候读取模板文件,然后把模板文件转换为输出服务端代码的ASPX文件,这个ASPX里面就是StringBuilder拼接的语句,其中静态的是HTML,而由于生成的是代码,所以内容其实是动态的代码,原理不多说了,参见此文。这种方式可以很好得和Webform结合使用,并且由于这个ASPX在编译时生成,生成出的代码又只是StringBuilder拼接,所以效率非常高,而且可以一样写CodeBehind(当然,不能操作控件)。由于其实生成的文件是ASPX(上面这种方式是从模板生成HTML,这种方式是从模板生成ASPX再通过Webform引擎生成HTML),所以可以使用Webform具有的很多其它特性(比如母板、用户控件、缓存)等等。

  • 上述方式的改进-结合Webform的运行时构建方式

对上述方式的改动,利用ASP.NET 2.0 VirtualPathProvider特性在运行时通过模板生成ASPX文件。比上面一个方案好的是,很灵活,不需要编译(或手工调用重新生成方法),修改模板后自动生成ASPX,也可以做很多自动化的扩展。在这里可以下载示例代码。

作者: lovecindywang
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
相关文章
|
23天前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
|
2月前
|
前端开发 JavaScript 开发者
超实用开源前端商城模板,助力电商项目飞速启航!免费直接可用!
分享一款精心设计的开源前端商城模板,涵盖商品展示、购物车、订单处理、用户登录注册等核心功能,使用HTML、CSS、JS和jQuery构建,结构清晰,适合新手和资深开发者,助力电商项目快速启动。
127 0
超实用开源前端商城模板,助力电商项目飞速启航!免费直接可用!
|
4月前
|
前端开发
前端使用xlsx模板导出表格
【9月更文挑战第10天】在前端使用 `xlsx` 模板导出表格需完成以下步骤:首先引入 `xlsx` 库,准备数据与模板;接着读取模板文件,选择特定工作表并填充数据;最后将填充后的表格转换为二进制数据,创建 Blob 对象并触发下载。整个过程中可根据需求调整模板格式和数据填充方式。
147 5
|
5月前
|
开发者 容器 Docker
JSF与Docker,引领容器化浪潮!让你的Web应用如虎添翼,轻松应对高并发!
【8月更文挑战第31天】在现代Web应用开发中,JSF框架因其实用性和灵活性被广泛应用。随着云计算及微服务架构的兴起,容器化技术变得日益重要,Docker作为该领域的佼佼者,为JSF应用提供了便捷的部署和管理方案。本文通过基础概念讲解及示例代码展示了如何利用Docker容器化JSF应用,帮助开发者实现高效、便携的应用部署。同时也提醒开发者注意JSF与Docker结合使用时可能遇到的限制,并根据实际情况做出合理选择。
53 0
|
6月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理
循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理
|
6月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
205 4
|
6月前
|
前端开发 JavaScript
前端框架与库 - Angular基础:组件、模板、服务
【7月更文挑战第16天】Angular,谷歌维护的前端框架,专注构建动态Web应用。组件是核心,包含行为逻辑的类、定义视图的模板和样式。模板语法含插值、属性和事件绑定。服务提供业务逻辑,依赖注入实现共享。常见问题涉及组件通信、性能和服务注入。优化通信、性能并正确管理服务范围,能提升应用效率和质量。学习组件、模板和服务基础,打造高效Angular应用。
74 1
|
6月前
|
JavaScript 前端开发
前端框架原理自测题:根据 JSX / Vue 模板写出 render 函数 / VNode
前端框架原理自测题:根据 JSX / Vue 模板写出 render 函数 / VNode
34 0
|
8月前
|
SQL 前端开发 JavaScript
前端vite+vue3结合后端node+koa——实现代码模板展示平台(支持模糊搜索+分页查询)
前端vite+vue3结合后端node+koa——实现代码模板展示平台(支持模糊搜索+分页查询)
181 4
|
8月前
|
前端开发 JavaScript C++
【掰开揉碎】Django模板 vs 前端框架:选择合适的渲染方式
【掰开揉碎】Django模板 vs 前端框架:选择合适的渲染方式
235 7

热门文章

最新文章