前端开发规范及自定义组件规范

基本规范
缩进：统一两个空格缩进，不要使用 Tab 或者 Tab、空格混搭

HTML规范
html属性使用双引号（""），比如：

小明

嵌套时使用单引号（’’），比如：

小明

如果需要展示双引号，可以使用转义()，比如：<p title=“姓名是"小明”">
属性命名使用短横线命名（html属性不区分大小写，不要使用驼峰式命名），比如：
属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
布尔型属性
HTML5 规范中 disabled、checked、selected 等属性不用设置值

JS规范
变量定义：使用const定义常量，let定义局部变量，尽量不用var
使用 Camel 命名法
行位不需要加分号（;）
js字符变量赋值单引号（’’），如果遇到嵌套则外层单引号，内层双引号，如const x = ‘这是"测试"数据’
如果需要展示单引号，可以使用转义（\），比如：const showName = ‘姓名是’小明’’
常量使用全部字母大写，单词间下划线分隔的命名方式
如果变量是一个布尔值，变量名最好加上 is、has 或 can 作为前缀
取任何属性之前应判断对象是否为空，比如const name = user && user.info && user.info.name
取数组值前应先判断非空以及数组长度，比如：const name = names && names.length > 1 ? names[1] : null
数组遍历
arr.forEach
arr.map
arr.filter（过滤）
arr.every（与）
arr.some（或）
JSON遍历
for … in

样式规范
使用scss，适应换肤和调整字体大小
换肤（暂不考虑换肤，但样式规则需要遵循）
ElementUI使用以下变量定义颜色
$–color-primary：主题色（“409EFF”, “64,158,255”）
$–color-primary-light-1：（53a8ff）
$–color-primary-light-2：（66b1ff）
$–color-primary-light-3：（79bbff）
$–color-primary-light-4：（8cc5ff）
$–color-primary-light-5：（a0cfff）
$–color-primary-light-6：（b3d8ff）
$–color-primary-light-7：（c6e2ff）
$–color-primary-light-8：（d9ecff）
−−color−primary−light−9：（ecf5ff）mix(--color-primary-light-9：（ecf5ff） mix(−−color−primary−light−9：（ecf5ff）mix(–color-black, $–color-primary, $–button-active-shade-percent)：（3a8ee6）

具体定义：
字体颜色：−−color−text−primary边线颜色：--color-text-primary 边线颜色：−−color−text−primary边线颜色：–border-color-base
超链接颜色：−−link−color超链接hover：--link-color 超链接hover：−−link−color超链接hover：–link-hover-color

示例：
&:hover, &:focus {
color: $–color-primary;
border-color: $–color-primary-light-7;
background-color: KaTeX parse error: Expected 'EOF', got '}' at position 26: …imary-light-9; }̲ &:active { col…–color-black, $–color-primary, −−button−active−shade−percent);border−color:mix(--button-active-shade-percent); border-color: mix(−−button−active−shade−percent);border−color:mix(–color-black, $–color-primary, $–button-active-shade-percent);
}

遵循BEM规范（http://www.cnblogs.com/ChengWuyi/p/5667945.html）
特定样式不需要加浏览器前缀
所有颜色定义，均应从variables.scss里面获取

组件规范
命名：定义组件文件夹，文件夹名称为有意义的，比如Table，文件夹下定义index.vue，可根据需要放置其他文件
组件格式：需定义name，格式为BvXxx，比如BvTable
私有变量、方法命名规则为：

__xx__

页面引用：
引入组件（<script>），比如：

import BvExample from '@/components/Example'

注册组件（<script>），比如：

components: { BvExample }

使用组件（<template>），比如：

<bv-example />

组件注册
常用组件在plugins下面全局注册
不常用组件，在调用的vue文件中通过components进行局部注册
样式
组件的样式定义在components.scss
弹窗
弹窗组件需要设定按esc键和点击遮罩不关闭

前端开发规范及自定义组件规范相关推荐

前端代码开发规范。web开发规范。web开发注意事项。前端开发如何写出更规范的代码
一.图片观看: 二.文字描述: 1,web开发基本原则: 1.结构html,样式css,行为js:三者要分离,尽量确保文档和模板只包含HTML结构,样式都放到样式表里,行为都放到脚本里; ...
css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发来源 | web前端开发我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
css外部命名规范,前端开发较全CSS命名规范
前端开发用什么框架吗前端开发新框架前端开发app混合开发框架文件名命名规范模块:module. 基本共用:base. 布局.版面:layout.css 主题:themes.css 专栏:col ...
关于前端开发中“模块”和“组件”概念的思考
术语的重要性首要是澄清术语.同事平时交流的时候,有比较多的上下文信息是双方已经预先知道的,所以容易推断对方要表达的意思,一定程度的术语混淆关系不大.但是和其他人交流的时候,如果不明确术语的内涵和外延 ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
【前端开发】CSS BEM命名规范
目录 1.BEM 2.实战 Block Element Modifier 3.总结 1.BEM BEM其实是块(block).元素(element).修饰符(modifier)的缩写,利用不同的区块, ...
前端开发 AMD 和 CMD 的规范区别
AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMD CMD 规范在这里:https://github.com/seajs/seajs/issue ...
微信小程序开发4——利用自定义组件实现页面内容切换功能
首先展示一下要显示的功能:` 首先需要在开发者工具中新建一个文件夹(components),分别在文件夹中新建.js .json .wxml .wxcss四个文件(可以右键文件夹,选择新建新建(com ...
前端开发的模块化和组件化的定义，以及两者的关系
作者:Jasin Yip 链接:http://www.zhihu.com/question... 来源:知乎模块化中的模块一般指的是 Javascript 模块,比如一个用来格式化时间的模块. 组件 ...

前端开发规范及自定义组件规范

前端开发规范及自定义组件规范相关推荐

最新文章

热门文章