前端开发规范（pc和vue）

最佳方式

坚持制定好的代码规范。
无论团队人数多少，代码应该同出一门。
如果想要为这个规范做贡献或觉得有不合理的地方，进行讨论。

命名规则

项目命名（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) {
    ...
}

通用的文本和字体样式

1、标题

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

2、链接

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

vue命名规范

components目录下，组件的外层目录和组件文件名统一用小写- 连字符格式。

代码再引入组件时用大驼峰。
template模板中使用组件用小写和-连字符：
函数名用小驼峰
封装一个功能性模块是，如网络请求、私有方法时，加上_线；如： _add()
css选择器用小写+连字符如：class="head_lf"

统一使用alloy的强eslint规则

vue 环境设置步骤

npm install --save-dev eslint babel-eslint vue-eslint-parser@5.0.0 eslint-plugin-vue eslint-config-alloy

create .eslintrc.js 设置内容如下：

module.exports = {
    extends: [
        'alloy',
        'alloy/vue',
    ],
    env: {
        // 您的环境变量（包含多个预定义的全局变量）
        // Your environments (which contains several predefined global variables)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // 您的全局变量（设置为 false 表示它不允许被重新赋值）
        // Your global variables (setting to false means it's not allowed to be reassigned)
        //
        // myGlobal: false
    },
    rules: {
        // 自定义您的规则
        // Customize your rules
    }
};

易错eslint 规则

for in 内部必须有 hasOwnProperty

// bad
for (key in foo) {
    doSomething(key);
}
// good
for (key in foo) {
    if (Object.prototype.hasOwnProperty.call(foo, key)) {
        doSomething(key);
    }
}

switch 的 case 内有变量定义的时候，必须使用大括号将 case 内变成一个代码块

// bad
switch (foo) {
    case 1:
        const x = 1;
        break;
}
// good
switch (foo) {
    case 1: {
        const x = 1;
        break;
    }
}

禁止在 return 语句里使用 await

// bad
async function foo() {
    return await bar();
}
// good
async function foo() {
    const b = await bar();
    return b;
}

必须使用 ... 而不是 Object.assign，除非 Object.assign 的第一个参数是一个变量

// bad
const foo = Object.assign({}, bar);
// good
const foo = { ...bar };
// 第一个参数为变量时允许使用 Object.assign
Object.assign(foo, baz);

eslint-config-alloy

GIT 分支命名规范

分支命名格式为：[type]_[developer name]_[desc]|[tapaid]
[type]: 根据开发分支的性质，若是开发功能，type 为rel, 若是修改问题，者type 为fix。如： rel_zgxie_1111

GIT commit 规范

commit 的type 类型如下：

feat：新增具体的功能与特性描述。
fix：修复xxxx 问题or bug。
build：打包体积最好说明打哪个页面or功能。

项目管理控制及内容建设

指定主负责人对项目目录、组件、第三方库进行强流程管理。
- 引入第三方库之前要有分享或者文档分享
- 主要工程目录改的，需要进入主要负责人CR
对H5组件、第三方组件以及其他工具库进行补充、拆分和优化。

L1个人自我修养

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

L2研发团队Leader的自我修养

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

L3部门总监的自我修养

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

javascript-standard-style

3-10 年内部岗位涉及前后端、PM（虾皮内推、乐信内推、vivo、oppo）推荐机会，欢迎联系，wx号： X915324 ；也可发简历到： zgxie@126.com