回顾

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

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

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

前端模块嵌套问题

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

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

index首页模块：

1 
2   5 

type模块：

 1 

 2      3     
•  4         
   5         
   6              7                 
  •  8                      9                 
  10             11         
  12     
13     14 

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

 1 

 2      3     
•  4         
   5         
   6         
   7           10         
  11         
  12     
13     14 

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

1 2     

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

① 唯一的dom容器

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

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

迭代模块

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

 1 

 2    3   
•  4     

   5       

   6     
   7  8       
  "> 9         16       
  17 18     
  19   
20   21 

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

 1 

 2    3   
•  4     

   5       

   6     
   7         , 9           value: ,10           name: 'data_inner',11         }); %>12     
  13   
14   15 

1 , //索引，整数或者字符串3   value: , //对应数据对象，字符串或者json对象4   name: 'data_inner',5 }); %>

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

 1 "

 2    3   
•  4     

   5       电脑

   6     
   7  8       
   9         16       
  17 18     
  19   
20   21   
• 22     

  23       书籍

  24     
  25 26       
  27         34       
  35 36     
  37   
38   39   
• 40     

  41       游戏

  42     
  43 44       
  45         52       
  53 54     
  55   
56   57 

View Code

 1 

然后前端方法的实现为：

 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; 9 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 }

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

结语

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