重学—前端必备

这是我参与更文挑战的第30天，活动详情查看: 更文挑战

前话

是结束，也是开始。 通过参加掘金的这次更文挑战，让自己收获很多，做一件事很容易，一直坚持做一件事情，很难很难，中间放假的那段时间，也想过放弃，但是，吹出去的牛逼，怎么也要兑现，活着，不就是要面子嘛，翻着一篇篇曾经写过的文章，慢慢的都是回忆，学到的果然是自己的，对很多大神来说，文章的质量不是很高，很多都是自己重学前端的基础知识笔记，单纯的为了记录一下，自己学习的过程。当然，一切也都是按照自己的学习计划进行的，这三十天，基本上回顾了作为一名前端工程师想成为全栈工程师的所有必备知识，想给自己点个赞，其实，每篇文章，我都给自己点了赞?。之所以说是结束，也是开始，是想告诉自己，接下来的日子还很重，既然养成了这个习惯，那就继续坚持。从明天开始，深入的攻克每一块，兑现自己之前吹过的牛逼！！！

1，引言

为了提升团队凝聚力，统一团队代码风格，优化团队协作效率，约束同一项目不同程序员的代码风格是很有必要的。

首先自己写代码的要达到要符合web标准，兼顾结构分明、兼容性优良、页面性能高、代码简洁明了等要求，才能约束他人，正所谓一屋不扫何以扫天下，

打造一份属于我们每一个人的财富，加油，让我们一起进步！！！

2，开发环境

2.1、开发工具

VSCode, WebStorm, Sublime, Atom

统一开发： 尽量都使用：VSCode, 轻量，插件多，免费，   
复制代码

2.2、VSCode工具插件

Vue插件： eslint, HTML CSS Support,  HTML Snippets, Live Server, Vetur, 
         Vue VSCode Snippets, vue TypeScript Snippets, 
Git插件： Git History, GitLens
Theme:   Vscode-icons, Snazzy Operator, 
其他：  koroFileHeader(注释)，JSON5.syntax 等等
复制代码

2.3、命名规范

PascalCase  大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo
camelCase   小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo
复制代码

3, vue的开发规范

3.1、命名规范

  1.1.1 项目命名规范 (project)

全部采用小写方式，多个单词之间以中划线分割
 正例： btp-core-standardfrontend-admin
 不建议： BtpCoreStandardfrontendAdmin/btp_core_standardfrontend_admin
复制代码

1.1.2 组件命名规范，以Vue官方规范为主（component）

1, 组件名： 组件名应该始终是多个单词，命名规范：大驼峰：ToolCase

​ 多个是单个单词，前面拼接：’The’ 前缀, 比如： TheHeader

正例： export default {
       name: 'ToolCase'
     }
不建议: export default {
       name: 'Todo'
       // 或者
       name: 'tool-case'
     }
复制代码

2, 组件的文件名称：tool-case 格式, 基础文件命名：base-开头

正例：
  components/
   |- tool-case.vue
   |- my-component.vue
   |- base-table.vue
   
不建议:
  components/
   |- myComponent.vue
   |- MyComponent.vue
 
复制代码

3, template 模版中，使用组件格式：大驼峰： ToolCase, 并且使用自闭合组件

正例： <ToolCase />
      <TheHeader />

不建议：<tool-case />
复制代码

1.1.3 方法，变量，命名规范（method）

 变量   (小驼峰命名，前缀为形容词)
  let maxCount = 10
  let minStr = 'str'
​ 常量 （全部大些，多个单词，用下划线分割）
  const URL = 'xxxx'
  const MAX_COUNT = '30000'
​ 方法，函数(小驼峰命名，前缀为动词)
  can  -  判断是否可执行某个动作
  has  -  判断是否包含某个值
  is   -  判断是否为某一个值
  get  -  获取某一个值
  set  -  设置某一个值
  load -  加载某些数据
  hanlder - 操作某些方法
  do   -   做某些事情
正例：  function getName(){}
       function handlerOperater() {}
       function isQuery() {}
复制代码

1.1.4 类&构造函数命名规范 （class）

类的命名： 大驼峰 ， 前缀为名词

正例：  class Persion { }
       class CatAnmial { }
复制代码

1.1.5 文件夹命名规范 （file）

   文件夹命名： camelCase VS kebab-cas
   
​  展开node_modules中的项目依赖，会发现，几乎所有的项目文件夹命名都是 kebab-case命名的，
  使用kebab-case    命名的文件夹比camelCase命名的文件夹看起来更清晰,

1, 属于components文件夹下的子文件夹，使用大写字母开头的PascalBase风格(大驼峰)，里面必须包含
   index.vue或者index.js文件
  export { default as AppMain } from './AppMain'
  export { default as Navbar } from './Navbar'
复制代码

3.2、统一T的项目结构解析

||— build                           构建脚本目录
    |— build.js                     生产环境构建（编译打包）脚本
    |— check-versions.js            版本验证工具
    |— utils.js                     构建相关工具方法（主要用来处理css类文件的loader）
    |— vue-loader.conf.js           处理vue中的样式
    |— webpack.base.conf.js         webpack基础配置
    |— webpack.dev.conf.js          webpack开发环境配置
    |— webapck.prod.conf.js         webpack生产环境配置
|— config                   项目配置
    |— dev.env.js           开发环境变量
    |— index.js             主配置文件
    |— prod.env.js          生产环境变量
    |— test.env.js          测试环境变量
|— node_modules             项目依赖模块
|— src
    |— api                  后端统一接口封装
        |—  login.js        登陆相关接口封装
        |—  user.js         用户信息接口封装
        |—  data.js         基础数据接口封装
    |— assets           资源目录，资源会被webpack构建
    |— components   
            |— BaseTable
                  |- index.vue
            |— FuncUserd
                  |- index.vue
            |— PageComponents
                  |- index.vue
    |— filters              过滤器方法
    |— icons                svg图标资源存放
    |— router               路由文件
    |— store                store信息存放
    |— styles               公共全局样式文件
    |— utils
    |— views                视图 
         |— layout          布局视图 
         |— login           登陆视图
             |- index.vue   
         |— tool            其他视图
|— App.vue                  
|— main.js                  项目入口
|— permission.js            路由拦截
|— static   纯静态资源，不会被webpack构建，eg:没有npm包模块
    |- js                   存放第三方JS插件
|— .babelrc                 babel的配置文件
|— .editorconfig            编辑器的配置文件
|— .eslintignore           eslint忽略的文件
|— .eslintrc.js             eslint配置文件
|— .gitignore               git的忽略配置文件
|— .postcssrc.js            postcss的配置文件
|— deployflow.properties    神兵部署文件
|— index.html               html模板，入口页面
|— package.json             npm包配置文件，依赖包信息
|— package-lock.json        锁定安装时包的版本号
|— README.md                项目介绍
复制代码

3.3、注释规范

​ 单个文件注释规范，每个独立的vue文件开头都要进行注释，表明该文件的描述信息、作者、创建时间等。

• api 接口文件，接口API必须添加注释
• store 中的state, mutation, action 等必须添加注释
• 文件中的methods必须添加注释
• 非常见单词的变量，必须添加注释

Vscode 安装注释插件： koroFileHeader

常用快捷键：

文件头部添加注释：window：CTRL+ALT+i, mac：CTRL+CMD+i

光标处或者方法函数头添加注释：window: CTRL+ALT+t mac: CTRL+CMD+i

文件头注释

 快捷键： (ctrl + cmd +i )
<!--
 * @Author: your name
 * @Date: 2020-08-18 13:54:26
 * @LastEditTime: 2020-08-19 10:39:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /btp_core_standrard_frontend_base/src/views/login/index.vue
-->
翻译
<!--
 * @Descripttion: (对该文件的信息描述)
 * @version: (版本)
 * @Author: (作者)
 * @Date: (文件创建时间)
 * @LastEditors: (最后更新作者)
 * @LastEditTime: (最后更新时间)
--> 
复制代码

3.4 、函数注释

 ​ 快捷键：（函数声明的头部就行注释说明： ctrl + cmd + t）
 /**
  * @description: 
  * @param {type} 
  * @param {type} 
  * @return {type} 
  */
复制代码

3.5、变量的注释

 ​ 说明：(在变量的后面进行变量的注释说明，必要的注释，可以方便你我他)
 custId: '', // 客户ID
 custCampId: '', // 任务ID
 mobile: '', // 接收短信的手机号
 idTemplate: '', // 短信模板ID
 smsCodeType: '' // 短信类型，1-首拨短信，617-脱保挽回自助承保短信
复制代码

3.6、行内代码块的注释

​ 当我们在写一个比较复杂的方法的时候，需要进行注释，这个注释是很有必要的，这时需要确定是否使用行级注释还代码块的注释

代码块的注释：

addNode(a, b) {
      /**
       * 添加树的节点
       * 1, 首先,出阿健:
       * 2，然后
       * 3，紧接
       */
    },
复制代码

行内注释

  // 选择二级类目显示相应的模板
   changeItem(val) {}
复制代码

3.7、编码规范

• 1, v-for 循环必须加上key属性， 在整个for循环中key需要唯一，建议赋值为 item.id, 如果没有id, 建议拼接

<ul>
   <li v-for="item in list" :key="itme.id"> 
   {{ todo.text }}
   </li>
</ul>

复制代码

• 2, 避免v-if 和v-for 同时作用在一个元素上

• 3, 测试通过的代码，禁止出现console.log(), debugger 这样的调试代码

• 4, 除三目运算符之后，禁止 if , else 简写

• 5, 组件样式设置作用域 ，添加 scoped

  <style scoped>
     .btn-close {}
     .btn-iframe {}
  </style>
  
  复制代码

3.8、UI 框架选择

1, PC端： Vue项目优先选择：Element UI
2, 移动端： Vue项目优先选择： Vant-ui

复制代码

3.9、CSS 预处理器选择

1, 建议 sass, less
复制代码

4, JavaScript开发规范

4.1、变量名

1.变量名推荐使用小驼峰法来命名，代码中的命名均不能以下划线，也不能以下划线或美元符号结束

例子: maxCase
反例: _name / name_ / name$

复制代码

2.方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式

正例: localValue / getHttpMessage() / inputUserId

复制代码

3.常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长

正例：cosnt MAX_STOCK_COUNT = '10'
反例：const MAX_COUNT = 'xxx'

复制代码

4. 类和构造函数命名，大驼峰命名，即首字母大写

function Student(name) {
    this.name = name;
}
class CatAmian() {
 
}

复制代码

提示:定义的名字要有一定的可读性和可理解性, 利于新人接手项目时可以快速梳理代码逻辑!!!

4.2、代码格式,空格

1.使用 2 个空格进行缩进

正例：
if (x < y) {
  x += 10;
} else {
  x += 1;
}

复制代码

2, 不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性

3, 通常运算符 ( = + – * / ) 前后需要添加空格:

4.3、字符串

1.统一使用单引号(‘)，不使用双引号(“)，字符串拼接推荐使用ES6中 拼接

这在创建 HTML 字符串非常有好处：
正例:
let str = 'foo';
let testDiv = '<div id="test"></div>';

正例:
let str = `hello, my name is ${变量}.`;
反例：
let str = "hello, my name is " + 变量 + " ."

复制代码

4.4、对象声明

1.使用字面量创建对象 / 使用字面量来代替对象构造器

正例：
var user = {
  age: 0
};

反例：
var user = new Object();
user.age = 0;

复制代码

4.5、括号

1.下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

正例：
if (condition) {
  doSomething();
}

反例：
if (condition) doSomething();

复制代码

4.6、undefined 判断

1.永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串’undefined’对变量进行判断

正例：
if (typeof person === 'undefined') {
    ...
}

反例：
if (person === undefined) {
    ...
}

复制代码

4.7、条件判断,循环最多三层

1.条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释。

4.8、 慎用 console.log

1.因 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能

4.9、script引入

引入资源使用相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除非这两者协议都不可用

推荐：
    <script src="https://cdn.com/foundation.min.js"></script>
不推荐：
  <script src="http://cdn.com/foundation.min.js"></script>

复制代码

5、HTML开发规范

5.1、标准

1.文档类型声明及编码: 统一为html5声明类型;

<!DOCTYPE html>

复制代码

HTML5 元素名可以使用大写和小写字母。推荐使用小写字母, 并且建议每个元素都要添加关闭标签

<section> 
  <p>这是一个段落。</p>
</section>

复制代码

2.嵌套的节点应该缩进 2 个空格(一个 tab), 不建议使用 TAB。

3.所有编码需要遵循html（XML）标准，标签&属性&属性命名必须由小写字母及下划线数字组成，且所有标签必须闭合，包括br()，hr()等。属性值用双引号;

5.2、标签使用

1.语义化标签:

HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 span 标签等无语义标签的使用;
内联元素中不可嵌套块级元素。

例如:<header></header>
    <footer></footer>
内联元素：a、b、span、img、input、select、textarea、em、img、strong
块级元素：ul、ol、li、dl、dt、dd、h1、h2、h3、h4…p、section、div、form
空元素： <input type=”hidden”/>、br>、hr>、link>、meta>
小结：块元素总是独占一行，margin对内联元素上下不起作用
     块级中可以包括一部分块级元素，并可以包含内联元素。内联元素中不包含块级元素，只可以包含内联元素
     <p>标签虽然是块级元素，但不可包含其他块级元素
     块级与块级并列，内联与内联元素相并列

复制代码

5.3、标签属性/样式使用

1.需要为html元素添加自定义属性的时候，首先要考虑下有没有默认的已有的合适标签去设置，如果没有，可以使用须以”data-“为前缀来添加自定义属性，避免使用”data：”等其他命名方式;

2.书写链接地址时, 必须避免重定向，例如：href=”www.example.com/”, 即须在URL地址后面加上“/”;

3.在页面中尽量避免使用style属性,即style=”…”，应该尽量使用class或者id来定义新的样式，然后再对应的 css文件里面修改;

4, img标签不要遗忘alt

5.4、兼容性设置规范

1, 建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言 lang=”zh-CN”

2, 不同doctype在不同浏览器下会触发不同的渲染模式

3, 响应式的网页需要添加viewport

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=11,IE=EDGE,chrome=1">
    <meta charset="utf-8">
    <meta name=”viewport” content="width=device-width,initial-scale=1.0, 
    minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>xxxx</title>
  </head>
  <body>
  </body>
</html>

复制代码

6、CSS书写规范

6.1、命名

1. 类名使用小写字母，以中划线分割; id 采用驼峰式命名 ; 总之，命名要语义化，简明化

.swiper-image {

}
#headTitle {

}
不建议：不建议使用“_”下划线来命名CSS选择器
      1， 输入的时候少按一个shift键；
      2， 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）
      3， 能良好区分JavaScript变量命名（JS变量命名是用“_”）

复制代码

6.2、选择器

2. 尽量使用直接子选择器，否则，会造成性能损耗

正例： 
    .content > .title { 
       font-size: 2rem
    }
不建议：
    .content .title {
       font-size: 2rem
    }

复制代码

3. css 选择器中避免使用标签名

从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会
存在潜在的问题。

反例： .p.  .div { } 禁止使用

复制代码

4. 尽量使用缩写属性

不推荐:
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推荐:
padding: 0 1em 2em;

复制代码

5. 每个选择器及属性独占一行

不推荐：
button{
  width:100px;height:50px;color:#fff;background:#00a0e9;
}

推荐：
button{
  width:100px;
  height:50px;
  color:#fff;
  background:#00a0e9;
}

复制代码

6. 省略0后面的单位

不推荐：
div{
  padding-bottom: 0px;
  margin: 0em;
}

推荐：
div{
  padding-bottom: 0;
  margin: 0;
}

复制代码

6. 避免使用ID选择器及全局标签选择器防止污染全局样式

7. 避免兼容性属性的使用，比如text-shadow||css3的相关属性

8. 减少使用影响性能的属性，比如position：absolute||float

9. css属性书写顺序

建议遵循: 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 
    属性列举: 布局定位属性主要包括: display 、 list-style 、 
    position（相应的 top,right,bottom,left） 、 float & clear 、 visibility 和 overflow；
    自身属性主要包括: width 、height 、 margin 、 padding 、 border 和 background; 
    文本属性主要包括：color 、 font、 text-decoration 、 text-align 、 vertical-align 、 
    white- space 和其他content; 我所列出的这些属性只是最常用到的, 并不代表全部;

复制代码

10. JavaScript预留钩子的命名, 尽量使用id属性，可以更快的获取到dom

6.3、注意实现

1, 一律小写，中划线
2, 去掉小数点前面的0： 0.9rem => .9rem
3, 使用简写：margin： 0 1rem 3rem
4, 不要随便使用id
5, 避免使用 !important, 除去某些极特殊的情况，尽量不要不要使用 !important
   !important 的存在会给后期维护以及多人协作带来噩梦般的影响。
6, 布局组件样式，不要写修改全局样式的代码

复制代码

当存在样式覆盖层叠时，如果你发现新定义的一个样式无法覆盖一个旧的样式，只有加上 !important 才能生效时，是因为你新定义的选择器的优先级不够旧样式选择器的优先级高。所以，合理的书写新样式选择器，是完全可以规避一些看似需要使用 !important 的情况的。

7、总结

​ 这篇文章在很久之前写过，这次重新学习温习了一边，受益良多，2021年6月30日，这是收获的一个月，也是成长的一个月，还是那句话，是结束，也是开始。7月，8月，9月，等等等，接下来，开启远航之船?，踏上新的征程，书写自己的华丽人生，感谢掘金，加下来，我们一起加油。