文档章节

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

 弦理工作室
发布于 2017/04/26 14:49
字数 555
阅读 23
收藏 0
点赞 0
评论 1

本猿服务端开发一枚,之前一直使用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
移动端开发者眼中的前端开发流程变迁与前后端分离

本文作者:伯乐在线 -bestswifter 。未经作者许可,禁止转载! 欢迎加入伯乐在线专栏作者。 写在最开始 这是一篇面向移动端开发者的科普性文章,从前端开发的最初流程开始,结合示范代码,讨...

伯乐在线
2016/08/20
0
0
聊一聊前端模板与渲染那些事儿

欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码): http://my.oschina.net/MrHou/blog?catalog=477313&temp=1466755903794 1 页面级的渲染...

侯禹
2016/07/02
655
0
B站的前端之路

摘要:2017年即将过去了,总结一下B站的前端进阶之路过去的开发模式中,我们采用了以后端为主的 MVC 架构方式。具体来说,每次项目评审后,前后端会先一起约定好接口,之后分别进行开发,开发...

Crazy
01/04
0
0
Node后端数据渲染

引言:对于前端开发者来说,在大型Web应用开发中,很多时候并不需要完全重新设计整个应用后台的架构,更多的情况下需要结合Node的能力帮助我们解决前后端分离开发模式下无法解决的问题。本文...

博文视点
2017/05/08
0
0
前端 服务器端渲染和客户端渲染

1.服务器端渲染 服务器端通过页面模板和数据生成HTML页面,返回给客户端。页面模板保存在服务器端,数据通过业务逻辑生成。 优点 传统而已 缺点 如果服务器端由多种语言Nodejs,Ruby,Pytho...

sl_yang
2016/06/16
314
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
5
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
1
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
165
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部