前端编码规范

Janvem
453 阅读6分钟

命名方式

  1. 驼峰式命名

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

  2. 文件资源命名

    命名方式: 字母小写

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

  3. 变量命名

    命名方式： 小驼峰式命名

    命名规范： 遵循ES6规范，使用let,const的定义方法定义变量，尽量不使用var，类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词

    类型 小写字母 备注
    array a
    boolean b
    function fn
    int i
    object o
    string s 使用单引号

    如：

    let aTree = [];
let bSample = true;
let fnSample = () => {};
const iSample = 1;
const oSample = {};
const sSample = 'This is sample string...';

  4. 函数变量名

    命名方式： 小驼峰式命名

    命名规范： 前缀为动词+函数语义名 例子：

    //是否可阅读
function canRead(){
    return true;
}
//获取姓名
function getName{
    return this.name
}
// ES6
let getName = (name) => { return name }

  5. 常量命名

    命名方式： 全大写命名

    命名规范： 使用大写字母和下划线来组合命名，下划线用以分割单词。 例子：

    let MAX_COUNT = 100;
let SERVER_URL = 'http://baidu.com';

  6. 类的命名

    命名方式：

    • 公共属性和方法使用：小驼峰式命名
    • 私有属性和方法：前缀为下划线(_)后面跟公共属性和方法一样的命名方式

    命名规范： 使用大写字母和下划线来组合命名，下划线用以分割单词。

    例子：

    function Teacher(name) {
    let _name = name;
    this.getName = () => {
        return _name;
    }
    this.setName = (value) => {
        _name = value
    }
}
// 引用
let teach = new Teacher();
teacher.setName('小明');
console.log(teacher.getName()); // 小明

注释

  1. 单行注释

    规范：
    • 单行使用：使用//双斜线，注释文字之间保留一个空格
    • 代码后添加注释： 使用//双斜线，注释与代码之间保留一个空格，注释与文字之间保留一个空格
    • 注释代码：使用//双斜线，注释与代码之间保留一个空格

  2. 多行注释

    规范： 若开始/*和结束*/都在一行，推荐采用单行注释,若至少三行注释时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。 例子：
    /*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/
setTitle();

HTML

注意： 使用 HTML5 的文档声明类型 : <!DOCTYPE html>

  1. <head>

    • Encoding(编码方式)
    <meta charset="UTF-8">
    • title(标题)
    <title>web</title>
    • Description & Keyword(网站描述，关键词)
    // 描述
<meta name="description" content="这里是对网站的描述">
// 关键词
<meta name="keywords" content="这里是对网站的关键词">
    • Viewport(视图模式及兼容)
    // 兼容移动端的适配
<meta name="viewport" content="width=device-width, initial-scale=1">
// pc浏览器的兼容，优先使用最新版本的IE 和 Chrome 内核
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    • Favicon(网站icon)
    <link rel="shortcut icon" href="path/to/favicon.ico">

    • Css(样式文件)

      注意： 推荐使用CDN来加快网页的加载速度

    <link rel="stylesheet" href="css/style.css">

    • JavaScript(不建议写在head里面，建议写在</body>前)

      注意： 若写在head中，可加上h5的async属性词，它的作用是能够异步的加载和执行脚本，不因为加载脚本而阻塞页面的加载。一旦加载到就会立刻执行。有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。但是很有可能不是按照原本的顺序来执行的。如果js前后有依赖性，用async，就很有可能出错。 增加 JavaScript 禁用的提示信息，最常用的方式是使用 <noscript>

    扩展

    // 移动端页头推荐配置
<meta charset="UTF-8">
<title>title</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=640,user-scalable=no" />
<!--<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">-->
<meta http-equiv="cleartype" content="on">
<meta name="apple-mobile-web-app-title" content="...">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

  2. <body>

    语义化
    <header>: 定义了文档的头部区域
<footer>: 定义 section 或 document 的页脚。
<section>: 定义文档中的节（section、区段）。
<nav>: 定义导航链接的部分。
<article>: 定义页面独立的内容区域。
<aside>: 定义页面的侧边栏内容。
<bdi>: 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>: 定义命令按钮，比如单选按钮、复选框或按钮
<details>: 用于描述文档或文档某个部分的细节
<dialog>: 定义对话框，比如提示框
<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figcaption> 标签定义 <figure> 元素的标题.
<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
    注意: Internet Explorer 8 及更早IE版本中的问题,你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。
    <!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
<![endif]-->

CSS

注意： 默认使用scss预编译器，或者选用less

相关链接： scss官方文档 、less官方文档

在node环境下使用sass预编译

1、安装

npm install  node-sass  -g

2、编译

假设项目目录下有 css 和 scss 文件夹，运行以下命令会持续观察文件变化并即时编译。

1、node-sass --watch --recursive --output css(编译后文件夹路径) scss(scss文件路径)

以下命令具有同等功能，而且更短。

2、node-sass -wro css(编译后文件夹路径) scss(scss文件路径)

在终端按 Control + C 停止编译。

Javascript

注意： 推荐使用以ES6的标准来编写JavaScript代码，详情参考es6的官方文档

avatar
文章
阅读
粉丝