文档章节

不依赖服务端渲染模板,前端实现模板渲染加载问题的一些思考。

 弦理工作室
发布于 2017/04/26 14:49
字数 555
阅读 26
收藏 0

本猿服务端开发一枚,之前一直使用jsp或者freemarker等服务端渲染模板。前后端分离之后,便将json数据的渲染工作交给了js来做。相应选择的前端渲染模板便是腾讯的arttemplate,为什么选择arttemplat呢,主要是在使用agilelite前端框架中使用过一次,二来也是看到她良好的渲染性能(https://github.com/aui/art-template) 。采用arttemplate虽然做到了前端来渲染json数据。但却无法做到将页面的一些公共代码或者模块抽离出来做成一个模板页。这样就造成了我们页面里的头部或者底部就要在每一张页面内写一次(闹心啊。。)。这样的话工作量大且不利于维护。不知道前端开发是如何解决这个问题的。
    以下是我在前端模板加载实践中踩的一些坑,由于服务端解决页面模板的方案很在此就展开讨论了,本文仅讨论如何使用目前前端友好的方式来解决页面模板渲染加载问题:
    2月:采用 $.load() 来加载头部和底部。但发现加载进来的页面内的js无法执行(不知道大家有遇到这种情况没),故退回使用freemarker,产品顺利上线。
    3月:欲采用arttemplate的include的标签加载公共模板,但发现模板必须在同一页面内。想用script 标签将外部模板以js文件的方式引入。但尝试后以失败告终。(有用过arttemplate的include的可以交流一下下)。
    4月:打算采用iframe来加载局部模块(主要这个前端支持且成熟)。故找到了layer(layerui)。但是iframe天然的隔离性使得彼此之间的css和js不共享。而且iframe加载必须是一张相对完整的页面,加载部分代码段的效果不是很好。
    不知道大家是如何做模块加载的?

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 1
码字总数 555
作品 0
通州
高级程序员
私信 提问
加载中

评论(1)

oschina_lc
oschina_lc
同问此问题,对于不能将模板内容单独拆分出来很是郁闷,请问楼主有解决办法了吗?
Angular Prerender SEO实践

前导0 angular.js好用, 但是有一点不好的就是, 对于SEO不友好, 因为angular更适合于SPA单页面应用. 这样的话, 所有的html都是使用angular动态生成的. 因此搜索引擎就没有办法对整个网站进行索...

王春-海子
2016/08/20
25
0
【大前端之前后分离01】JS前端渲染VS服务器端渲染

前言 之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的;但是如何说服团队使用前端渲染方案却是一个...

范大脚脚
2017/11/08
0
0
基于koa+fis3+swig前后端isomorphic同构实现

  (认真把这篇文章看完,保证你会学到很多,如果没学到请联系作者或直接报警)   随着前端技术的不断变革,前端从后台吐页面 -> 前端MVC -> mvvm、react -> node直出 ->同构跨端的大致发...

ouven
2016/04/21
417
0
一种web编程的新的模板处理思路

目前web开发中充斥着各种各样的模板引擎,从前端到后端,性能优劣暂且不论,剖析其大体工作方式,可以概括为:实例化模板!也就是将Controller处理结果生产的Model数据通过模板引擎渲染View(...

hanzhankang
2013/11/07
0
4
前端和后端分工的三种模式

文章目录 [隐藏] 1. 在服务器端渲染 2. 在浏览器端渲染 3. 大前端模式 最近在捣腾前端的东西,学习了一下前端知识。因这方面的知识太浅薄了,这篇简陋的博客就当抛砖引玉。 在Web开发中,前端...

筱飞
2016/05/30
159
0

没有更多内容

加载失败,请刷新页面

加载更多

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
19分钟前
0
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
36分钟前
13
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
37分钟前
1
0
Confluence 6 文档主题合并问答

在 Confluence 官方 前期发布的消息 中,文档主题在 Confluence 6.0 及其后续版本中已经不可用。我们知道你可能对这个有很多好好奇的问题,因此我们在这里设置了一个问答用于帮助你将这个主题...

honeymose
今天
2
0
java框架学习日志-2

上篇文章(java框架学习日志-1)虽然跟着写了例子,也理解为什么这么写,但是有个疑问,为什么叫控制反转?控制的是什么?反转又是什么? 控制其实就是控制对象的创建。 反转与正转对应,正转...

白话
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部