前端编码规范—一般规范

前端编码规范—一般规范

前言

这是一份旨在增强团队的开发协作，提高代码质量和打造开发基石的编码风格规范，其中包含了 html，css，javascript，jquery 这几个部分。我们知道，当一个团队开始指定并实行编码规范的话，错误就会变得更加显而易见。如果一段特定的代码不符合规范的话，它有可能只是代码风格错误，而也有可能会是 bug。早期指定规范就使得代码审核得以更好的开展，并且可以更精确的地定位到错误。

文件/资源命名

项目中，中划线（-）是用来分隔文件名的不二之选。所以理所当然的，中划线应该也是用来分隔资源名称的好选择。
尽量保证文件命名总是以字母开头而不是数字。而以特殊字符开头命名的文件，一般都有特殊的含义与用处。
文件的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文-件不同的错误，很难被发现。
还有一些情况下，需要对文件增加后缀或特定的扩展名时（比如 .min.js, .min.css），这种情况下，使用点分隔符来区分。

不推荐：

1. MyScript.js
2.  myCamelCaseName.css
3.  i_love_underscores.html
4.  1001-scripts.js
5.  my-file-min.css

推荐：

1. my-script.js
2. my-camel-case-name.css
3. i-love-underscores.html
4. thousand-and-one-scripts.js
5. my-file.min.css

结构目录

css
    base(基础样式库)
    vendor(插件及支持样式库)
    index.css
    login.css
    list.css
    user-center.css
fonts
    iconfont.eot
    iconfont.svg
    iconfont.ttf
    iconfont.woff
img
    index(多页面的话可以分文件夹)
        body-bg.jpg
        header-bg.jpg
        main-bg.jpg
    list
        list-bg.png
        icon.png
    body-bg.png
    header-bg.png
    main-bg.png
js
    labs(JavaScript类库、框架)
        jquery
            jquery.cookie.js
            jquery.easings.min.js
            jquery.min.js
            jquery.form.min.js
        bootstrap
            bootstrap-paginator.min.js
            bootstrap-datetimepicker.min.js
            bootstrap.min.js
        angular
            angular-route.min.js
            angular-animate.min.js
            angular.min.js
        require
            css.js
            text.js
            require.min.js
    controller(APP所有业务逻辑js放在此文件夹)
        index.js
        list.js
    json(用到的json文件、模拟的json结构文件)
        index.json
        list.json
    tpl(APP所有视图、模板放在此文件夹)
        header.html
        footer.html
        modal.html
        sider-bar.html
        index.html
        content.html
    service(APP用到的服务、自定义的服务)
        app-service.js
        app-factory.js
    (js文件夹根目录下一般放配置文件及入口文件)
    config.js
    start.js
    router-config.js
    main.js

login.html
index.html
results.html

编码格式

文件必须用 UTF-8 编码，使用 UTF-8（无 BOM），请保持 css、js 文件编码与页面编码一致。

协议

不要指定引入资源所带的具体协议。

当引入图片或其他媒体文件，还有样式和脚本时，url 所指向的具体路径，不要指定协议部分（http 和 https），除非这两者协议都不可用。

不指定协议使得 url 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。

不推荐：

<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>

.demo {
    background:url(http://xxx.com/images/bg.jpg);
}

推荐：

<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>

.demo {
    background:url(//xxx.com/images/bg.jpg);
}

文本缩进

无论是 html 还是 css 又或者是 js，都使用TAB缩进和对齐，一次缩进1 个TAB，保持项目文件编码的风格及格式的一致性。同一小组别人修改你代码时候也方便阅读、修改。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="renderer" content="webkit">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title>Document</title>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

.demo {
    width:100px;
    height:100px;
    background:url(//xxx.com/images/bg.jpg);
}

;(function(w, d, $){
    var x = 10, y = 20;
    console.log(x + y);
}(window, document, jQuery));

检查代码

每次写完 html 或者 css 或者 js，都应该检查一遍代码，看看是否有问题，比如 html 标签是否闭合，css 多余的类没有删除，js 的结束符，代码的缩进是否整齐等等。js代码需要特别注意的是if、else、for、function等语句的后面记得要以’;’分号结尾，因为当文件压缩混淆时，不规范的写法有可能造成错误导致js无法运行。

后续更新及补充

本文有不完善的地方及其他前端开发中的一般规范，希望多多补充，后续不断更新ing。