detachjs v1.3.0

web前后端半分离组件 - detachJS

0. 安装

npm install detachjs

1. 背景

前段时间的工作中，遇到一个需求，大致内容如下：

Q：某应用可见权限功能开发。

A：看了一下待开发的工程，主要发现了以下问题：

1. JSP + JS和CSS内外联、内嵌

2. 前端修改了jsp的布局样式需要重新部署到服务器，才能看到效果，不利于开发过程中的调试，失去了前端所见即所得的优势

3. JSP页面嵌入了大量的EL表达式和JSP标签不便于前端理解，这样前后端分工不明确，以致于工作效率较低

基于以上分析：

1. 如果我们采用（前后端完全分离）JSP改为html，采用restful架构通过JSON交换数据，js渲染视图层（复杂度高，成本高，不推荐）。

2. 如果我们采用（前后端半分离）JSP页面解耦为DOM框架，通过js动态加载html模板，EL表达式和JSP标签问题可采用html模板引擎对接（复杂度中低，成本中低，具体根据业务场景决定是否分离以及分离程度，寻找平衡，权衡利弊）

综上所述，提出了本文中前后端半分离的这种思想。

• 工程重构过程

  1. 原有工程代码 jsp页面

     <ul>
         ...
         <li>
             <a href="#app_tab">应用信息</a>
         </li>
         ...
     </ul>
     <div>
         <table>
             <!--jsp页面html和jsp标签以及EL表达式混合内容，部分可能含有java片段-->
             ...
         </table>
     </div>

  2. 新增加的功能如下

     <ul>
         ...
         <li>
             <a href="#app_tab">应用信息</a>
         </li>
         <!--新增加功能开始-->
          <li>
             <a href="#app_permission">可见权限配置</a>
          </li>
          <!--新增加功能结束 -->
         ...
     </ul>
     <div>
         <table>
             //jsp页面html和jsp标签以及EL表达式混合内容，部分可能含有java片段
             ...
         </table>
     </div>
     <!--新增加功能-->
     <div></div>

  3. 要增加的功能界面

     

     把界面的布局放到app_permission.html模板中，然后异步加载html模板到web容器中，即可

     

  4. 开发调试带来的便利

     经过改造，模板通过ajax加载，然后我们可以用fiddler做本地替换，达到开发过程中所见即所得的效果。

     （图1——浏览器http请求图）

     

     （图2——fiddler http请求抓取）

     

  5. 半分离改造后的优势

  • 半分离改造灵感来源于SPA应用框架Angularjs (具有可行性，有理论和实践作支撑)

  • 按需加载

  • 减轻后台服务器压力

  • 页面结构清晰，而且方便页面实现组件化

  • 开发过程中，修改或增加页面无需重新部署

  • 利于单元测试

    注：由于js加载页面，会导致搜索引擎蜘蛛程序搜不到模板，对SEO有要求的网站应用要适当的采取此方法进行分离

2. detach组件使用

• 首先引入

  <script src="detach.min.js"></script>

• 然后直接调用

  Detach.init({
      ...
  });

3. detach组件API

注意事项

tpl.html中引入的外链css和js以tpl.html所在目录为参考目录，进行相对路径的引用。