前端编码规范及注意事项

发表于 | 分类于
前端编码规范及注意事项

命名法

以下命名法示例不是JS的

匈牙利命名
开头字母用变量类型的缩写，其余部分用变量的英文或英文的缩写，要求单词第一个字母大写。

1
2
3
int iMyAge;// “i”是int类型的缩写
char cMyName[10];// “c”是char类型的缩写
float fManHeight;// “f”是flota类型的缩写

驼峰式命名法
驼峰式命名又叫小驼峰命名法。第一个单词字母小写，后面其他单词首字母大写。

1
2
3
int myAge;
char myName[10];
float manHeight;

帕斯卡命名法
帕斯卡命名法又叫大驼峰命名法。每个单词的第一个字母都大写。

1
2
3
int MyAge;
char MyName[10];
float ManHeight;

下划线命名法

下划线命名法并不如大小驼峰式命名法那么备受推崇，但是也是浓墨重彩的一笔。尤其在宏定义和常量中使用比较多，通过下划线来分割全部都是大写的单词。

该命名规范，也是很简单，要求单词与单词之间通过下划线连接即可。

1
2
3
int my_age;
char my_name[10];
float man_height;

HTML代码规范

整体结构

1.HTML基础设施

  • 文件应以<!DOCTYPE.....>首行顶格开始，这句话告诉浏览器这是一个什么文件，我们推荐使用<!DOCTYPE html>。
  • 必须在head元素内部的meta标签内声明文档的字符编码charset, 如：<meta charset="UTF-8">，这句代码告诉浏览器应该此HTML文件使用的字符集是什么，如果不加此行代码，那么在浏览器中可能显示为乱码。
  • 页面的title是极为重要的不可缺少的一项。

2.HTML代码结构和视觉顺序基本保持一致

  • 按照从上之下，从左到右的视觉顺序书写HTML结构。
  • 有时候为了便于搜索引擎抓取，我们也会将重要内容在HTML结构顺序上提前，以为搜索引擎抓取网页内容是自上而下的，所以将重要内容在HTML结构顺序上提前可便于抓取重要的内容。
  • 不要使用table布局，现在基本上被淘汰了，而应该代之以div来布局，方便控制。

3.结构、表现、行为三者分类，避免内联。

  • 使用link引入外部css文件到head中。注意：一般我们不使用@import来引入外部css文件。　　
  • 使用script将js文件引入，并置于body底部，这时js文件会最后加载，html会最先加载，用户体验会更好。(注意：并不是所有的js文件都要放置于body的底部，如当我们需要使用js文件动态修改meta元素内容时，需要将js文件引入到head标签中。

4.保持良好的树形结构

  • 每一个块级元素都另起一行，每一行都是用tab缩进对齐。如果不是块级元素，比如几个行内元素，我们把他写在一行即可。注意：html、 head、 body 以及body下的第1级标签(即直接子元素)不缩进，其他的都正常缩进。

代码格式

1.说明文案的注释方法

  • 开始注释：<!-- 注释文案 -->
  • 结束注释：<!-- /注释文案 -->
  • 允许只有开始注释。
    1044137-20161124214928581-1179760586

2.严格嵌套

  • 应当以最严格的xhtml strict标准来嵌套，比如内联元素不能包含块级元素等等。
  • 正确闭合标签且必须闭合。

3.严格的属性

  • 属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号。
  • 没有值的属性必须使用自己的名称做为值(checked、disabled、readonly、selected等等)。
  • 可以省略style标签和script标签的type属性。

VUE

开发工具统一用IDEA(代码检查比较强)

整体

  • 文件名称不能用中文
  • 页面都写在 src/views 下 根据模块不同建立不同文件夹
  • src/components 和 src/views下的组件要求首字母大写 组件不要写在其他目录中
  • 项目下文件夹小写 组件名用帕斯卡命名法 其它都用下划线法
  • 项目发版前一定要注意配置文件是否正确 版本号是否+1
  • 尽量不要操作dom
  • 局部使用的变量不要放在data中
  • 页面模块 主模块放前面 其它弹窗等放后面 保持同一层级
  • VUE开发的是单页应用，尽量少用id来获取dom，用的id或ref在不同的页面不要重复

VueX

  • 只需要获取state时不要用getters来获取
  • 修改state值时要用mutations，否则调试时看不到变化
  • 监听vuex值变化推荐这样写
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    watch: {
        "$store.state.loading": function(loading) {
            // 业务逻辑
            if (loading) {
                this.$Loading.start();
            } else {
                this.$Loading.finish();
            }
        }
    }

VueRouter

  • 路由path要用小写 子路由path命名要包含父路由的path

  • 路由和view的结构一定要保持一致

  • 能懒加载的就用懒加载

    1
    2
    3
    4
    // 没章节
    import HomeNoLeft from "../views/HomeNoLeft.vue";
    // 备课
    const ResourceMe = () => import(/* webpackChunkName: "pl" */ "../views/beike/ResourceMe.vue");

  • path和name要用小写

  • 路由都用代码方式写

  • 路由传值要用JS代码形式

JS

  • 属性名和方法名用小驼峰命名法

  • 定义方法要统一

    1
    2
    3
    4
    5
    myfunc:function(){
    }

    myfunc(){
    }

  • 无用变量要删除

  • 不要重复定义变量在for循环中

  • == 换为 ===,!=换为 !==

  • 变量名要有意义 不要用modal1、modal2这样的命名

  • 接口请求的url要放在单独的接口配置文件中，不要在页面上写

  • 事件方法名要用行为+方式的形式，例如loginClick 如果方法中调用另一个方法可以命名为loginAction

  • 尽量用对象替换单独的变量 比如添加Form中的所有属性放在一个对象中

  • 代码行末注意加分号

  • var替换为let和const

  • 顺序 components=>data => computed => watch => filters => created => mounted => methods

  • ques.complexity ? true : false可以写成!!ques.complexity

    1
    2
    3
    4
    var a;
    if(a != null && typeof(a) != undefined && a != ''){
        //a有内容才执行的代码  
    }

    优化写法

    1
    2
    3
    if(!!a){
        //a有内容才执行的代码...  
    }

  • 渲染之后执行

    1
    2
    3
    4
    5
    update_click:function(){
        this.$nextTick(function(){
        	// ...
    	});
    }

    或者

    1
    2
    3
    4
    async update_click:function(){
        await this.$nextTick();
        // ...
    }

  • 判断true或false

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    function is_true(a) {
        if (a) {
            console.log(true)
        } else {
            console.log(false)
        }
    }
    var a1 = "";
    var a2 = " ";
    var a3 = 0;
    var a4 = "0";
    var a5 = 1;
    var a6 = null;
    var a7 = undefined;

    is_true(a1); // false
    is_true(a2); // true
    is_true(a3); // false
    is_true(a4); // true
    is_true(a5); // true
    is_true(a6); // false
    is_true(a7); // false
    console.log("---");
    is_true(!!a1); // false
    is_true(!!a2); // true
    is_true(!!a3); // false
    is_true(!!a4); // true
    is_true(!!a5); // true
    is_true(!!a6); // false
    is_true(!!a7); // false

    所以

    • 判断字符串和对象时可以直接用if(a)或者if(!!a)判断
    • 判断数字时0为false，大于0都为true
    • 传参数时如果必须传bool类型的话，要使用!!a

  • 不要使用

    1
    this.$refs.addForm.resetFields();

    这样其实上并不会重置data中的数据

CSS

  • 命名用下划线命名法

  • 尽量用类名 少用id和标签

  • 样式层级能用 .a > .b 就不要用 .a .b

  • 宽高只能用具体的数值或100%，不要用小于100%的值 如果需要用flex实现

  • 图片一定要设置宽高

  • flex元素自动填充时一定要设置宽高

  • 图标尽量用iconfont（设计注意命名），没有的话用高倍的图

  • 渲染时不显示模版

    1
    2
    3
    [v-cloak] {
        display: none !important;
    }

    模版中

    1
    2
    3
    <ul v-cloak v-for="item in items">
        <li>{{ item.name }}</li>
    </ul>

  • 设置默认的滚动条

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    ::-webkit-scrollbar-button {
      display: none;
    }

    ::-webkit-scrollbar-thumb {
      background: #4498ee;
      border-radius: 2px;
    }

    ::-webkit-scrollbar-track {
      background: #f3f3f3;
      border: 1px solid #ffffff;
    }