PC站点开发规范（待补充）

最新推荐文章于 2024-04-25 12:26:33 发布

oo灵性

最新推荐文章于 2024-04-25 12:26:33 发布

阅读量312

点赞数

分类专栏： JavaScript 前端文章标签：开发规范

本文链接：https://blog.csdn.net/u010427666/article/details/79219518

版权

JavaScript 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

前端

16 篇文章 1 订阅

订阅专栏

本文详细介绍了PC站点的开发规范，包括最佳实践、命名规则、HTML5页面规范、属性顺序、JavaScript标准以及文档注释的撰写方式。强调了代码一致性、命名规则的使用以及遵循HTML5标准的重要性。

摘要由CSDN通过智能技术生成

命名规则

项目命名（project）

全部采用小写方式，以下划线分隔。例：my_project_name

目录命名

参照项目命名规则，有复数结构的，要采用复数命名法。例：scripts, styles, images

HTML 文件命名

参照项目命名规则。例：error_***.html

JS 文件命名

参照项目命名规则。例：account_**.js

HTML5页面规范

DOCTYPE启用网页标准模式，每个页面规范原则上使用一套模板。
每个页面编码使用”UTF-8”，包括文件编码也使用”UTF-8”。
根据HTML5规范，通常在引入CSS和JS时不需要指明type,因为 text/css 和 text/javascript 分别是他们的默认值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="format-detection" content="telphone=no, email=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>title</title>
    <meta name="Keywords" content="***,**">
    <meta name="Description" content="**,****">
    <link rel="stylesheet" href="css/index.min.css">
</head>
<body>

</body>
</html>

属性顺序

尽可能属性顺序一致,保证易读性。

class
id
name
data-*
src,for,type,href value,max-length,max,pattern
placeholder,title,alt
required,readonly,disabled

JavaScript

不要混用tab 和 space 。
对上下文this的引用只能使用‘_this’,’that’,’self’ 其中一个来命名。

变量命名

标准变量采用驼峰式命名。
‘ID’在变量名中全大写。
‘URL’在变量名中全大写。
‘Android’ 在变量名中大写第一个字母。
*‘iOS’在变量名中小写第一个，大写后两个字母。

常量全大写，用下划线链接。
构造函数，大写第一个字母。
jQuery 对象必须以‘$’ 开头命名。

/* 例如： */
var thisIsMyName;
var goodID;
var reportURL;
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) {
    this.name = name;
}
// good
var $body = $('body');

引号

最外层统一使用单引号。

var a = 'foo',
    z = '<div id="test"></div>'

文档注释

尽量按这种注释进行抒写。

/**
 * @func
 * @desc 一个带参数的函数
 * @param {string} a - 参数a
 * @param {number} b=1 - 参数b默认值为1
 * @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx
 * @param {object} d - 参数d为一个对象
 * @param {string} d.e - 参数d的e属性
 * @param {string} d.f - 参数d的f属性
 * @param {object[]} g - 参数g为一个对象数组
 * @param {string} g.h - 参数g数组中一项的h属性
 * @param {string} g.i - 参数g数组中一项的i属性
 * @param {string} [j] - 参数j是一个可选参数
 */
function foo(a, b, c, d, g, j) {
    ...
}