前端代码作风

2019年8月31日 189次阅读 来源: caicai

文件名

均采纳小写体式格局， 以中划线分开, 若有复数组织时，采纳复数定名法

  • 目录名：scripts,styles,images,data-models

  • 文件名： example.js retina-sprites.css

Javascript

解释

什么时候运用

  • 难于明白的代码段

  • 可以存在毛病的代码段

  • 阅读器迥殊的HACK代码

  • 想吐槽的产物逻辑, 协作同事

  • 营业逻辑强相干的代码

// 单行解释斜杠背面要留有一个空格

/*
 * 多行解释起码三行，解释内容与星标前保存一个空格
 */
 
 var hello = '';        // 形貌变量可以如许写在变量右侧
 
/*
 * 形貌要领（函数）必需运用多行形貌
 * 若有必要可以加上参数和返回值申明，参考 http://usejsdoc.org/
 * @param {Object} balabalabala
 * @return {Object} balabalabala
 */
 function foo() {
     // 形貌下面代码时做什么的，要领第一行不须要留空格
     doSomething();
     
     // 形貌下面代码时做什么的，上方须要留一个空行
     afterDoSomething();
     
     if (flag) {
         // 形貌下面代码时做什么的，代码块的第一行也不须要留空格
         drive();
     }
 }

语法

  • 运用四个空格的 soft tabs — 这是保证代码在种种环境下显现一致的唯一体式格局。

  • 平常状况下 有关键字的处所都要有空格

  • 字符串运用单引号而不是双引号：｀var str = ‘hello world’;｀

  • 单行长度，理论上不要凌驾80列，不过假如编辑器开启 soft wrap 的话可以不斟酌单行长度

  • 接上一条，假如须要换行，存在操作符的状况，肯定在操作符后换行，然后换的行缩进4个空格

  • 这里要注重，假如是屡次换行的话就没有必要继承缩进了，比方说下面这类就是最好花样。

if (typeof qqfind === "undefined" ||
    typeof qqfind.cdnrejected === "undefined" ||
    qqfind.cdnrejected !== true) {
    url = "http://pub.idqqimg.com/qqfind/js/location4.js";
} else {
    url = "http://find.qq.com/js/location4.js";
}

建立Object对象

// Bad
var team = new Team();
team.title = "AlloyTeam";
team.count = 25;

// Good  
var team = {
    title: "AlloyTeam",        // 冒号后须要跟一个空格
    count: 25
};

建立Array对象

// Bad
var colors = new Array("red", "green", "blue");
var numbers = new Array(1, 2, 3, 4);

// Good
var colors = [ "red", "green", "blue" ];  // 中括号摆布均须要一个空格
var numbers = [ 1, 2, 3, 4 ];

组织函数

/**
 * 建立一个组织函数
 */
function Modal(options) {    // 函数名运用大写字母开首，驼峰式定名
    this.width = options.width;    // 属性在组织函数体中定义
    this.height = options.height;
}

Modal.prototype.show = function() {    // 要领定义在原型链上
    // show
}

Modal.prototype.hide = function() {
    // hide
}

// 实例化对象
var modal = new Modal({
        width: 200,
        height: 300
    });

if 语法

// if else 前后留有空格，
if (flag) {

} else {

}

for 语法

// 一般for
var values = [ 1, 2, 3, 4, 5, 6, 7 ],
    i, len;
for (i=0, len=values.length; i<len; i++) {
    process(values[i]);
}

// for in, （平常状况下不要用for in）
var prop;
for (prop in object) {
    // 注重这里肯定要有 hasOwnProperty 的推断,不要把原型链上的属性罗列出来
    if (object.hasOwnProperty(prop)) {
        console.log("Property name is " + prop);
        console.log("Property value is " + object[prop]);
    }
}

switch 语法

// switch和括号之间有空格， case须要缩进， break以后跟下一个case中心留一个空行
switch (condition) {
    case "first":
        // code
        break;

    case "third":
        // code
        break;

    default:
    // code
}

// 没有default的状况须要解释迥殊申明
switch(condition) {
    case "first":
        // code
        break;

    case "second":
        // code
        break;

    // no default
}

声明

变量声明

var _body = $(document.body); // 全局变量运用下划线 _ 开首
function foo() {
    var result,    // 一个代码块里的变量声明只用一个var
         length,    // 一个变量一行，行末跟解释
         mainWrap;// 驼峰式定名法
         
}

常量声明

运用全大写字母＋下划线的定名体式格局体式格局

var IMAGE_DOMAIN = 'WWW.XXX.COM';

函数声明

  • 函数声明一致运用function敕令举行声明

// good
function foo() {        // 小括号前不须要空格，小括号与大括号间须要一个空格
    doSomething(); // 函数挪用括号前后不须要空格
    return "hello world";
}

// bad
var foo = function() {
    return "hello world";
}

// bad
var foo = new Function(
    'return "hello world"'
);

  • 马上实行函数的写法, 最外层必需包一层括号

// Good
(function() {
    "use strict";    // 运用严厉形式

    function doSomething() {
        // code
    }

    function doSomethingElse() {
        // code
    }

})();

空行

申明：下面代码中的解释处代表着现实代码中的空行

function foo1() {
    
}
// 要领之间加空行
function foo2() {
    
}
// 逻辑块与要领之间加空行增添可读性
for (var i=0; i<10; i++) {
    
} 
// 逻辑块之间加空行增添可读性
if (flag) {
    
} else {
    
}
// 文件末端留一个空行

杂项

  • 只要字符串范例许可运用 == !=，如if(x == 'a') 其他状况一概用严厉比较前提 === !==

  • eval 非迥殊营业， 禁用！！！

  • with 非迥殊营业， 禁用！！！

CSS

语法

  • 运用组合选择器时，坚持每一个自力的选择器占用一行。

  • 为了代码的易读性，在每一个声明的左括号前增添一个空格。

  • 声明块的右括号应当另起一行。

  • 每条声明 : 后应当插进去一个空格。

  • 每条声明应当只占用一行来保证毛病报告越发正确。

  • 一切声明应当以分号末端。虽然末了一条声明后的分号是可选的，然则假如没有他，你的代码会更轻易失足。

  • 逗号分开的取值，都应当在逗号以后增添一个空格。比方说box-shadow

  • 不要在色彩值 rgb() rgba() hsl() hsla()和 rect() 中增添空格

  • 不要带有取值前面不必要的 0 (比方，运用 .5 替换 0.5)。

  • 一切的十六进制值都应当运用小写字母，比方 #fff。由于小写字母有更多样的外形，在阅读文档时，他们可以更轻松的被辨别开来。

  • 为选择器中的属性取值增加引号，比方 input[type=”text”]。 他们只在某些状况下无足轻重，所以都运用引号可以增添一致性。

  • 不要为 0 指明单元，比方运用 margin: 0; 而不是 margin: 0px;。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
    padding: 15px;
    margin: 0px 0px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 2px #C0C0C0, inset 0 1px 0 #F8F8F8
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #c0c0c0, inset 0 1px 0 #f8f8f8;
}

声明递次

相干的属性声明应当以下面的递次分组处置惩罚：

  1. Positioning

  2. Box model 盒模子

  3. Typographic 排版

  4. Visual 表面

Positioning 处在第一位，由于他可以使一个元素离开一般文本流，而且掩盖盒模子相干的款式。盒模子紧跟厥后，由于他决议了一个组件的大小和位置。

其他属性只在组件 内部 起作用或许不会对前面两种状况的效果产生影响，所以他们排在背面。

关于完全的属性以及他们的递次，请参考 Recess

.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
}

Class 定名

  • 坚持 Class 定名为全小写，可以运用短划线（不要运用下划线和 camelCase 定名）。短划线应当作为相干类的天然中断。(比方，.btn 和 .btn-danger)。

  • 防止过分运用简写。.btn 可以很好地形貌 button，然则 .s 不能代表任何元素。

  • 运用 .js-* classes 来示意行动(相对于款式)，然则不要在 CSS 中包括这些 classes。

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

选择器

  • 运用 classes 而不是通用元素标签来优化衬着机能。

  • 防止在经常涌现的组件中运用一些属性选择器 (比方，[class^=”…”])。阅读器机能会遭到这些状况的影响。

  • 削减选择器的长度，每一个组合选择器选择器的条目应当只管控制在 3 个之内。

  • 只在必要的状况下运用子女选择器 (比方，没有运用带前缀 classes 的状况).

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

不要运用 @import

与 <link> 标签比拟，@import 指令要慢许多，不光增添了分外的要求次数，还会致使不可预感的题目。替换方法有以下几种：

  • 运用多个 <link> 元素

  • 经由过程 Sass 或 Less 相似的 CSS 预处置惩罚器将多个 CSS 文件编译为一个文件

HTML

语法

  • 用两个空格来替代制表符（tab） — 这是唯一能保证在一切环境下取得一致展示的要领。

  • 在属性上，运用双引号，不要运用单引号。

  • 不要在自动闭合标签末端处运用斜线 – HTML5 范例 指出他们是可选的。

  • 不要疏忽可选的封闭标签（比方，</li> 和 </body>）。

  • 嵌套的节点应当缩进（四个空格）。

字符编码

经由过程明白声明字符编码，可以确保阅读器疾速并轻易的推断页面内容的衬着体式格局。如许做的优点是，可以防止在 HTML 中运用字符实体标记（character entity），从而悉数与文档编码一致（平常采纳 UTF-8 编码）。

引入 CSS 和 JavaScript

依据 HTML5 范例, 通常在引入 CSS 和 JavaScript 时不须要指明 type，由于 text/css 和 text/javascript 分别是他们的默认值。

属性递次

HTML 属性应当根据特定的递次涌现以保证易读性。

  • class

  • id

  • name

  • data-*

  • src, for, type, href, value , max-length, max, min, pattern

  • placeholder, title, alt

  • aria-*, role

  • required, readonly, disabled

Classes 是为高可复用组件设想的，理论上他们应处在第一位。Ids 越发详细而且应当只管少运用（比方, 页内书签），所以他们处在第二位。

不要用JavaScript 天生标签

在 JavaScript 文件中天生标签让内容变得更难查找，更难编辑，机能更差。应当只管防止这类状况的涌现。

示例代码


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- External CSS -->
    <link rel="stylesheet" href="code-guide.css">
    <!-- In-document CSS -->
    <style>
      /* ... */
    </style>
  </head>
  <body>
    <a id="..." class="..." data-modal="toggle" href="#">
      Example link
    </a>
    <input class="form-control" type="text">
    <img src="..." alt="...">
    
    <!-- JavaScript -->
    <script src="code-guide.js"></script>
  </body>
</html>
    原文作者：caicai
    原文地址: https://segmentfault.com/a/1190000007717221
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞