PC站点开发规范

时间 2019-11-16

标签站点开发规范繁體版

原文原文链接

最佳方式

坚持制定好的代码规范。
不管团队人数多少，代码应该同出一门。
若是想要为这个规范作贡献或以为有不合理的地方，进行讨论。

命名规则

项目命名（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>

复制代码

属性顺序

尽量属性顺序一致,保证易读性。javascript

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');

复制代码

引号

最外层统一使用单引号。css

var a = 'foo',
    z = '<div id="test"></div>'
复制代码

文档注释

尽可能按这种注释进行抒写。html

/**
 * @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) {
    ...
}

复制代码

通用的文本和字体样式

一、标题java

要给 h1-h6 标题 -- 包括做为连接的标题 -- 定义缺省样式。在你的CSS文档顶部定义它们，在必要时修改它们以保持整个站点的一致性。
标题必须有层次，能代表从大到小不一样级别的重要性，h1具备最大的字体大小。
SEO：要大体地了解页面的层次组织和阅读效果，在开发者工具里关闭CSS效果，你会看到一个基于文字的视图，包括全部的 h1-h6, strong, em 等标签。

二、连接程序员

必须定义连接的缺省样式，样式要和主要的文字样式不一样，载悬停状态下也要有不一样的样式。
当给连接加下划线样式时，使用 border-bottom 并用 text-decoration: none; 加点内边框。这样看起来更好一些。

L1我的自我修养

清晰的目标 - 结果导向，良好的工做交付。
明确的工做计划和时间管理，要事优先。
良好的沟通能力，主动反馈，合做意识。
不断学习新技术，更新本身的知识和技能储备。

L2研发团队Leader的自我修养

给程序员设定清晰的⼯做⽬标，合理的分配⼯做任务，并及时给出明确的⼯做反馈
对程序员进⾏绩效考核，并给予必要的辅导。
带领团队实现良好的⼯做交付，实现团队的成功。
向下的沟通和向上的沟通和作事情一样重要。

L3部门总监的自我修养

建⽴研发体系。
跨部⻔协调资源。
搭建完善的团队，培养技术⼈才。
给予下属充分的受权。

PC站点开发规范

最佳方式

命名规则

项目命名 （project）

目录命名

HTML 文件命名

JS 文件命名

HTML5页面规范

属性顺序

JavaScript

变量命名

引号

文档注释

通用的文本和字体样式

L1我的自我修养

L2研发团队Leader的自我修养

L3部门总监的自我修养

项目命名（project）