前端编码规范

2024年5月8日 136次阅读 来源: crazy4x

前言

首先，写这篇代码规范是为了我自己在以后的项目中方便引用，让前端人员统一标准，方便在开发中保持代码的一致性，代码规范是在bootstrap的编码规范上的基础上做的修改，下面只列举出一些不一样的地方，基本的规范参照bootstrap编码规范

IDE要求使用webstorm。

语法

用四个空格来代替制表符（tab）,嵌套元素应当缩进一次（即四个空格），大部分人习惯JS为4个空格的缩进，让HTML，CSS和JS保持一致，webstorm默认的代码格式化就可以达到四个空格的缩进，快捷键Ctrl+Alt+L

命名规则

文件命名规则：英文单词，多单词使用“-”连接,或小驼峰方法

    index.html
    task-bg.jpg
    title-bg.png
    project-task.css
    project-ctrl.js
    projectCtrl.js

Css类名命名规则：英文单词，多单词使用“-”连接


    <div class="task-list-title">
        <h3 class="task-list-title-h3">
            这里是标题
        </h3>
    </div>

    <style>
        .task-list-title{
            float:left;
        }
    </style>

Javasctipt命名规则：小驼峰


    $scope.taskOpen = function () {
        $scope.taskOpenState = true;
    };

代码格式化

使用webstorm作为IDE，使用默认的代码格式化方式，快捷键为ctrl+alt+l
把webstorm的格式化换行去掉，以11.0.2版本为例，

设置方法：找到File-Settings-Editor-General-Appearance
去掉Show right margin(configured in Code Style options)的勾选

其他书写规范

<a>标签中href属性不使用#作为填充，使用javascript:,例如：

    <a href="javascript:" ng-click="openPopbox()"></a>
    原文作者：crazy4x
    原文地址: https://segmentfault.com/a/1190000004277963
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞