• 前端代码规范(结合自己团队实际需要总结)


    一、一般规范

    1、命名规范

    (1)以英文命名,避免出现拼音命名。

    (2)文件命名全小写,如需要分割以-连接。如:my-filter.js

    (3)css 选择器命名分割以-连接。如:.main-box-header

    2、代码缩进

    1)以TAP为一次缩进。

    3、代码注释

    (1)关键步骤必须写注释。

    (2)不要写你的代码都干了些什么,而要写你的代码为什么要这么写,背后的考量是什么。当然也可以加入所思考问题或是解决方案的链接地址。

    4、代码检查 使用JSLintJSHintjavascript 代码进行检查。

    二、HTML规范

    1、文档类型:使用HTML5文档类型声明。<!DOCTYPE html>

    2、结构(HTML)、表现(CSS)、行为(JS)代码分离.

    HTML文件中只包含标签,将表现放入样式表中,将所有动作行为放入脚本文件中。在HTML<head>中引入样式文件,在</body>之前引入脚本文件。

    3、<meat>声明

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    
    让网页宽度适应屏幕宽度,多用于移动端。
    
    <meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1" />
    
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    
    让360浏览器默认进入极速模式

    4、<img> 标签必须添加alt属性。

    在图像无法显示时的替代文本。在网速慢、图片src属性错误、浏览器禁用图片或是屏幕阅读器中alt属性很重要,且利于SEO

    5、ID和锚点

    页面中重要的部分,如:页头、导航、主体、页脚等加上ID

    单选、复选中为<input >ID并在<lable>标签中将for指向此ID

    例如:

    <input  type="checkbox" id="allowTrace" value="manual">
    
    <label for="allowTrace">
    
        允许trace
    
    </label>

    三、CSS规范

    1、Css选择器层级

    错误示范:

    .content_box form ul li {height:30px;margin:10px;}

    错误原因:样式指向不精准,使得受影响的标签范围太大,当多个页面同时引用同一样式表时,容易出现不可预见的问题。

    #final #content .con_border .system_time .default_checkbox {}

    错误原因:选择器太多,权重太高,不利于后期维护。

    .access_control > ul > li > ul > li > input{
        margin-right:10px;
    }

    错误原因:选择器太多,影响运行效率,不利于样式复用。尽量避免使用后代选择器。

    建议:层级尽量不超过三级,防止出现权重太高,不利于后期的覆盖与维护。

    2、!important

    尽量避免使用!important,因为这是css里面的终极大招,用多了伤元气。

    3、合理的避免使用ID选择器。

    一般情况下ID不应被应用于样式表中。因为ID样式不能被复用且每个页面中只能使用一次ID。还有一个原因是ID选择器权重很高。

    4、尽量避免使用元素选择器

    错误示范:

    form ul li em{
    
    }

    推荐写法:

    .content .title{
    
    }

    5、css 书写顺序

    (1)位置属性(position, top, right, z-index, display, float)
    (2)大小(width, height, padding, margin)

    (3)文字系列(font, line-height, letter-spacing, color- text-align)
    (4)背景(background, border)
    (5)其他(animation, transition)

    6、缩写属性

    例如:margin

    margin-top:1px;
    
    margin-right:2px;
    
    margin-bottom:3px;
    
    margin-left:4px;

     简写:

    margin:1px 2px 3px 4px;

    例如:背景

    background-image:url(background.gif);
    
    background-repeat:no-repeat;
    
    background-attachment:fixed;
    
    background-position:0 0;

    缩写:

    background:#f00 url(background.gif) no-repeat fixed 0 0;

    7、颜色值使用小写的十六进制数字

    不推荐:

    color:#FF22AA;

    推荐:

    color:#f2a;

    四、JAVASCRIPT规范

    1、变量命名:驼峰命名法

    例如:userName,passWorld;

    2、===== 

    总是使用 === 精确的比较操作符,避免在判断的过程中,由 JavaScript 的强制类型转换所造成的困扰。

    如果你使用 === 操作符,那比较的双方必须是同一类型为前提的条件下才会有效。 在只使用 == 的情况下,JavaScript 所带来的强制类型转换使得判断结果跟踪变得复杂。

    3、变量声明

    使用 var 来声明变量。原则上不建议使用全局变量如不指定 var,变量将被隐式地声明为全局变量,这将对变量难以控制。如果没有声明,变量处于什么定义域就变得不清(可以是在 Document Window 中,也可以很容易地进入本地定义域)。所以,请总是使用 var 来声明变量。

    4、全局污染

    除了使用var声明变量外,还可以使用匿名函数包裹代码防止全局命名空间被污染。

    (function(){
    
         // Code goes here
    
    }());
    
    (function(log, w, undefined){
    var x = 10, y = 100;
    log((w.x
    === undefined) + ' ' + (w.y === undefined)); }(window.console.log, window));

    5、eval 函数(魔鬼)

    eval() 不但混淆语境还很危险,总会有比这更好、更清晰、更安全的另一种方案来写你的代码,因此尽量不要使用 evil 函数。

    6、字符串拼接

      按一定长度截断字符串,并使用 + 运算符进行连接。分隔字符串尽量按语义进行,如不要在一个完整的名词中间断开。特别的,对于 HTML 片段的拼接,通过缩进,保持和 HTML 相同的结构。

    var html = ''
    
        + '<article>'
    
        +     '<h1>Title here</h1>'
    
        +     '<p>This is a paragraph</p>'
    
        +     '<footer>Complete</footer>'
    
        + '</article>';
    
    var html = [
    
        '<article>',
    
            '<h1>Title here</h1>',
    
            '<p>This is a paragraph</p>',
    
            '<footer>Complete</footer>',
    
        '</article>'
    
    ];
    
    html = html.join('');

    7、对有序集合进行遍历时,缓存length

    虽然现代浏览器都对数组长度进行了缓存,但对于一些宿主对象和老旧浏览器的数组对象,在每次 length 访问时会动态计算元素个数,此时缓存 length 能有效提高程序性能。

    for (var i = 0, len = elements.length; i < len; i++) {
     
        var element = elements[i]; 
        // ...... 
    }

     注:本文引用《前端代码基础编写规范》v1.1

      参考百度前端JavaScript编码规范https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md

     

  • 相关阅读:
    云计算架构
    Java多线程中static变量的使用
    Spring单例与线程安全小结
    sparkSQL实战详解
    sparkSQL整体实现框架
    spark架构
    如何快速定位出一个IP地址的归属地?——二分查找变体
    如何在 1000 万个整数中快速查找某个整数?——二分查找
    语言库中常用的排序算法qsort()底层结构
    链表常考笔试面试题(常备)
  • 原文地址:https://www.cnblogs.com/daijinxue/p/6844797.html
Copyright © 2020-2023  润新知