前端代码——前端代码规范（含html、css、javascript、vue等）

2021-04-21 12:21 280人阅读评论(0)

前端代码规范

代码提交规范
HTML规范
CSS规范
JavaScript规范
Vue 代码规范
- - 常规
  - vuex

代码提交规范

每次提交代码时，commit按规范进行备注，如：本次提交新增了新功能：feat: 新增xx功能

code	info
feat: msg	新功能feature
fix: msg	修复bug
merge: msg	merge
docs: msg	文档修改
style: msg	格式，不影响代码运行的变动
refactor: msg	重构即不是新增功能，也不是修改bug的代码变动
test: msg	增加测试
chore: msg	构建过程或辅助工具的变动
rm: msg	删除文件或代码
pod: msg	pod install / pod update podName

HTML规范

普通标签使用小写，外部引入的组件标签使用大写

<div></div>
<el-button><el-button>
<Pagination />

属性的定义，统一使用双引号。

<input type="text" name="title" />

有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现
产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载
无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现
为图片添加 alt 属性，提高图片加载失败时的用户体验

<img src="#" alt="这是一张图片" />

为图片添加 width 和 height 属性，以避免页面抖动

<img src="#" alt="#" width="#" height="#">

CSS规范

前缀规范

class命名

class 必须单词全字母小写，单词间以 - 分隔（例如，.btn 和 .btn-danger）。
避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
class 名称应当尽可能短，并且意义明确。

CSS命名规范(规则)常用的CSS命名规则

 头：header
 内容：content/container
 尾：footer
 导航：nav
 侧栏：sidebar
 栏目：column
 页面外围控制整体佈局宽度：wrapper
 左右中：left right center
 登录条：loginbar
 标志：logo
 广告：banner
 页面主体：main
 热点：hot
 新闻：news
 下载：download
 子导航：subnav
 菜单：menu
 子菜单：submenu
 搜索：search
 友情链接：friendlink
 页脚：footer
 版权：copyright
 滚动：scroll
 内容：content
 标签：tags
 文章列表：list
 提示信息：msg
 小技巧：tips
 栏目标题：title
 加入：joinus
 指南：guide
 服务：service
 注册：regsiter
 状态：status
 投票：vote
 合作伙伴：partner

JavaScript规范

注释

原则

As short as possible（如无必要，勿增注释）：尽量提高代码本身的清晰性、可读性。
As long as necessary（如有必要，尽量详尽）：合理的注释、空行排版等，可以让代码更易阅读、更具美感。
单行注释
必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。
多行注释
避免使用 /…/ 这样的多行注释。有多行注释内容时，使用多个单行注释。
函数/方法注释

函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。；
参数和返回值注释必须包含类型信息和说明；

/**
 * 函数描述
 *
 * @param {string} p1 参数1的说明
 * @param {string} p2 参数2的说明，比较长
 *     那就换行了.
 * @param {number=} p3 参数3的说明（可选）
 * @return {Object} 返回值描述
 */
function foo(p1, p2, p3) {
   
    let p3 = p3 || 10;
    return {
   
        p1: p1,
        p2: p2,
        p3: p3
    };
}

命名规范

使用 Camel 命名法。

运算符

不要使用约相等运算符，使用=强相等运算符
同理使用!==

其他：

一个请求时，使用.then()

function request(){
   
    getDataList().then(res => {
   
        console.log(res);
    })
}

多个请求时，使用async/await

async function request(){
   
    const res1 = await getDataList1();
    const res2 = await getDataList2();
}

Vue 代码规范

常规

当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数 data() { return {…} }。
prop 的定义应该尽量详细，至少需要指定其类型。

export default {
   
    prop: [
        data: {
   
            type: Array,
            default() {
   
                return []
            }
        }
    ]
}

布尔类型的 attribute，为 true 时直接写属性值。
不要在computed中对vue变量进行操作。
应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop。
在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。
v-if 和 v-for 不能同时使用
公共方法尽量不要挂到原型上, 可以写在 utils 文件，也可以使用 mixin 文件。不要将业务公共组件注册到全局。
不要将任何第三方插件挂载到 vue 原型上。
具有高度通用性的方法，要封装到 libs、全局组件或指令集里。
为组件样式设置作用域。
尽量使用指令缩写。

vuex

State (opens new window)为单一状态树，在 state 中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在 vue 的组件中才能获取你定义的这个对象的状态。

修改 state 中数据必须通过 mutations。
每一个可能发生改变的 state 必须同步创建一条或多条用来改变它的 mutations。
服务端获取的数据存放在 state 中，作为原始数据保留，不可变动。
Getters (opens new window)有点类似 vue.js 的计算属性，当我们需要从 store 的 state 中派生出一些状态，那么我们就需要使用 getters，getters 会接收 state 作为第一个参数，而且 getters 的返回值会根据它的依赖被缓存起来，只有 getters 中的依赖值（state 中的某个需要派生状态的值）发生改变的时候才会被重新计算。
通过 getters 处理你需要得到的数据格式，而不是通过修改 state 原始数据。
组件内不强制使用 mapGetters，因为你可能需要使用 getter 和 setter。
改变 state 的唯一方法就是提交 mutations (opens new window)。
组件内使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。
命名采用大写字母 + 下划线的规则。
定义 CLEAR，以确保路由切换时可以初始化数据。
Actions
页面重的数据接口尽量在 actions (opens new window)中调用。
服务端返回的数据尽量不作处理，保留原始数据。
获取到的数据必须通过调用 mutations 改变 state。
Modules
通常情况下按照页面划分 modules (opens new window)。
默认内置了 system 保证了脚手架的基础功能。
每个页面模块或页面的子模块添加属性 namespaced: true。
文件命名规则
Component
所有的Component文件都是以大写开头 (PascalCase)，这也是官方所推荐的。
但除了 index.vue。
例子：
@/components/BackToTop/index.vue
@/components/Charts/Line.vue
@/views/example/components/Button.vue
JS 文件
所有的.js文件都遵循横线连接 (kebab-case)。
例子：
@/utils/open-window.js
@/views/svg-icons/require-icons.js
@/components/MarkdownEditor/default-options.js
Views
在views文件下，代表路由的.vue文件都使用横线连接 (kebab-case)，代表路由的文件夹也是使用同样的规则。
例子：
@/views/svg-icons/index.vue
@/views/svg-icons/require-icons.js
使用横线连接 (kebab-case)来命名views主要是出于以下几个考虑。
横线连接 (kebab-case) 也是官方推荐的命名规范之一文档
views下的.vue文件代表的是一个路由，所以它需要和component进行区分(component 都是大写开头)
页面的url 也都是横线连接的，比如https://www.xxx.admin/export-excel，所以路由对应的view应该要保持统一
没有大小写敏感问题
代码格式化工具
使用prettier插件进行开发
代码检测工具
使用eslint插件进行开发
安装ESlint插件

安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击文件 > 首选项 > 设置打开 VSCode 配置文件,添加如下配置

{
   
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
   
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true
}

转载：https://blog.csdn.net/qq_39347364/article/details/115871752

查看评论

小言_互联网的博客

小言_互联网的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章