前端界面规范

# 前端界面规范 #

-------------------

### HTML ###

 

* HTML的参数统一使用双引号“”声明。

 

* HTML标签应遵循语义化的原则，合理使用article section h1~h6 p div dd dt dl table tr td form input button。

 

* HTML禁止内联样式，必须写到样式文件中

 

* HTML涉及资源地址展示都应该使用cdn函数来获取地址 

 

### ejs ###

 

* 页面文件采用`snake case`作为命名规则，即单词以下划线分割（这遵循前端及restful全小写的基本原则）

 

* 所有项目的页面文件放在`template`根目录下

 

* 所有ejs模板放在`template/include`目录下（include目录下的ejs，构建时不编译，否则会报错）

 

* 所有模板（包括ejs模板和angular模板都需要采用下划线`_`开头，如_header.ejs，_form.ejs）

 

* 不同模块的模板文件建议单独建一个文件夹管理

 

* 路径采用相对路径

 

 

### JS ###

 

* javascript采用`require`作为AMD模块引入

 

* javascript函数、变量采用小驼峰命名法，首字母小写。如doClick()

 

* 类、常量类采用大驼峰命名法，首字母大写，如Apple。

 

* 常亮采用全大写，用下划线“_”作为单词分割。

 

* 代码必须分号结束，包括json定义，内部方法定义等。

 

* js代码拼接HTML代码时，最外层用单引号，HTML代码的参数保持使用双引号。如var html='<input type="text">';

 

* 对象私有成员、私有方法采用下划线（_）作为前缀，如_id

 

尽可能不直接声明全局变量，需要使用全局变量时也应该声明一个专用的全局对象存放变量如var Global={FLAG:true,FLAG_2:false};

 

### 页面重构 ###

 

* 页面采用rem等比缩放进行屏幕自适应，UI设计标准尺寸为iphone6屏幕即750*1334

 

* `viewport`不用写，用`flexible.js`进行自适应

 

* 页面尺寸以`rem`为单位

 

* 页面基本px转换：以iphone6尺寸为准，宽750转为7.5rem，即一个在iphone6屏幕下展示100px宽度的元素，需要换算成1rem。

 

### less ###

 

* 项目采用全部样式分文件编写，统一编译压缩到`app.less`中

* 名词解释

* lg 大 sm 中 xs 小