zoukankan      html  css  js  c++  java
  • 【规范】前端编码规范——一般规范

    【规范】前端编码规范——一般规范

    文件/资源命名

    在 web 项目中,中划线(-)是用来分隔文件名的不二之选。同时它也是常见的 url 分隔符(比如:本文的 url)。所以理所当然的,中划线应该也是用来分隔资源名称的好选择。

    尽量保证文件命名总是以字母开头而不是数字。而以特殊字符开头命名的文件,一般都有特殊的含义与用处。

    文件的字母名称必须全为小写,这是因为在某些对大小写字母敏感的操作系统中,当文件通过工具压缩混淆后,或者人为修改过后,大小写不同而导致引用文件不同的错误,很难被发现。

    还有一些情况下,需要对文件增加后缀或特定的扩展名时(比如 .min.js, .min.css),这种情况下,建议使用点分隔符来区分。

    不推荐:

    MyScript.js
    myCamelCaseName.css
    i_love_underscores.html
    1001-scripts.js
    my-file-min.css

    推荐:

    my-script.js
    my-camel-case-name.css
    i-love-underscores.html
    thousand-and-one-scripts.js
    my-file.min.css

    结构目录

    • images
      • index(多页面的话可以分文件夹)
        • body-bg.jpg
        • header-bg.jpg
        • main-bg.jpg
      • body-bg.jpg
      • header-bg.jpg
      • main-bg.jpg
    • js
      • common.js
    • lib
      • jquery.min.js
    • sass
      • core
        • _common.scss
        • _css3.scss
        • _reset.scss
        • _variables.scss
      • _base.scss
      • _common.scss
      • _vars.scss
      • _index.scss
      • style.scss
    • index.html

    编码格式

    文件必须用 UTF-8 编码,使用 UTF-8(无 BOM),请保持 css 文件编码与页面编码一致。

    协议

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

    当引入图片或其他媒体文件,还有样式和脚本时,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,都使用空格缩进,一次缩进 4 个空格

    复制代码
    <!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 {
        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,可以使用 JSLint 或 JSHint

    参考文献

     
  • 相关阅读:
    剑指Offer-11.二进制中1的个数(C++/Java)
    剑指Offer-10.矩形覆盖(C++/Java)
    剑指Offer-9.变态跳台阶(C++/Java)
    UVA 1608 Non-boring sequence 不无聊的序列(分治,中途相遇)
    UVA1607 Gates 与非门电路 (二分)
    UVA 1451 Average平均值 (数形结合,斜率优化)
    UVA 1471 Defense Lines 防线 (LIS变形)
    UVA 1606 Amphiphilic Carbon Molecules 两亲性分子 (极角排序或叉积,扫描法)
    UVA 11134 FabledRooks 传说中的车 (问题分解)
    UVA 1152 4 Values Whose Sum is Zero 和为0的4个值 (中途相遇)
  • 原文地址:https://www.cnblogs.com/shenzikun1314/p/6398103.html
Copyright © 2011-2022 走看看