Chendi Wu

Appearance

规范不是一成不变的，适合团队与个人就好，供参考

HTML篇 ​

文档规范 ​

使用HTML5的文档声明类型 <!DOCTYPE html> 来开启标准模式。 若不添加该声明，浏览器会开启怪异模式，按照浏览器自己的解析方式渲染页面，那么，在不同的浏览器下面可能会有不同的样式。

语义化 ​

html
<!-- bad -->
<div id="header">
  <div id="header-screen">
    <div id="header-inner"></div>
  </div>
</div>

<!-- good -->
<header>
  <section>
    <nav></nav>
  </section>
</header>

lang属性 ​

在sitepoint上可以查到 语言列表 微软上 语言列表

html
<!doctype html>
<html lang="en">
  ...
</html>

字符编码 ​

我们统一使用 UTF-8 编码，避免乱码问题。

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  ...
</html>

窗口 viewport ​

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  ...
</html>

CSS篇 ​

驼峰式命名法介绍 ​

  • Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo
  • Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo

文件资源命名 ​

  • 文件名不得含有空格
  • 文件名建议只使用小写字母，不使用大写字母。( 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。 )
  • 文件名包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。
  • 引入资源使用相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除非这两者协议都不可用。
html
// 推荐
<script src="//cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
// 不推荐：
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>

变量命名 ​

  • 命名方式 : 小驼峰式命名方法
  • 命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词类型小写字母
    functionfn
    booleanb
    strings
    objecto
    arraya
    inti
javascript
// 推荐
var tableTitle = 'LoginTable'
// 不推荐：
var getTitle = 'LoginTable'

函数 ​

  • 命名方式 : 小驼峰方式 ( 构造函数使用大驼峰命名法 )
  • 命名规则 : 前缀为动词
    动词含义返回值
    can判断是否可执行某个动作 ( 权限 )函数返回一个布尔值。true：可执行；false：不可执行
    has判断是否含有某个值函数返回一个布尔值。true：含有此值；false：不含有此值
    is判断是否为某个值函数返回一个布尔值。true：为某个值；false：不为某个值
    get获取某个值函数返回一个非布尔值
    set设置某个值无返回值、返回是否设置成功或者返回链式对象

常量 ​

  • 命名方法 : 全部大写
  • 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。
javascript
const MAX_COUNT = 10
const URL = 'https://www.yuque.com/wuchendi/fe'

真假判断 ​

JavaScript以下内容为假：

  • false
  • null
  • undefined
  • 0
  • ''(空字符串)
  • NaN

writing....