Comment工程业务文档

comment业务文档

本文档仅供参考,实际请以线上业务为准

本文档主要介绍了线上业务对应页面资源(html)及静态资源(js/css)情况,以便新来者更快的熟悉 comment 工程。

大体结构介绍

comment 工程首先分为 pcmobile 两个大部分,对应电脑端和移动端,由于历史遗留问题, html 页面托管在 svn ,内嵌在后台业务中,尚未完全分离,所以新增或修改页面,就需要小伙伴们稍微懂点 ecalips ,从 svn 拉下对应工程进行操作。而静态资源 js/css 已经托管到 git

html

comment 工程的 html 放在 ShowJoy-Comment-View 中,其他工程的页面资源也都遵循此命名规范,通过名称很容易从 svn 找到对应工程。先来看一下这张图,对此工程的结构做一些了解:

image

其中常用的是 page wap common/layout common/config 这四个文件夹。

  • page 代表的是电脑端的页面
  • wap 代表的是移动端的页面
  • common/layout 其中是一些公共头和公共脚文件
  • common/config 其中是一些配置信息

接下来对着四个目录进行比较详细的解释:

page

image

这个比较简单,存放的就是线上页面对应的html代码文件,需要注意的是所有html文件中都用了(不限于comment工程) java 中的 velocity 模板引擎,其实就是一个模板语法,用来在页面中填充数据,进行一些循环之类的操作。

wap

image

这个稍微复杂些,首先是 wap/page/comment 下依然是线上页面对应的html代码文件。

然后需要注意的是 wap/common/layout 下的 head.htmlfoot.html 文件, head 中引入了每个小页面需要的配置文件( velocity 模板变量配置)及公共头文件(基本每个线上wap页面都需引入,其中包含了公共css、js、微信配置等,以及当前页面的私有css文件) , foot 中引入了每个小页面需要的私有脚本文件及公共脚本文件。

common/layout

image

这里面的是 pc 页面所需的公共头,公共脚,私有头,私有脚信息。

common/config

image

这里面记录了 wap 端及 pc 端的 velocity 变量配置信息。

js、css

现在所有静态资源都已经托管在 git 中,各个工程的静态资源都在 showjoy-assets 项目中,比如 comment 业务,在此项目中分别为 comment-m (移动端), comment-p (电脑端)

这里相对比较容易理解,简要介绍一下。

image

comment-m 来说,其中分为 buildsrc 两个主要目录

src

  • pages 目录,其下包含了 comment 工程中的每个小工程,即每个页面,一个页面一个文件夹,此文件夹下有该小工程的 js、css、less 文件。
  • mixins 目录,此目录下包括了需要引用的less模板文件
  • components 目录,此目录包括了需要引用的本工程独需的js组件。

    build

此目录是经过压缩后的业务静态代码文件,也就是线上真正引用的静态资源。

如何确认html位置

开发中遇到的小问题是,线上链接的名字与html文件名字不对应,如何快速找到html文件是需要一点小窍门的,我是这么做的,举个例子:当前页面链接为 http://comment.showjoy.com/comment/317268.html ,我通过查看当前页面引用资源的链接,比如引用的css链接为 http://cdn1.showjoy.com/assets/f2e/showjoy-assets/comment-p/0.0.2/comment-detail/comment-detail.min.css ,那么html的名字便为 commentDetail.html .

第一次整理,有问题欢迎提出~

怀朔

继续阅读此作者的更多文章