当前位置: 首页 > 工具软件 > frontend > 使用案例 >

FrontEnd前端文件架构

蔚宏大
2023-12-01

前端基本要求:

基础框架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”

 类似资料: