前端编码规范

时间 2019-11-11

原文原文链接

前言

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

IDE要求使用webstorm。css

语法

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

命名规则

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

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

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

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

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

Javasctipt命名规则：小驼峰web

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

代码格式化

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

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

其余书写规范

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

<a href="javascript:" ng-click="openPopbox()"></a>