FrontEnd前端文件架构

前端基本要求：

基础框架jquery1.11+bootstrap3.2

引入js模板

模块化设计（需要做到）

可以复用js组件

前后端分离

支持H5，并做好浏览器兼容

 

FrontEnd前端文件架构

~CSS文件说明

Assets文件夹

Assets/css：

- base  base.css基本样式、common.css公用样式 bootstrap.min.css框架样式

- theme  default默认主题样式

- main.css主框架样式

Assets/images图片资源

Assets/resources  第三方资源，包括插件，框架等

Assets/scripts  脚本文件，包括基本base、前端组件components、JS库jQuery，交互效果、兼容浏览器IE，

 

View视图文件

Accounts   账户注册登录

Enterprise  客户管理

Statistics  数据统计

System       系统角色

-   工作台

Index.shtml   内部

IndexUser.shtml客户端

IndexManage.shtml管理端

 

 

~CSS命名规则

参考下面【CSS通用命名规则】

1)目前平台以logo暗红色为主色，界面中含有主色的布局标签应放在Assets/theme/default/skin.css

 

2)平台共用的样式都归纳到assets\css\base\common.css,如：按钮、表单录入。

 

3) 注释模块方便查找，模块内部公用的样式放置模块样式顶部并注释区分开，且以模块前缀命名。

 

4) 父样式下面的子样式命名方式，如：父样式名:.menu-log-list,子样式名：.log-list-ul{} 或元素标签span{},p{}；样式名称层级不宜超过3级

 

5) 平台以扁平化标准为主，尽量使用font-awesome图标、CSS3渐变，圆角等简单效果

 

6) 雪碧技术，样式中的图标或背景图，每个模块应组合成一张图片，然后统一引用该图片，通过background-position来定位。

 

7) 元素ID不宜作为样式命名, 所有class两个单词之间的链接采用中划线式命名法，如: mian-nav

 

8) 在书写样式的过程中，当发现其它模块已有该样式，应把该样式移入Common模块中，以便公用。

 

 ..........

 

~JS插件命名规则参考

1.公共函数使用Pascal命名，其参数采用Camel命名  “Public(dataObject)”

2.函数内部私有方法，建议以下划线并结合Camel命名方式命名。“_privateFunction”

3.注意函数注释       “//”

4.命名规则请使用英文单词命名

局部变量是驼峰命名方法      “varibleNum”

FIRSTCHILD 用来命名常量 “FIRSTCHILD”

函数名也用驼峰命名       “weeTry”