大前端之前后分离02】前端模板嵌套问题

顾

接上文：【大前端之前后分离01】JS前端渲染VS服务器端渲染，我们探讨了为什么要做前后分离，以及前端渲染需要解决的问题，最后提出了自己的解决方案：

前端代码编译形成两套代码：①前端发布版本 + ②服务器端脚本

这个想法借鉴了fis plus的smarty模块化思维，以及reactJS编译运行的概念，上次初步论证了其可行性，也遗留了一些问题，其中比较关键的问题是：

前端模块嵌套问题

我们在一个模板中又有一个widget，在子模板中又有一个widget，父模块与子模块中有数据依赖，或者子模块为一个循环，循环却依赖父模块某个值，这个便很麻烦。

举个例子来说，我们首页引入了一个商品模块，商品类型模块为一循环模块，里面又有子模块：

index首页模块：

1 <div id="type_widget_wrapper">

2 <script type="text/javascript">

3 render('text!./template/type.html', './model/type', './controller/type', 'type_widget_wrapper');

4 </script>

5 </div>

type模块：

复制代码

1 <ul id="type_id">

2 <% for (var i = 0, len = data.length; i < len; i++) { %>

3 <li class="type js_type">

4 <h2><%=data[i].name%></h2>

5 <ul class="product_list">

6 <% for (var j = 0, len1 = data[i].product.length; j < len1; j++) { %>

7 <li class="product">

8 <%=data[i].product[j].name%>

9 </li>

10 <% } %>

11 </ul>

12 </li>

13 <% } %>

14 </ul>

复制代码

可以看到，其中有第二次循环迭代的将该类型的商品信息读出，如果我们想将商品信息模块化的，这里便出现了模块嵌套情况：

复制代码

1 <ul id="type_id">

2 <% for (var i = 0, len = data.length; i < len; i++) { %>

3 <li class="type js_type">

4 <h2><%=data[i].name%></h2>

5 <ul class="product_list">

6 <div id="product_list_widget_wrapper">

7 <script type="text/javascript">

8 render('text!./template/product_list.html', './model/product_list', './controller/product_list', 'product_list_widget_wrapper');

9 </script>

10 </div>

11 </ul>

12 </li>

13 <% } %>

14 </ul>

复制代码

这里暂时不考虑子模块中还有异步数据请求问题，我们将列表对应的模板放到了单个文件中：

1 <% for (var j = 0, len1 = data[i].product.length; j < len1; j++) { %>

2 <li class="product">

3 <%=data[i].product[j].name%>

4 </li>

5 <% } %>

这里的循环解析便是我们今天研究的重点，因为前端模块至少需要两个条件：

① 唯一的dom容器

② 能获取父级模块的相关数据

为了解决这个问题，我这里提出了迭代模块的概念。

迭代模块

所谓迭代模块，便是用于数据内嵌形式，并且处于循环中的模块，比如上述例子，我整个type模板就变成了这样（这里为最简形式）：

复制代码

1 <ul id="type_id">

2 <% for (var i = 0, len = data.length; i < len; i++) { %>

3 <li class="type js_type">

4 <h2>

5 <%=data[i].name%></h2>

6 <ul class="product_list">

8 <div id="data_inner_widget_wrapper_<%=i %>">

9 <script type="text/javascript">

10 iteratorRender({

11 index: typeof <%=i%> == 'string' ? '<%=i%>' : <%=i%>,

12 value: <%=JSON.stringify(data[i])%>,

13 name: 'data_inner'

14 });

15 </script>

16 </div>

18 </ul>

19 </li>

20 <% } %>

21 </ul>

复制代码

这个是编译过后形成的前端代码，最初是这样的：

复制代码

1 <ul id="type_id">

2 <% for (var i = 0, len = data.length; i < len; i++) { %>

3 <li class="type js_type">

4 <h2>

5 <%=data[i].name%></h2>

6 <ul class="product_list">

7 <%iteratorWidget({

8 index: <%=i%>,

9 value: <%=JSON.stringify(data[i])%>,

10 name: 'data_inner',

11 }); %>

12 </ul>

13 </li>

14 <% } %>

15 </ul>

复制代码

1 <%iteratorWidget({

2 index: <%=i%>, //索引，整数或者字符串

3 value: <%=JSON.stringify(data[i])%>, //对应数据对象，字符串或者json对象

4 name: 'data_inner',

5 }); %>

这个时候前端需要实现iteratorRender方法，首先前端模板将上述代码解析结束后是这个样子的：

View Code

复制代码

1 <li class="type js_type">

2 <h2>

3 电脑</h2>

4 <ul class="product_list">

6 <div id="data_inner_widget_wrapper_0">

7 <script type="text/javascript">

8 iteratorRender({

9 index: typeof 0 == 'string' ? '0' : 0,

10 value: { "id": 1, "name": "电脑", "product": [{ "name": "戴尔" }, { "name": "苹果" }, { "name": "联想" }, { "name": "华硕"}] },

11 name: 'data_inner'

12 });

13 </script>

14 </div>

16 </ul>

17 </li>

复制代码

然后前端方法的实现为：

复制代码

1 //最简单实现，仅考虑渲染，不严谨

2 var iteratorRender = function (opts) {

3 var name = opts.name;

4 var index = opts.index;

5 var data = typeof opts.value == 'string' ? JSON.parse(opts.value) : opts.value;

6 var wrapperId = name + '_widget_wrapper_' + index;

7 var template = 'text!./template/' + name + '.html';

8 var controller = './controller/' + name;

10 require([template, controller], function (tpl, view) {

11 var html = $(_.template(tpl)(data));

12 var wrapper = $('#' + wrapperId);

13 html.insertBefore(wrapper);

14 wrapper.remove();

15 //执行控制器

16 view.init();

17 });

18 }

复制代码

然后代码运行，逻辑跑通了：

结语

由于最近工作强度上来了，解决了前端渲染时候的模板嵌套问题，一直拖到了今天，服务器端的模板嵌套更好处理，该方案后续会继续细

本文转自叶小钗博客园博客，原文链接http://www.cnblogs.com/yexiaochai/p/4492170.html，如需转载请自行联系原作者

大前端之前后分离02】前端模板嵌套问题相关推荐

【大前端之前后分离01】JS前端渲染VS服务器端渲染
前言之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的:但是如何说服团队使用前端渲染方案却是一个现 ...
WEB前端大作业-蓝色金融服务响应式网页模板.md
主页:搞前端的半夏简介:前端领域优质创作者.扫码或搜索添加文末公众号「搞前端的半夏」:
前端分离的前端开发工具_使我成为前端开发人员工作的工具和资源
前端分离的前端开发工具 Learning front-end development can be a bit overwhelming at times. There are so many res ...
618 大促背后的淘系前端技术体系
简介:2020年618大促已经过去,作为淘系每年重要的大促活动,淘系前端在其中扮演着什么样的角色,如何保证大促的平稳进行?又在其中应用了哪些新技术? 淘系技术特此推出「618 系列|淘系前端技术分享」 ...
【学习日记2023.4.25】之前后端分离_前端工程化_Vue组件库Element_Vue路由_打包部署
文章目录 1. 前后台分离开发 1.1 前后台分离开发介绍 1.2 YAPI 1.2.1 YAPI介绍 1.2.2 接口文档管理 2. 前端工程化 2.1 前端工程化介绍 2.2 前端工程化入门 2. ...
02前端入门HTML5 +CSS3+电商网页制作：CSS
02前端入门HTML5 +CSS3+电商网页制作 0 来源 1 CSS基础 1.1 基础认识 1.1.1 css demo 1.1.1 css的层叠性 1.2 CSS引入方式 1.3 选择器 1.4 ...
架构 | 前后端分离与前端工程化
文章目录前言前后端分离核心对开发行为和职责的直接影响前端工程化本地代理与ngix反向代理 node是什么,有什么特点,与前后端分离,前端工程化的关系 node,npm,package.js ...
数据可视化大屏酷炫秘籍之前端开发者自己动手
数据可视化大屏酷炫秘籍之前端开发者自己动手数据可视化大屏的酷炫效果相信大家都已经见识到了经常是这样的: 或者是这样的又或者是这样的如此酷炫的大屏效果,要想完全复原首先离不开以下步骤: 设计师精确 ...
软件开发全套视频教程汇总（javaSE，javaEE，linux,android开发，C# ,web前端，大数据云计算，数据挖掘,web前端，php开发，UI设计，C++开发，3D视频）
软件开发全套视频教程汇总(javaSE,javaEE,linux,android开发,C# ,web前端,大数据云计算,数据挖掘,web前端,php开发,UI设计,C++开发,3D视频) 这是我以前学 ...

大前端之前后分离02】前端模板嵌套问题

大前端之前后分离02】前端模板嵌套问题相关推荐

最新文章

热门文章