Web前端开发规范

由 发布 于 四 月 02 日 2019-04-02 分类: 编程开发 标签: 编辑

为什么需要 “Web前端开发规范”

规范不是强制性的，对代码的编写和程序的运行不会有致命的问题，但是没有规范会有一系列的问题，比如：

  • 缺乏规范，第一个问题就是团队编码风格不一，增加了成员之间代码的阅读成本，加大了团队协作成本和维护成本；
  • 随着团队人员的变化（多人开发一个应用，或者应用更换开发人员），如果缺乏规范，项目可能会变得一团糟，甚至失控；
  • 即便是个人开发，规范也是需要的，当把项目转给其他人的时候，如果有规范的话，会大大降低阅读成本。

所以，建立一套适合团队的开发规范是很受用的。

Web开发规范分类

一般来说，有以下几类规范：

  • 命名规范
  • html规范
  • css规范
  • js规范

命名

驼峰式命名法介绍

Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo

文件资源命名

文件名不得含有空格 文件名建议只使用小写字母，不使用大写字母。( 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。 ) 文件名包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。 文件版本，比如min、plugin单词之间建议使用点 ( . ) 分隔。 引入资源使用相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除非这两者协议都不可用。

不推荐：

<script src="http://cdn.com/foundation-min.js"></script>
<script src="./js/myMain.js"></script>

推荐：

<script src="//cdn.com/foundation.min.js"></script>
<script src="./js/my-main.js"></script>

变量命名

命名方式： 小驼峰式命名方法 命名规范： 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词

类型 小写字母 array a boolean b function fn int i object o regular r string s

不推荐

var List = [1,2,3];
var flag = true;

推荐

var aList = [1,2,3];
var bFlag = true;

函数命名

命名方式：小驼峰方式 ( 构造函数使用大驼峰命名法 ) 命名规则：前缀为动词

动词 含义 返回值 can 判断是否可执行某个动作 ( 权限 ) 函数返回一个布尔值 true：可执行；false：不可执行 has 判断是否含有某个值 函数返回一个布尔值 true：含有此值；false：不含有此值 is 判断是否为某个值 函数返回一个布尔值 true：为某个值；false：不为某个值 get 获取某个值 函数返回一个非布尔值 set 设置某个值 无返回值、返回是否设置成功或者返回链式对象

推荐

//是否可阅读
function canRead() {
    return true;
}
//获取姓名
function getName {
    return this.name;
}

常量命名

命名方法:全部大写 命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词

推荐

var MAX_COUNT = 10;
var URL = 'http://www.baidu.com';

类的命名

公共属性和方法：同变量命名方式 私有属性和方法：前缀为下划线(_)后面跟公共属性和方法一样的命名方式

function Student(name) {
    var _name = name;  // 私有成员

    // 公共方法
    this.getName = function() {
        return _name;
    }

    // 公共方式
    this.setName = function(value) {
        _name = value;
    }
}
var st = new Student('tom');
st.setName('jerry');
console.log(st.getName()); // => jerry：输出_name私有变量的值

注释规范

  • 单行注释（//）
  • 单独一行：//(双斜线)与注释文字之间保留一个空格 在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。
  • 注释代码：//(双斜线)与代码之间保留一个空格。
// 调用了一个函数；1)单独在一行
setTitle();
var maxCount = 10; // 设置最大量；2)在代码后面注释
// setName(); // 3)注释代码

多行注释（ /* 注释说明 */）

若开始(/* 和结束 / )都在一行，推荐采用单行注释 若至少三行注释时，第一行为/，最后行为/，其他行以开始，并且注释文字与*保留一个空格。

/**
 * DYTT 电影天堂
 * https://github.com/XboxYan/DYTT
 *
 * @XboxYan
 * @yanwenbin1991@live.com
 */

函数（方法）注释

函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求

/** 
 * 函数说明 
 * @关键字 
 */

HTML规范

文档规范

HTML5的文档类型声明：<!DOCTYPE html>

  • DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
  • 使用文档声明类型的作用是为了防止开启浏览器的怪异模式。
  • 没有DOCTYPE文档类型声明会开启浏览器的怪异模式，浏览器会按照自己的解析方式渲染页面，在不同的浏览器下面会有不同的样式。
  • 如果你的页面添加了那么，那么就等同于开启了标准模式。浏览器会按照W3C标准解析渲染页面。

    脚本加载

说到js和css的位置，大家应该都知道js放在下面，css放在上面。但是，如果你的项目只需要兼容ie10+或者只是在移动端访问，那么可以使用HTML5的新属性async，将脚本文件放在< head >内

<!--老旧浏览器(IE9-)-->
<html>
       <head>
        <link rel="stylesheet"href="main.css">

    </head>
    <body>
        <!-- body goes here -->
        <script src="main.js"></script>
    </body>
</html>

<!--现代浏览器-->
<html>
       <head>
        <link rel="stylesheet"href="main.css">
        <script src="main.js"async></script>
    </head>
    <body>
        <!-- body goes here -->
    </body>
</html>



md5-2c91b61223a7b9eaef80ff9e5a7ad2f6



<img src="./logo.png" alt="logo" >



md5-7fa1702b20495493237c9650759d9e14



<!-- That's clean markup! -->
<span class="text-box">
  See the square next to me?
</span>


<style>
/* We use a :before pseudo element to solve the design problem of placing a colored square infrontofthetext content */
.text-box:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}
</style>

文档信息

版权声明：可自由转载（请注明转载出处）-非商用-非衍生

发表时间：2019年4月2日 11:10