个人比较关注的一个问题 #2

mote-ice · 2018-08-31T02:02:17Z

我是昨天看见这个脚手架,翻看了一边文档后,发现在jQ项目下没有看见页面公共部分(例如头尾)复用的解决方案,我其实就是奔着这个来的.因为公司项目需求,公用部分较为多,且都是jQ+handlebarsjs的中大型项目. 手写了一个 compile-ejs-loader 实现的复用但是不是很理想也可能初次写思路不是很正确. 所以对于前后端分离的jQ项目的页面公共部分复用想找一下好的思路,不知道 cyb 会不会开发此项配置

zhaohuijian · 2018-08-31T07:03:39Z

我们这边也有jQ+handlebars的项目，处理项目中的公共模块的方法是在业务结构里，CYB的架构模式是业务逻辑和工程构建完全分开，便于工程工具不止服务于一个项目。

类似如下目录结构：

src
└── views
    ├── article
    │   ├── index.html
    │   ├── index.js
    │   └── module
    │       └── detail
    │           ├── index.hbs
    │           ├── index.js
    │           ├── jumbotron.hbs
    │           └── service.js
    ├── index
    │   ├── index.html
    │   ├── index.js
    │   └── module
    │       ├── fezdesc
    │       │   ├── index.hbs
    │       │   ├── index.js
    │       │   └── service.js
    │       └── jumbotron
    │           ├── index.hbs
    │           ├── index.js
    │           └── service.js
    ├── list
    │   ├── index.html
    │   ├── index.js
    │   └── module
    │       ├── jumbotron
    │       │   ├── index.hbs
    │       │   ├── index.js
    │       │   └── service.js
    │       └── listing
    │           ├── index.hbs
    │           ├── index.js
    │           └── service.js
    └── public
        ├── demo-data.js
        ├── module
        │   ├── footer
        │   │   ├── index.hbs
        │   │   ├── index.js
        │   │   └── service.js
        │   └── header
        │       ├── header.hbs
        │       ├── index.js
        │       └── service.js
        └── utils
            └── url-param.js

以上index、list、article都有共同的header和footer模块，把公共模块存放在public目录，每个模块都高内聚、拥有自己的数据处理(service.js)、视图(index.hbs)和渲染逻辑(index.js)。

public/module/header/index.js

模块级别的逻辑入口，编写模块内所有的业务逻辑。

// public/module/header/index.js

import temp from './header.hbs';
import Service from './service';
import Q from 'q';

export default ($box = $("body")) => {
  let tempData = {};
  Q.all([
    Service.siteName(),
    Service.navList()
  ]).then((data) => {
    tempData.sysName = data[0];
    tempData.nav = data[1];
    $box.html(temp(tempData));
  });
}

public/module/header/index.hbs

即handlebars模板文件，用于渲染模块dom。

// public/module/header/index.hbs

<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">{{sysName}}</a>
  </div>
  <div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      {{#each nav}}
      <li><a href="{{href}}">{{name}}</a></li>
      {{/each}}
    </ul>
  </div>
  <!--/.nav-collapse -->
</div>

public/module/header/service.js

用于接口逻辑和数据格式的封装，向上屏蔽接口的变化，保证视图层渲染的稳定。

// public/module/header/service.js

import Q from 'q'
import ApiData from 'views/public/demo-data'

export default {
  navList() {
    return Q.Promise((resolve, reject) => {
      resolve(ApiData.common.navData)
    })
  },
  siteName() {
    return Q.Promise((resolve, reject) => {
      resolve(ApiData.common.siteName)
    })
  }
}

每个页面的index.html只编写基本的html结构

// 比如：article/index.html

<body>
  <!-- header -->
  <nav class="navbar navbar-inverse navbar-fixed-top" id="js-header"></nav>
  <!-- jumbotron -->
  <div class="jumbotron">
    <div class="container" id="js-jumbotron"></div>
  </div>
  <div class="container">
    <!-- fezdesc -->
    <div class="row" id="js-fezdesc">
    </div>
    <hr>
    <!-- footer -->
    <footer id="js-footer"></footer>
  </div>
  <!-- inject:vendor:js -->
  <!-- endinject -->
  <!-- inject:common:js -->
  <!-- endinject -->
  <!-- inject:page:js -->
  <!-- endinject -->
</body>

然后通过页面的入口js在页面中渲染各个模块

// 比如： article/index.js
import $ from 'jquery'

import header from 'views/public/module/header'
header($("#js-header"))

import footer from 'views/public/module/footer'
footer($("#js-footer"))

import jumbotron from './module/jumbotron'
jumbotron($("#js-jumbotron"))

import detail from './module/detail'
detail($("#js-detail"))

无论多么复杂的jQuery项目，借助ES6的模块化，制定一些基本规则，都能让复杂的项目化繁为简。

zhaohuijian self-assigned this Aug 31, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

个人比较关注的一个问题 #2

个人比较关注的一个问题 #2

mote-ice commented Aug 31, 2018

zhaohuijian commented Aug 31, 2018

个人比较关注的一个问题 #2

个人比较关注的一个问题 #2

Comments

mote-ice commented Aug 31, 2018

zhaohuijian commented Aug 31, 2018