찾다

집  >  기사  >  웹 프론트엔드  >  웹 프런트엔드 코드 사양

웹 프런트엔드 코드 사양

巴扎黑
巴扎黑원래의
2017-06-27 09:05:572319검색

웹 프런트 엔드 코드 사양

마지막 업데이트: 2017-06-25

원본 기사 링크:

이 프로젝트는 표준화되고 유지 관리가 용이한 프런트 엔드 코드를 기록하는 데 사용되며, 이는 많은 프런트 엔드를 분석하여 달성됩니다. Github의 코드 라이브러리, 프런트엔드 코드 작성 사양 요약. 그냥 가져가세요.

Thanks

    @ Ruan YiFeng:

  1. @materliu: https://materliu.github.io/code-guide

    2. @hzlzh:

  2. @tguide:

    3. 프론트 엔드 범용 사양

  3. 황금률

    4. 항상 동일한 코딩 사양을 따르세요. 여기에 나열하거나 직접 요약할 수 있습니다. 본 사양에 오류가 있으면 수정해 주시기 바랍니다.

  4. 동일한 프로젝트에 얼마나 많은 사람이 작업하더라도 모든 코드 줄이 동일한 사람이 작성한 것처럼 보이도록 하세요.

    5. 프로젝트 이름 지정

프로젝트 이름은 모두 소문자이며 대시로 구분되어 있습니다. 예: my-project-name

파일 이름 지정

파일 이름 지정은 이전 규칙을 참조합니다. 여러 단어로 구성된 경우 대시 연결 방법을 사용합니다. 예: error-report.html

복수형이 있는 경우. 구조에서는 복수형 명명법을 사용하세요(예: 스크립트, 스타일, 이미지, 데이터 모델

). 파일 이름은 소문자 영문자 a~z, 숫자 0~9 정렬 또는 공백 및 -와 같은 특수 기호로만 구성할 수 있습니다. $ 등은 금지됩니다.

의미를 더 잘 표현하기 위해 파일 이름에는 영어 명사 또는 영어 약어를 사용합니다.

이 모듈이 브라우저에서 스팸 광고로 필터링되는 것을 방지하기 위해 ad, adv, adver, 광고 등 광고가 포함된 영어 단어 이름을 지정할 수 없습니다. 이는 모든 파일 이름 지정에 적용됩니다.

index.shtml 가이드 페이지 및 홈페이지


main.shtml 홈페이지

download.shtml 다운로드 페이지

act.html 이벤트 목록 페이지

video.html video

cdkey.html CDKEY 페이지

  • base.css 기본 스타일

  • layout.css 프레임 레이아웃

  • module.css 모듈 스타일

  • global.css 글로벌 스타일

  • font.css 글꼴 스타일

  • index.css 홈 페이지 스타일

  • link.css 링크 스타일

  • print.css 인쇄 스타일

  • HTML 사양

    Syntax
  • 4칸 들여쓰기, 보장된 코드입니다. 상황에 따라 일관성을 보여주는 유일한 방법입니다.

    중첩 노드는 들여쓰기되어야 합니다(공백 4개).
  • 속성에는 작은따옴표가 아닌 큰따옴표를 사용하세요.

    자동 닫는 태그 끝에 슬래시를 사용하지 마세요. HTML5 사양에서는 슬래시가 선택 사항이라고 명시하고 있습니다.
  • 선택적인 닫는 태그(예: 36cc49f0c466276486e50c850b7e4956)를 무시하지 마세요. 

    ![](images/logo.png)

    HTML5 doctype
  • 모든 HTML 페이지 시작 부분에 이 간단한 doctype을 사용하여 표준 모드를 ​​활성화하면 모든 브라우저에서 최대한 일관되게 표시됩니다.

    doctype은 대소문자를 구분하지 않지만 규칙에 따라 doctype은 대문자로 표시됩니다
    • <!DOCTYPE html>
  • Language 속성

    <html lang="en"></html>

    문자 인코딩
문자 인코딩을 명시적으로 선언하면 브라우저가 페이지 내용을 빠르고 쉽게 결정할 수 있습니다. 렌더링됩니다. 이렇게 하면 HTML에서 문자 엔터티 태그를 사용하지 않아도 되므로 모든 것이 문서 인코딩(일반적으로 UTF-8 인코딩 사용)과 일치하게 된다는 장점이 있습니다. 

<meta charset="UTF-8">

IE 호환 모드

IE는 현재 페이지를 그리는 데 사용해야 하는 IE 버전을 결정하기 위해 특정 e8e496c15ba93d81f6ea4fe5f55a2244 태그를 사용하는 것을 지원합니다. 특별히 필요한 경우가 아니라면 엣지 모드로 설정하여 IE가 지원하는 최신 모드를 채택하도록 알리는 것이 가장 좋습니다. 

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Responsive

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS 및 JavaScript 소개

HTML5 사양에 따르면 일반적으로 CSS 및 JavaScript를 도입할 때 유형을 지정할 필요가 없습니다. 각각 text/css 및 text/javascript가 기본값이기 때문입니다. 

<!-- External CSS --><link rel="stylesheet" href="code-guide.css?1.1.11"><!-- In-document CSS --><style>/* ... */</style><!-- JavaScript --><script src="code-guide.js?1.1.11"></script>

실용성이 완벽함보다 낫습니다

HTML 표준과 의미를 따르도록 노력하되 실용성을 희생해서는 안 됩니다. 항상 문제는 복잡성을 최소화하고 라벨을 최소화하여 해결해야 합니다.

태그 수를 줄여보세요

HTML 코드를 작성할 때 중복되는 상위 노드를 최대한 피해야 합니다. HTML을 줄이기 위해 반복하고 리팩토링해야 하는 경우가 많습니다. 다음 예를 고려하십시오. 

<!-- Not so great --><span class="avatar">
    ![](...)</span><!-- Better -->
![](...)

속성 순서

HTML 속성은 가독성을 보장하기 위해 특정 순서로 표시되어야 합니다.


class

id



name

data-*

src, for, 유형, href, 값, 최대 길이, 최대, 최소, 패턴

자리표시자 , title, alt

aria-*, role

  1. required, readonly,disabled

  2. class는 재사용 가능성이 높은 구성 요소를 위해 설계되었으며 이론상으로는 먼저 있어야 합니다. ID는 더 구체적이고 자제해서 사용해야 하므로(예: 페이지 내 북마크) 두 번째로 사용됩니다.

    부울 속성
  3. 부울 속성은 값을 선언할 필요가 없는 속성을 참조합니다. XHTML에서는 각 속성에 대해 선언된 값이 필요하지만 HTML5에서는 그렇지 않습니다.

    一个元素中 Boolean 属性的存在表示取值 true，不存在则表示取值 false。

    简而言之，不要为 Boolean 属性添加取值。

    <input type="text" disabled>

    JavaScript 生成标签

    在 JavaScript 文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

    CSS 规范

    语法

    使用四个空格的缩进，这是保证代码在各种环境下显示一致的唯一方式。

    使用组合选择器时，保持每个独立的选择器占用一行。

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

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

    每条声明 : 后应该插入一个空格。

    每条声明应该只占用一行来保证错误报告更加准确。

    所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出错。

    逗号分隔的取值，都应该在逗号之后增加一个空格。

    不要在颜色值 rgb() rgba() hsl() hsla()和 rect() 中增加空格，并且不要带有取值前面不必要的 0 (比如，使用 .5 替代 0.5)。

    所有的十六进制值都应该使用小写字母，例如 #fff。因为小写字母有更多样的外形，在浏览文档时，他们能够更轻松的被区分开来。

    尽可能使用短的十六进制数值，例如使用 #fff 替代 #ffffff。

    为选择器中的属性取值添加引号，例如 input[type="text"]。 他们只在某些情况下可有可无，所以都使用引号可以增加一致性。

    不要为 0 指明单位，比如使用 margin: 0; 而不是 margin: 0px;。

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

    声明顺序

    相关的属性声明应该以下面的顺序分组处理：

    1. Positioning

    2. Box model 盒模型

    3. Typographic 排版

    4. Visual 外观

    Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。

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

    .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;
}

    Don't use @import

    与2cdf5bf648cf2f33323966d7f58a7f3f相比，@import较慢，增加额外的页面请求，并可能导致其他不可预见的问题。

    <!-- Use link elements --><link rel="stylesheet" href="core.css?1.1.11"><!-- Avoid @imports --><style>@import url("more.css?1.1.11");</style>

    媒体查询位置

    尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。这里是一个典型的案例。

    .element { ... }.element-avatar { ... }.element-selected { ... }

@media (min-width: 480px) {.element { ...}.element-avatar { ... }.element-selected { ... }
}

    前缀属性

    当使用厂商前缀属性时，通过缩进使取值垂直对齐以便多行编辑。

    /* Prefixed properties */.selector {-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

    单条声明的声明块

    在一个声明块中只包含一条声明的情况下，为了易读性和快速编辑可以考虑移除其中的换行。所有包含多条声明的声明块应该分为多行。

    这样做的关键因素是错误检测 - 例如，一个 CSS 验证程序显示你在 183 行有一个语法错误,如果是一个单条声明的行，那就是他了。在多个声明的情况下，你必须为哪里出错了费下脑子。

    .span1 { width: 60px; }.span2 { width: 140px; }.span3 { width: 220px; }

    属性简写

    尽量不使用属性简写的方式，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:

    • padding

    • margin

    • font

    • background
      -border
      -border-radius

    大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。

    /* Bad example */.element {margin: 0 0 10px;background: red;background: url("image.jpg");border-radius: 3px 3px 0 0;
}/* Good example */.element {margin-bottom: 10px;background-color: red;background-image: url("image.jpg");border-top-left-radius: 3px;border-top-right-radius: 3px;
}

    Less 和 Sass 中的嵌套

    避免不必要的嵌套。可以进行嵌套，不意味着你应该这样做。只有在需要给父元素增加样式并且同时存在多个子元素时才需要考虑嵌套。

    // Without nesting.table > thead > tr > th { … }.table > thead > tr > td { … }// With nesting.table > thead > tr {
    > th { … }
    > td { … }
}

    代码注释

    代码是由人来编写和维护的。保证你的代码是描述性的，包含好的注释，并且容易被他人理解。好的代码注释传达上下文和目标。不要简单地重申组件或者 class 名称。

    class 命名

    保持 class 命名为全小写，可以使用短划线（不要使用下划线和 camelCase 命名）。短划线应该作为相关类的自然间断。(例如，.btn 和 .btn-danger)。

    避免过度使用简写。.btn 可以很好地描述 button，但是 .s 不能代表任何元素。

    class 的命名应该尽量短，也要尽量明确。

    使用有意义的名称；使用结构化或者作用目标相关，而不是抽象的名称。

    命名时使用最近的父节点或者父 class 作为前缀。

    使用 .js-* 来表示行为(相对于样式)，但是不要在 CSS 中包含这些 class。

    选择器

    使用 class 而不是通用元素标签来优化渲染性能。

    避免在经常出现的组件中使用一些属性选择器 (例如，[class^="..."])。浏览器性能会受到这些情况的影响。

    减少选择器的长度，每个组合选择器选择器的条目应该尽量控制在 3 个以内。

    只在必要的情况下使用后代选择器 (例如，没有使用带前缀 classes 的情况).

    代码组织

    以组件为单位组织代码。

    制定一个一致的注释层级结构。

    使用一致的空白来分割代码块，这样做在查看大的文档时更有优势。

    当使用多个 CSS 文件时，通过组件而不是页面来区分他们。页面会被重新排列，而组件移动就可以了。

    编辑器配置

    根据以下的设置来配置你的编辑器，将这些设置应用到项目的 .editorconfig 文件，来避免常见的代码不一致和丑陋的 diffs。

    • 使用四个空格的缩进。

    • 在保存时删除尾部的空白字符。

    • 设置文件编码为 UTF-8。

    • 在文件结尾添加一个空白行。

    JS 规范

    语法

    使用四个空格的缩进，这是保证代码在各种环境下显示一致的唯一方式。

    声明之后一律以分号结束， 不可以省略

    完全避免 == != 的使用， 用严格比较条件 === !==

    eval 非特殊情况， 禁用！！！

    with 非特殊情况， 禁用！！！

    单行长度，理论上不要超过80列，不过如果编辑器开启"自动换行"的话可以不考虑单行长度

    接上一条，如果需要换行，存在操作符的情况，一定在操作符后换行，然后换的行缩进4个空格

    这里要注意，如果是多次换行的话就没有必要继续缩进了，比如说下面这种就是最佳格式。

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

    空行

    方法之间加

    单行或多行注释前加

    逻辑块之间加空行增加可读性

    变量命名

    标准变量采用驼峰标识

    使用的ID的地方一定全大写

    使用的URL的地方一定全大写, 比如说 reportURL

    涉及Android的，一律大写第一个字母

    涉及iOS的，一律小写第一个，大写后两个字母

    常量采用大写字母，下划线连接的方式

    构造函数，大写第一个字母

    var thisIsMyName;var goodID;var AndroidVersion;var iOSVersion;var MAX_COUNT = 10;function Person(name) {this.name = name
}

    字符常量

    一般情况下统一使用单引号

    null的使用场景

    初始化可能以后分配对象值的变量

    与一个可能或可能没有对象值的初始化变量进行比较

    传入一个预期对象的函数

    从预期对象的函数返回

    不适合null的使用场景

    不要使用null来测试是否提供参数

    不要测试值为null的未初始化变量

    undefined使用场景

    永远不要直接使用undefined进行变量判断

    使用字符串 "undefined" 对变量进行判断

    // Badvar person;console.log(person === undefined);    //true// Goodconsole.log(typeof person);    // "undefined"

    对象字面量

    // Badvar team = new Team();
team.title = "AlloyTeam";
team.count = 25;// Goodvar team = {
    title: "AlloyTeam",count: 25
};

    数组声明

    // Badvar colors = new Array("red", "green", "blue");var numbers = new Array(1, 2, 3, 4);// Goodvar colors = [ "red", "green", "blue" ];var numbers = [ 1, 2, 3, 4 ];

    单行注释

    双斜线后，必须跟注释内容保留一个空格

    与下一行代码缩进保持一致

    可位于一个代码行的末尾，双斜线距离分号四个空格

    // Goodif (condition) {// if you made it here, then all security checks passed
    allowed();
}var zhangsan = "zhangsan";    // 双斜线距离分号四个空格，双斜线后始终保留一个空格

    多行注释格式

    最少三行

    前边留空一行

    /**
 * 注释内容与星标前保留一个空格
 */

    何时使用多行注释格式

    难于理解的代码段

    可能存在错误的代码段

    浏览器特殊的HACK代码

    业务逻辑强相关的代码

    想吐槽的产品逻辑, 合作同事

    文档注释

    各类标签 @param @method 等 参考 

    用于：方法、构造函数、对象

    /**
 * here boy, look here , here is girl
 * @method lookGril
 * @param {Object} balabalabala
 * @return {Object} balabalabala
 */

    括号对齐

    标准示例 括号前后有空格，花括号起始不另换行，结尾新起一行

    花括号必须要，即使内容只有一行

    涉及 if for while do...while try...catch...finally 的地方都必须使用花括号，即使内容只有一行

    if else 前后留有空格

    if (condition) {doSomething();
} else {doSomethingElse();
}

    switch

    switch和括号之间有空格，case需要缩进，break之后跟下一个case中间留一个空白行

    花括号必须要， 即使内容只有一行。

    switch 的 falling through 一定要有注释特别说明，no default 的情况也需要注释特别说明况

    switch (condition) {case "first":// codebreak;case "second":// codebreak;default:// code
}

    for

    普通for循环, 分号后留有一个空格， 判断条件等内的操作符两边不留空格

    前置条件如果有多个，逗号后留一个空格

    for-in 一定要有 hasOwnProperty 的判断， 否则 JSLint 或者 JSHint 都会有一个 warn

    for (i=0, len=values.length; i<len; i++) {
    process(values[i]);
}var prop;for (prop in object) {// 注意这里一定要有 hasOwnProperty 的判断， 否则 JSLint 或者 JSHint 都会有一个 warn ！if (object.hasOwnProperty(prop)) {
        console.log("Property name is " + prop);
        console.log("Property value is " + object[prop]);
    }
}

    变量声明

    所有函数内变量声明放在函数内头部，只使用一个 var(多了JSLint报错)， 一个变量一行， 在行末跟注释， 注释啊，注释啊，亲

    函数声明

    一定先声明再使用， 不要利用 JavaScript engine的变量提升特性, 违反了这个规则 JSLint 和 JSHint都会报 warn

    function declaration 和 function expression 的不同，function expression 的（）前后必须有空格，而function declaration 在有函数名的时候不需要空格，没有函数名的时候需要空格。

    函数调用括号前后不需要空格

    立即执行函数的写法, 最外层必须包一层括号

    "use strict" 决不允许全局使用， 必须放在函数的第一行， 可以用自执行函数包含大的代码段, 如果 "use strict" 在函数外使用， JSLint 和 JSHint 均会报错

    function doSomething(item) {// do something
}var doSomething = function (item) {// do something
}// Good
doSomething(item);// Bad: Looks like a block statement
doSomething (item);// Good
(function() {    "use strict";function doSomething() {// code
    }
})();

위 내용은 웹 프런트엔드 코드 사양의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：webpack으로 구현된 다중 항목 프로젝트 스캐폴딩다음 기사：webpack으로 구현된 다중 항목 프로젝트 스캐폴딩

관련 기사

더보기