前端编码规范

前端编码规范

一、 JS命名规范

---

1、变量的命名

首先是这肯定是一个 名词 。遵循小驼峰命名，首字符小写

    var isBoolean = true; //布尔值以is开头
    var arrayList = []; //数组以List结
    $scope.type = 1; / 这种写法是禁止使用的

2、函数命名

函数一般是执行一组操作的代码块，所以用动名词结合的方式命名，使用var name = function(agrs)函数内部需要用到一些关键参数，作为入参传入，即使在scope中存在，也需要作为入参传入（好处是提高函数复用的可能）

  var getSomting = function(id){} //获取某个值
  var loadSomting = function(agrs[]){} //从后台加载数据，涉及到restService
  var postSomting = function(obj{}){} //提交表单操作，新建
  var deleteSomting = function(id){} //删除操作
  var putSomting = function(id,obj{}){} //提交表单操作，修改
  var initSomting = function(){} //初始化函数，一般是用来获取某个获取后台的某个资源
  $scope.views = { showSomting : function(){} chooseSomting : function(){} }

3、全局静态常量定义约定

这里的全局常量需要定义在单独的app static.js文件下，方便统一管理以及协同开发。定义一个全局的常量约定如下： 命名：全大写英文，用下划线” “分割单词 定义方法： constant() 或者 value()

    angular.module('myApp.static', []) .constant("USER_TYPE",{1:"个人",2:"企业"})

4、全局动态变量定义约定

全局的动态变量来自后台提供的一些业务数据，大部分来自数据库字典表，这里使用factory的定义service的方式来实现全局动态变量的定义， 约定如下： 命名：全大写英文，用下划线”_”分割单词 定义方法： factory

    angular.module('myApp.somting',[]) .factory("SOME TYPES", function ($resource) {
         var SOME TYPES= {};
     })

5、注释约定

注释是用来解释当前代码的功能，一个好的注释就是能让人一眼看懂复杂的内部实现逻辑，而一个规范的注释能够形成最后的api文档。当然最重要的是注释可以你知道究竟该找谁痛扁一顿， 所以凡写过必留下痕迹。

6、文件注释

写在文件的最开头

    controller注释
    写在controller内部第一行

7、函数注释

写在函数外面，入参和出参如果没有就不要写

  行注释
  单行注释
  var obj = "" ; //参数定义注释
  function(){ ... // 对函数内部代码或者逻辑的特殊说明 ... }

8、代码顺序的约定

代码顺序既是对于controller中的N多行代码究竟谁先谁后的约定。顺序依次是：

• scope变量定义在最前；
• controller中的局部变量其次（即使实际使用的函数在其他位置）；
• scope底下的function；
• controller内部函数；
• 初始化函数定义及调用 注：

      controller(function(){  / scope底下的对象最先声明 / 
   　　   $scope.somting = {};  / controller局部变量 /  
   　　   var somting; / scope底下的function / 
   　　   $scope.doSomting = function(){} / controller局部函数 / 
   　　   var doSomting = function(){} 
  　　　})

9、基础数据模型定义的约定

基础数据模型依赖于后台接口提供的数据，同时根据前台具体的业务场景或不变或转换格式保存在前台缓存对象下，同时也可以将变化过的数据更新到当前数据模型中。

     app.factory("userService",function($resource){

  　　　　　var userList = []; //将userList数据本地化
  　　　　　var getList = function(){//来自后台数据}
  　　　　　var get = function(id,callback){//来自后台数据}
  　　　　　var update = function(id,user,callback){//来自后台数据}
  　　　　　var delete= function(id,callback){//来自后台数据}
  　　　　　
 　})

10、试图模型定义的约定

controller中的离散变量将通过scope.views（作为试图模型对象）统一控制，甚至某些复杂页面视图模型，可以在views中用单独的对象处理。

    //页面视图控制数据模型
  $scope.views = { 
      somting : "", 
      isSomting : true, 
      chooseSomting : function(){    this.sonting = ""; },
      oneObj:{ oneType : "", showOne : fucntion(){ this.one = ""; } } 
 }

    //后台返回数据模型
   $scope.somting = somtingService.get();

11、业务数据模型定义的约定

业务数据模型一般是有别于基础数据模型和视图数据模型，一般是包含视图内容的数据对象，例如表单数据对象，或者被选中的某些数据，这些数据一般用于界面控制也会提取出接口参数用于交互。

   $scope.somtingSelectedList = [
   { id : 1, ... selected : true },
   { id : 2, ... selected : true },
   { id : 3, ... selected : false }...]

二、 网页命名规范

---

前端web开发命名规范

（一）主体

头：header　　

内容：content/container　　

尾：footer　　

导航：nav　　

侧栏：sidebar

栏目：column　　

页面外围控制整体布局宽度：wrapper　　

左右中：left right center

登录条：loginbar　　

标志：logo　　

广告：banner　　

页面主体：main　　

热点：hot

新闻：news　　

下载：download　　

子导航：subnav　　

菜单：menu

子菜单：submenu　　

搜索：search　　

友情链接：friendlink　　

页脚：footer

版权：copyright　　

滚动：scroll　　

内容：content　　

标签页：tab

文章列表：list　　

提示信息：msg　　

小技巧：tips　　

栏目标题：title

加入：joinus　　

指南：guild　　

服务：service　　

注册：regsiter

状态：status　　

投票：vote　　

合作伙伴：partner

(二)css注释的写法: 　　

　　内容区　　

Html注释的写法 ：<!--header头部-- >

(三)id的命名:

(1)页面结构　　

容器: container　　

页头：header　　

内容：content/container 　　

页面主体：main　　

页尾：footer　　

导航：nav 　　

侧栏：sidebar　　

栏目：column　　

页面外围控制整体布局宽度：wrapper 　　

左右中：left right center

(2)导航　　

导航：nav　　

主导航：mainnav　　

子导航：subnav 　　

顶导航：topnav　　

边导航：sidebar　　

左导航：leftsidebar 　　

右导航：rightsidebar　　

菜单：menu　　

子菜单：submenu 　　

标题: title　　

摘要: summary

(3)功能　　

标志：logo　　

广告：banner　　

登陆：login　　

登录条：loginbar 　　

注册：regsiter　　

搜索：search　　

功能区：shop 　　

标题：title　　

加入：joinus 　

状态：status　　

按钮：btn 　　

滚动：scroll　　

标签页：tab　　

文章列表：list　　

提示信息：msg 　　

当前的: current　　

小技巧：tips　　

图标: icon　　

注释：note 　　

指南：guild　

服务：service　　

热点：hot　　

新闻：news 　　

下载：download　　

投票：vote　　

合作伙伴：partner 　　

友情链接：link　　

版权：copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如　　

.red { color: red; } 　　.f60 { color: #f60; } 　　.ff8600 { color: #ff8600; }

(2)字体大小,直接使用’font+字体大小’作为名称,如　　

.font12px { font-size: 12px; } 　　.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如　　

.left { float:left; } 　　.bottom { float:bottom; }

(4)标题栏样式,使用’类别+功能’的方式命名,如　

.barnews { } 　　.barproduct { }

注意事项:: 　　

1.一律小写; 　　

2.尽量用英文; 　　

3.不加中杠和下划线; 　　

4.尽量不缩写，除非一看就明白的单词. 　　主要的 master.css　　模块 module.css　　基本共用 base.css 　　布局，版面layout.css　　主题 themes.css　　专栏 columns.css 　　文字 font.css　　表单 forms.css　　补丁 mend.css　　打印print.css

三、 静态文件命名规范

---

统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符。 原则： 1）方便理解，见名之意

1、索引文件的命名规则（首页面）

index.htm
index.html（常见的静态网页）
index.asp（VB）
index.aspx（）
index.jsp（Java）
index.php（PHP）

2、各个子页面的命名规则

统一用翻译的英文命名（推荐）
统一用拼音命名（拼音的简化也可）
如果文件名过长，企业要提前约定一份缩写的规范，如pro—product

[x] 注意：不要中英文混用
例如：

首页—index
产品列表—prolist产品详细页面—prodetail
新闻列表—newslist新闻详细页面—newsdetail
发展历史—history
关于我们—aboutus
联系我们—linkus，contactus
信息反馈—feedback留言—leavewords

3、图片命名规范

图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类性质，例如广告，标志，菜单，按钮等

banner：放置在页面顶部的广告，装饰图案等长方形的图片
logo：标志性的图片
button：在页面上位置不固定，并且带有链接的小图片
menu：在页面中某一位置连续出现，性质相同的链接栏目的图片
pic：装饰用的图片
例子：

banner_sohu.gif, banner_sina.gif
menu_aboutus.gif,menu_job.gif
title_news.gif
logo_police.gif
pic_people.gif

4、脚本文件和动态文本文件命名规则

脚本文件：一般使用脚本功能的英文小写缩写命名

实际模块：例如广告条的javascript文件名为ad.js，弹出窗口的javascript文件名为pop.js
公用模块：js文件命名：英文命名，后缀js。如common.js，basic.js
外部资源：Jquery.min.js，Jquery.validate.js，Jquery.date.js
动态文件：以性质描述，可以有多个单词，用‘_’隔开，性质一般是该页面的概要（见名知意）。

范例：register_form.aspx，register_post.aspx，topic_lock.aspx。不同模块之间，可以使用不同的前缀来区分