F1V3.0-13 UI模块开发规范

1 引言

1.1 编写目的

为提高团队协作效率，方便多个前端开发人员开发同一个前端模块，需要对前端开发进行一定的规范约束。前端开发人员需要按照本文档中制定的规范进行开发。

2 模块划分原则

• 业务功能模块划分依据为所实现的功能不同，不同的业务功能划分到不同的模块之中，同平台2.x的bundle划分方式相似。
• 需要前台的bundle和后台的服务最好进行一一对应，这样可以为查看和修改提供便利。
• 业务模块和基础功能模块需要分开，使得对项目开发的时候编写的代码不会污染到整体的基础组件、基础功能，防止在其他地方使用的时候出现未可知的问题。
• 相同的功能需要提取到一个公共模块中方便多个模块进行调用。

3 命名规范

3.1 模块命名规范

模块的命名需要按照已有的基础业务模块命名规范来，即为（项目名）_（功能模块名）_bundle。例如：配售电项目下的历史数据模块可以命名为PSD_historydata_bundle或者PSD_LSSJ_bundle

3.2 HTML、JS、CSS文件命名规范及代码开发规范

• HTML，JS，CSS文件命名统一使用小写的英文字母，数字和下划线的组合，不得包括汉字空格和特殊字符，例如历史“历史数据”页面可以命名为historydata.html
• 建议使用英文命名，命名建议文件名称不要过长，可以简化某些单词的拼写，比如production可以缩写为pro。或者使用中文拼音的首字母，例如设备维护页面可以使用SBWH.html来命名。
• 开发人员自己开发的组件建议使用jquery.f1.（组件名）.js的方式进行命名。

原则为只要多个开发人员可以容易辨别文件内容和功能即可。前端代码开发规范请见HTML、CSS、JS代码编写规范。

4 目录规范

对前端进行开发的时候，因为前端里面的文件需要使用gulp进行打包压缩，所以需要对模块的目录结构进行一定的约束。当然为了方便查看，也有一些非强制的约束。

首先根据自己的模块功能创建一个文件夹，这里以平台模块起名为例F1UI_example_bundle，在文件夹中创建一个src文件夹，这个文件夹中放的是所有的项目文件。

这里说明一下，不需要手动创建dist文件夹，使用gulp进行打包的时候会自动创建。dist文件夹中是打包之后的文件。下面列举一下src文件夹下的目录结构：

• css中存放CSS文件
• images中存放图片文件
• scripts中存放JS文件
• views中存放HTML文件

在文件夹中可以根据自己的需求，再对目录进行规整。例如：“类型维护”建立一个文件夹“LXWH”在其中存放类型维护的对应文件，“数值计算”建立一个文件夹“SZJS”在其中存放数值计算的对应文件。
这里建议的是建一个module文件夹用来存放公共的文件。比如说a页面和b页面都对example.js文件进行了引用，那么example.js文件建议放在module文件中。

平台基础组件目录结构可以查看平台三方包模块化

5 配置规范

这里主要介绍开发人员如何对nginx中的配置文件进行配置。配置的位置主要有：

• listen：为监听的端口，为防止和其他端口冲突，建议使用8088端口
• server_name：监听的地址，为本机的ip地址，或者可以写127.0.0.1或者localhost。
• $switch：修改文件索引路径，src为生产环境，dist为开发环境
• $rootpath：bundle的根目录，到f1-platform-module这层，例：E:\work\F1V3.0\f1-platform-modules
• $zuulPath：zuul的地址，为ip地址加端口号
• $authorizationServicePath：uaa授权服务器地址，为ip地址加端口号
• $indexPath：index的配置，输入地址，默认打开的页面为bundle名加路径，例：permission/views/team1/enter.html。
  在开发人员创建自己的模块之后，同样要在nginx的配置文件中进行路由的添加。在配置文件中增加，这里我们以example模块为例，设定该路由模块的名称为example。

例：

//example微服务location ^~ /example/ {    set $temple $extend;    alias $rootpath/F1UI_example_bundle/$temple/;    if (!-e $request_filename) {        set $temple $switch;    }}