文档章节

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

 弦理工作室
发布于 2017/04/26 14:49
字数 555
阅读 24
收藏 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
前端和后端分工的三种模式

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

筱飞
2016/05/30
159
0
一种web编程的新的模板处理思路

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

hanzhankang
2013/11/07
0
4

没有更多内容

加载失败,请刷新页面

加载更多

Bash重定向详解

Bash重定向详解 Bash的重定向指的是将命令的输入和输出导向不同地方,而不是默认的标准输入、标准输出和标准错误。Bash的重定向实际上是对标准输入、标准输出和标准错误的重置,进而将所需输...

小陶小陶
今天
3
0
EventBus原理深度解析

一、问题描述 在工作中,经常会遇见使用异步的方式来发送事件,或者触发另外一个动作:经常用到的框架是MQ(分布式方式通知)。如果是同一个jvm里面通知的话,就可以使用EventBus。由于Event...

yangjianzhou
今天
6
0
OpenCV图像处理实例:libuv+cvui显示摄像头视频

#include <iostream>#include <opencv2/opencv.hpp>#define CVUI_IMPLEMENTATION#include <cvui.h>extern "C"{#include <uv.h>}using namespace std;#define WINDOW_NAM......

IOTService
今天
3
0
openJDK之JDK9的String

1.openJDK8的String 先来看下openJDK8的String的底层,如下图1.1所示: 图1.1 底层上使用的是char[],即char数组 每个char占16个bit,Character.SIZE的值是16。 2.openJDK9中的String 图2.1...

克虏伯
今天
4
0
UEFI 模式下如何安装 Ubuntu 16.04

作者:知乎用户 链接:https://www.zhihu.com/question/52092661/answer/259583475 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 针对UEFI模式下安装U...

寻知者
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部