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


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

    文件/资源命名

    在 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

    参考文献

     
  • 相关阅读:
    ajax请求先发后至问题处理
    Jquery 使用val时触发change事件
    let与var的几个主要区别
    正则表达式s字符匹配
    Ext.DateField设置Format无法提交数据
    swift基本示例
    div 中文会换行 英文不换行
    js 动画提示数据有变化
    为什么要写博客
    突然发现一个开源项目TXQR和我之前申请的一个专利挺像的
  • 原文地址:https://www.cnblogs.com/shenzikun1314/p/6398103.html
Copyright © 2020-2023  润新知