精华内容
下载资源
问答
  • 前端代码编写规范

    2017-05-17 17:27:00
    前端代码编写规范 规范的目的 前端编程人员书写前端代码遵循一定的规范。按照规范编写代码可以使代码具有统一的风格,既可以提高团队协作效率,规范文件管理,可以减小一些错误风险,也有利于项目的代码维护和...

    前端代码编写规范

     

    规范的目的

    前端编程人员书写前端代码遵循一定的规范。按照规范编写代码可以使代码具有统一的风格,既可以提高团队协作效率,规范文件管理,可以减小一些错误风险,也有利于项目的代码维护和后期扩展。

    规范的内容

    前端代码主要包括html、css和JavaScript代码,分别负责页面的结构、表现和行为,严格保证三者的分离,尽量让三者没有太多的交互和联系,这样有利于代码的维护。

    前端代码编写规范主要是对这三者进行,也就是html代码编写规范、css代码编写规范和JavaScript代码编写规范。这三个编写规范也有共性的东西,作为通用规范

    一 通用规范

    1 资源文件命名

    1.1 资源文件用小写字母命名,多个单词组合用中划线分隔。

    1.2 资源文件的前后缀或者扩展名或者有明显意义的元数据等用点号分隔。

    2 缩进

    使用4个空格作为一个缩进层级,不使用tab字符。

    3 注释

    3.1 详尽注释

    解释代码解决问题的方法,解决问题的思路。

    3.2 模块注释

    一般在主要节点的开始和结束添加注释,在循环的结束位置添加注释。方便阅读和修改。

    3.3 待办注释

    用TODO标记代办事情,便于后期搜索。<!-- TODO:待办事项 -->  

    二 html代码编写规范

    1 文档类型

    推荐使用HTML5的文档类型:<!DOCTYPE html>

    2 head部分

    2.1 编码

    明确编码方式。<meta charset="utf-8">

    2.2 标题

    title作为head的直接子元素,紧跟在编码后面,<title>标题</title>

    2.3 favicon

    保证favicon可访问

    在网站根目录下放置favicon.icon文件或者使用link指定favicon位置

    <link rel="shortcut icon" href="images/favicon.ico">

    3 CSS和JavaScript文件的引入

    3.1 type属性

    根据HTML5规范,CSS和JavaScript文件不需要指定type属性,它们的默认值分别是text/css 和 text/javascript。

    3.2 CSS文件的引入

    CSS文件在head中引入。

    <link rel="stylesheet" href="code-guide.css">

    3.3 JavaScript文件的引入

    出于性能的考虑,js使用异步加载,并且在body结束之前的位置加载。

    <html>

    <head>

    <link rel="stylesheet" href="main.css">

    </head>

    <body>

    <!-- body goes here --> 

    <script src="main.js" async></script>

    </body>

    </html>

    4属性

    4.1 属性顺序

    HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。

    class

    id, name

    data-*

    src, for, type, href

    title, alt

    aria-*, role

    class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,排在第二位。

    4.2 布尔值属性

    HTML5 规范规定, disabled、checked、selected 等属性不用设置值。

     

    5 语法规范

    5.1 大小写

    html对大小写不敏感,但为了代码书写方便和代码整洁,元素的标签和属性名统一小写, 属性值加双引号。

    5.2标签闭合

    非自闭合标签必须有开始标记和结束标记。

    自闭合标签添加符号“/”是可选的,html5不做要求。我们约定自闭合标签结尾不添加“/”。

    自闭合标签包括:area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

     

    三 CSS代码编写规范

    1 命名

    CSS选择器的命名,遵循简单,易懂的语义化命名方式,而且要注意通用性。

    1.1 名称都用小写,用英文,不用拼音。

    1.2 使用中划线分隔选择器名的单词。

    1.3 名称尽量不用缩写,如果使用缩写,必须是语义明确的。

    1.4 常用的选择器名称

    头: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

    2 声明顺序

    2.1 结构性属性:

    2.1.1 显示(display)

    2.1.2 位置(position, left, top, right 等)

    2.1.3 浮动(overflow, float, clear 等)

    2.1.4 距离(margin, padding)

    2.2 表现性属性:

    2.2.1背景(background, border等)

    2.2.2文字系列(font, line-height, letter-spacing, color- text-align等)

    2.3 其他(animation, transition等)

    3 选择器

    3.1 不使用id选择器

    id在页面中是唯一的,不能重复使用。而类选择器可以重复使用,一般id选择器用在JavaScript中,CSS中用类选择器。

    3.2 少用标签选择器

    考虑HTML和CSS代码分离,提高可维护性,在CSS中尽量使用类选择器,少用或不用标签选择器。

    3.3选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。

    4 代码格式

    4.1 空格

    4.1.1 选择器与{之间必须包含空格

    .selector {

    }

    4.1.2 属性名后面紧跟冒号,冒号和属性值之间必须包含空格

    margin: 0;

    4.1.3 属性有多个属性值,属性值后面紧跟逗号,逗号和下一个属性值之间必须包含空格。

    font-family: Aria, sans-serif;

    4.1.4  >、+、~ 选择器的两边各保留一个空格。

    main > nav {

    4.2 换行

    4.2.1 选择器和{单独占一行,如果是多个选择器,每个选择器占一行。

    .post,

    .page,

    .comment {

        line-height: 1.5;

    }

    4.2.2 每一项声明单独占一行,结尾}单独占一行,有利于调试。

        margin: 0;

        padding: 0;

    }

     

    四 JavaScript代码编写规范

    1 命名

    1.1 变量命名

    变量命名采用驼峰式命名法,第一个单词的首字母小写,其余单词的首字母大写。

    1.2 函数命名

    使用动词+名词的结构,采用驼峰式命名法。

    参考动词

      动词  

    含义

    返回值

    can

    判断是否可执行某个动作(权限)

    函数返回一个布尔值。true:可执行;false:不可执行

    has

    判断是否含有某个值

    函数返回一个布尔值。true:含有此值;false:不含有此值

    is

    判断是否为某个值

    函数返回一个布尔值。true:为某个值;false:不为某个值

    get

    获取某个值

    函数返回一个非布尔值

    set

    设置某个值

    无返回值、返回是否设置成功或者返回链式对象

    load

    加载某些数据

    无返回值或者返回是否加载完成的结果

    1.3 常量命名

    常量全部采用大写字母,单词之间通过下划线分隔。

    2 代码格式

    2.1 空格

    2.1.1 var与变量名之间,变量名与等号之间,等号与初始值之间都留一个空格,初始值和分号之间不留空格。

    2.1.2 function与函数名之间留一个空格,函数名与括号之间不留空格,括号与左大括号之间留一个空格。

    2.1.3 函数的各个参数之间留一个空格。

    2.1.4 if、while、for与左括号之间留一个空格,以强调关键字;switch与左括号之间不留空格。
    2.1.5 二元操作符与左右两个操作数之间留一个空格。

    2.2 换行

    2.2.1 每行语句占用一行,不要多个语句一行。
    2.2.2 if、while、for等块级作用域后的左大括号不要另起一行,就放在关键字同一行,结尾的右大括号单独占一行,并与对应的左大括号对齐。

    3 函数注释

    JavaScript中的注释,也要有详尽注释和待办注释,模块注释相比html和CSS,应用少一些,但JavaScript中会经常用到函数注释。

    相对正式的函数注释

    /** 

    * 函数说明 

    * @关键字

    */

     

    常用注释关键字:

    注释名

    语法

    含义

    示例

    @param

    @param 参数名 {参数类型}  描述信息

    描述参数的信息

    @param name {String} 传入名称

    @return

    @return {返回类型} 描述信息

    描述返回值的信息

    @return {Boolean} true:可执行;false:不可执行

    @author

    @author 作者信息 [附属信息:如邮箱、日期]

    描述此函数作者的信息

    @author 张三 2015/07/21 

    @version

    @version XX.XX.XX

    描述此函数的版本号

    @version 1.0.3

    @example

    @example 示例代码

    演示函数的使用

    @example setTitle('测试')

     

    如果函数功能相对简单,可以采用单行注释,简要说明功能

    4 其他注意事项

    4.1 声明变量的var关键字不能省略,如果没有var关键字,变量为全局变量。

    4.2 语句的结尾必须加分号。

     

    参考资料

    http://www.css88.com/archives/5361,前端代码规范(1-4)

    http://www.cnblogs.com/y-lin/p/5753302.html,前端设计

    https://segmentfault.com/a/1190000002460968,CSS编码规范

     

    转载于:https://www.cnblogs.com/coodream2009/p/6868599.html

    展开全文
  • 前端代码编写规范.md

    2020-12-03 14:47:18
    规范前端代码编写文档,可提高代码可阅读力,提高代码可维护力。规范开发者的代码编写方式。JFK劳动时间反抗类毒素解放开绿灯解放收到
  • 如果一段特定的代码不符合规范的话,它有可能只是代码风格错误,而也有可能会是bug。早期指定规范就使得代码审核得以更好的开展,并且可以更精确的地定位到错误。只要开发者们能够保证源代码源文件都严格遵循规范,...
  • /^(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  • 编写前端代码规范的主要驱动力是两方面: 1) 代码一致性(一个项目的代码看起来就像一个人写的一样) 2) 最佳实践。 通过保持代码风格和传统的一致性,我们可以减少遗留系统维护的负担,并降低未来系统崩溃的风险。 ...

    1、前端代码规范参考

    编写前端代码规范的主要驱动力是两方面: 
    1) 代码一致性(一个项目的代码看起来就像一个人写的一样)
    2) 最佳实践。 
    通过保持代码风格和传统的一致性,我们可以减少遗留系统维护的负担,并降低未来系统崩溃的风险。
    而通过遵照最佳实践,我们能确保优化的页面加载、性能以及可维护的代码。

    所有好代码都应该满足这两个特性:复用性,扩展性。

     

    1、angular(框架)风格指南(重点)

    https://angular.cn/guide/styleguide

    2、Airbnb JavaScript代码规范(重点)

    https://github.com/lin-123/javascript

    3、腾讯前端开发标准(通过分析github代码库总结出来的工程师代码书写习惯)(重点)

    http://alloyteam.github.io/CodeGuide/

    4、腾讯全端 AlloyTeam 团队CSS命名规范(参考)

    http://www.alloyteam.com/2011/10/css-on-team-naming/

    命名参考工具:https://unbug.github.io/codelf/

     

    1是框架推荐的代码风格指南,2和3通用,4作为css命名的参考,如果有冲突,优先遵循前面的规范。

     

    2、如何保持前端代码规范

    1、eslint或tslint

    eslint:(js)

    https://cn.eslint.org/

    tslint:(ts)

    https://palantir.github.io/tslint/

    2、prettier

    https://prettier.io

     

    eslint或tslint负责代码规范检查和错误检查

    prettier负责格式化/美化代码


     

     

     

    展开全文
  • Web 前端代码规范

    千次阅读 2017-06-25 16:13:54
    此项目用于记录规范的、高可维护性的前端代码,这是通过分析 Github 众多前端代码库,总结出来的前端代码书写规范

    Web 前端代码规范

    最后更新时间:2017-06-25

    原始文章链接:https://github.com/bxm0927/web-code-standards

    此项目用于记录规范的、高可维护性的前端代码,这是通过分析 Github 众多前端代码库,总结出来的前端代码书写规范。

    目录

    1. 前端普适性规范
    2. HTML 规范
    3. CSS 规范
    4. JS 规范

    License

    public domain, Just take it.

    Thanks

    @Ruan YiFeng: https://github.com/ruanyf

    @materliu:https://materliu.github.io/code-guide

    @hzlzh: https://github.com/hzlzh/Front-End-Standards

    @tguide: http://tguide.qq.com/main/base.htm

    前端普适性规范

    黄金定律

    永远遵循同一套编码规范,可以是这里列出的,也可以是你自己总结的。如果你发现本
    规范中有任何错误,敬请指正。

    不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。

    项目命名

    项目名全部采用小写方式,以中划线分隔,禁止驼峰式命名。比如:my-project-name

    文件命名

    文件命名参照上一条规则,多个单词组成时,采用中划线连接方式,比如说: error-report.html

    有复数结构时,要采用复数命名法,比如说: scripts, styles, images, data-models

    文件名中只可由小写英文字母a~z、排序数字0~9或间隔符-组成,禁止包含特殊符号,比如空格、$等

    为更好的表达语义,文件名使用英文名词命名,或英文简写。

    不允许命名带有广告等英文的单词,例如ad,adv,adver,advertising,防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。

    • index.shtml 引导页&首页
    • main.shtml 首页
    • download.shtml 下载页面
    • act.html 活动列表页面
    • video.html 视频
    • cdkey.html CDKEY页面

    • base.css 基本样式

    • layout.css 框架布局
    • module.css 模块样式
    • global.css 全局样式
    • font.css 字体样式
    • index.css 首页样式
    • link.css 链接样式
    • print.css 打印样式

    HTML 规范

    语法

    使用四个空格的缩进,这是保证代码在各种环境下显示一致的唯一方式。

    嵌套的节点应该缩进(四个空格)。

    在属性上,使用双引号,不要使用单引号。

    不要在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。

    不要忽略可选的关闭标签(例如, 和 )。

    <img src="images/logo.png" alt="Company">

    HTML5 doctype

    在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式,使其每个浏览器中尽可能一致的展现。

    虽然doctype不区分大小写,但是按照惯例,doctype大写

    <!DOCTYPE html>

    语言属性

    <html lang="en">
    
    </html>

    字符编码

    通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样
    做的好处是,可以避免在 HTML 中使用字符实体标记(character entity),从而全部与
    文档编码一致(一般采用 UTF-8 编码)。

    <meta charset="UTF-8">

    IE 兼容模式

    IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈
    的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模
    式。

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    响应式

    <meta name="viewport" content="width=device-width, initial-scale=1">

    引入 CSS 和 JavaScript

    根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。

    <!-- External CSS -->
    <link rel="stylesheet" href="code-guide.css">
    
    <!-- In-document CSS -->
    <style>
        /* ... */
    </style>
    
    <!-- JavaScript -->
    <script src="code-guide.js"></script>

    实用高于完美

    尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

    减少标签数量

    在编写 HTML 代码时,需要尽量避免多余的父节点。很多时候,需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例:

    <!-- Not so great -->
    <span class="avatar">
        <img src="...">
    </span>
    
    <!-- Better -->
    <img class="avatar" src="...">

    属性顺序

    HTML 属性应该按照特定的顺序出现以保证易读性。

    1. class
    2. id
    3. name
    4. data-*
    5. src, for, type, href, value , max-length, max, min, pattern
    6. placeholder, title, alt
    7. aria-*, role
    8. required, readonly, disabled

    class 是为高可复用组件设计的,理论上他们应处在第一位。id 更加具体而且应该尽量少使用(例如, 页内书签),所以他们处在第二位。

    Boolean 属性

    Boolean 属性指不需要声明取值的属性。XHTML 需要每个属性声明取值,但是 HTML5 并不需要。

    一个元素中 Boolean 属性的存在表示取值 true,不存在则表示取值 false。

    简而言之,不要为 Boolean 属性添加取值。

    <input type="text" disabled>

    JavaScript 生成标签

    在 JavaScript 文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这种情况的出现。

    CSS 规范

    语法

    使用四个空格的缩进,这是保证代码在各种环境下显示一致的唯一方式。

    使用组合选择器时,保持每个独立的选择器占用一行。

    为了代码的易读性,在每个声明的左括号前增加一个空格。

    声明块的右括号应该另起一行。

    每条声明 : 后应该插入一个空格。

    每条声明应该只占用一行来保证错误报告更加准确。

    所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的,但是如果没有他,你的代码会更容易出错。

    逗号分隔的取值,都应该在逗号之后增加一个空格。

    不要在颜色值 rgb() rgba() hsl() hsla()和 rect() 中增加空格,并且不要带有取值前面不必要的 0 (比如,使用 .5 替代 0.5)。

    所有的十六进制值都应该使用小写字母,例如 #fff。因为小写字母有更多样的外形,在浏览文档时,他们能够更轻松的被区分开来。

    尽可能使用短的十六进制数值,例如使用 #fff 替代 #ffffff。

    为选择器中的属性取值添加引号,例如 input[type=”text”]。 他们只在某些情况下可有可无,所以都使用引号可以增加一致性。

    不要为 0 指明单位,比如使用 margin: 0; 而不是 margin: 0px;。

    /* Bad CSS */
    .selector, .selector-secondary, .selector[type=text] {
        margin: 0px 0px 15px;
        background-color: rgba(0, 0, 0, 0.5);
        box-shadow: 0 1px 2px #CCC, inset 0 1px 0 #FFFFFF
    }
    
    /* Good CSS */
    .selector,
    .selector-secondary,
    .selector[type="text"] {
        margin-bottom: 15px;
        background-color: rgba(0,0,0,.5);
        box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
    }

    声明顺序

    相关的属性声明应该以下面的顺序分组处理:

    1. Positioning
    2. Box model 盒模型
    3. Typographic 排版
    4. Visual 外观

    Positioning 处在第一位,因为他可以使一个元素脱离正常文本流,并且覆盖盒模型相关的样式。盒模型紧跟其后,因为他决定了一个组件的大小和位置。

    其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响,所以他们排在后面。

    .declaration-order {
        /* Positioning */
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
    
        /* Box-model */
        display: block;
        float: right;
        width: 100px;
        height: 100px;
    
        /* Typography */
        font: normal 13px "Helvetica Neue", sans-serif;
        line-height: 1.5;
        color: #333;
        text-align: center;
    
        /* Visual */
        background-color: #f5f5f5;
        border: 1px solid #e5e5e5;
        border-radius: 3px;
    
        /* Misc */
        opacity: 1;
    }

    Don’t use @import

    <link>相比,@import较慢,增加额外的页面请求,并可能导致其他不可预见的问题。

    <!-- Use link elements -->
    <link rel="stylesheet" href="core.css">
    
    <!-- Avoid @imports -->
    <style>
        @import url("more.css");
    </style>

    媒体查询位置

    尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中,或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。这里是一个典型的案例。

    .element { ... }
    .element-avatar { ... }
    .element-selected { ... }
    
    @media (min-width: 480px) {
        .element { ...}
        .element-avatar { ... }
        .element-selected { ... }
    }

    前缀属性

    当使用厂商前缀属性时,通过缩进使取值垂直对齐以便多行编辑。

    /* Prefixed properties */
    .selector {
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
    }

    单条声明的声明块

    在一个声明块中只包含一条声明的情况下,为了易读性和快速编辑可以考虑移除其中的换行。所有包含多条声明的声明块应该分为多行。

    这样做的关键因素是错误检测 - 例如,一个 CSS 验证程序显示你在 183 行有一个语法错误,如果是一个单条声明的行,那就是他了。在多个声明的情况下,你必须为哪里出错了费下脑子。

    .span1 { width: 60px; }
    .span2 { width: 140px; }
    .span3 { width: 220px; }

    属性简写

    尽量不使用属性简写的方式,属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:

    • padding
    • margin
    • font
    • background
      -border
      -border-radius

    大多数情况下,我们并不需要设置属性简写中包含的所有值。例如,HTML 头部只设置上下的 margin,所以如果需要,只设置这两个值。过度使用属性简写往往会导致更混乱的代码,其中包含不必要的重写和意想不到的副作用。

    /* Bad example */
    .element {
        margin: 0 0 10px;
        background: red;
        background: url("image.jpg");
        border-radius: 3px 3px 0 0;
    }
    
    /* Good example */
    .element {
        margin-bottom: 10px;
        background-color: red;
        background-image: url("image.jpg");
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    Less 和 Sass 中的嵌套

    避免不必要的嵌套。可以进行嵌套,不意味着你应该这样做。只有在需要给父元素增加样式并且同时存在多个子元素时才需要考虑嵌套。

    // Without nesting
    .table > thead > tr > th { … }
    .table > thead > tr > td { … }
    
    // With nesting
    .table > thead > tr {
        > th { … }
        > td { … }
    }

    代码注释

    代码是由人来编写和维护的。保证你的代码是描述性的,包含好的注释,并且容易被他人理解。好的代码注释传达上下文和目标。不要简单地重申组件或者 class 名称。

    class 命名

    保持 class 命名为全小写,可以使用短划线(不要使用下划线和 camelCase 命名)。短划线应该作为相关类的自然间断。(例如,.btn 和 .btn-danger)。

    避免过度使用简写。.btn 可以很好地描述 button,但是 .s 不能代表任何元素。

    class 的命名应该尽量短,也要尽量明确。

    使用有意义的名称;使用结构化或者作用目标相关,而不是抽象的名称。

    命名时使用最近的父节点或者父 class 作为前缀。

    使用 .js-* 来表示行为(相对于样式),但是不要在 CSS 中包含这些 class。

    选择器

    使用 class 而不是通用元素标签来优化渲染性能。

    避免在经常出现的组件中使用一些属性选择器 (例如,[class^=”…”])。浏览器性能会受到这些情况的影响。

    减少选择器的长度,每个组合选择器选择器的条目应该尽量控制在 3 个以内。

    只在必要的情况下使用后代选择器 (例如,没有使用带前缀 classes 的情况).

    代码组织

    以组件为单位组织代码。

    制定一个一致的注释层级结构。

    使用一致的空白来分割代码块,这样做在查看大的文档时更有优势。

    当使用多个 CSS 文件时,通过组件而不是页面来区分他们。页面会被重新排列,而组件移动就可以了。

    编辑器配置

    根据以下的设置来配置你的编辑器,将这些设置应用到项目的 .editorconfig 文件,来避免常见的代码不一致和丑陋的 diffs。

    • 使用四个空格的缩进。
    • 在保存时删除尾部的空白字符。
    • 设置文件编码为 UTF-8。
    • 在文件结尾添加一个空白行。

    JS 规范

    语法

    使用四个空格的缩进,这是保证代码在各种环境下显示一致的唯一方式。

    声明之后一律以分号结束, 不可以省略

    完全避免 == != 的使用, 用严格比较条件 === !==

    eval 非特殊情况, 禁用!!!

    with 非特殊情况, 禁用!!!

    单行长度,理论上不要超过80列,不过如果编辑器开启”自动换行”的话可以不考虑单行长度

    接上一条,如果需要换行,存在操作符的情况,一定在操作符后换行,然后换的行缩进4个空格

    这里要注意,如果是多次换行的话就没有必要继续缩进了,比如说下面这种就是最佳格式。

    if (typeof qqfind === "undefined" ||
        typeof qqfind.cdnrejected === "undefined" ||
        qqfind.cdnrejected !== true) {
        url = "http://pub.idqqimg.com/qqfind/js/location4.js";
    } else {
        url = "http://find.qq.com/js/location4.js";
    }

    空行

    方法之间加

    单行或多行注释前加

    逻辑块之间加空行增加可读性

    变量命名

    标准变量采用驼峰标识

    使用的ID的地方一定全大写

    使用的URL的地方一定全大写, 比如说 reportURL

    涉及Android的,一律大写第一个字母

    涉及iOS的,一律小写第一个,大写后两个字母

    常量采用大写字母,下划线连接的方式

    构造函数,大写第一个字母

    var thisIsMyName;
    
    var goodID;
    
    var AndroidVersion;
    
    var iOSVersion;
    
    var MAX_COUNT = 10;
    
    function Person(name) {
        this.name = name
    }

    字符常量

    一般情况下统一使用单引号

    null的使用场景

    初始化可能以后分配对象值的变量

    与一个可能或可能没有对象值的初始化变量进行比较

    传入一个预期对象的函数

    从预期对象的函数返回

    不适合null的使用场景

    不要使用null来测试是否提供参数

    不要测试值为null的未初始化变量

    undefined使用场景

    永远不要直接使用undefined进行变量判断

    使用字符串 “undefined” 对变量进行判断

    // Bad
    var person;
    console.log(person === undefined);    //true
    
    // Good
    console.log(typeof person);    // "undefined"

    对象字面量

    // Bad
    var team = new Team();
    team.title = "AlloyTeam";
    team.count = 25;
    
    // Good
    var team = {
        title: "AlloyTeam",
        count: 25
    };

    数组声明

    // Bad
    var colors = new Array("red", "green", "blue");
    var numbers = new Array(1, 2, 3, 4);
    
    
    // Good
    var colors = [ "red", "green", "blue" ];
    var numbers = [ 1, 2, 3, 4 ];

    单行注释

    双斜线后,必须跟注释内容保留一个空格

    与下一行代码缩进保持一致

    可位于一个代码行的末尾,双斜线距离分号四个空格

    // Good
    if (condition) {
        // if you made it here, then all security checks passed
        allowed();
    }
    
    var zhangsan = "zhangsan";    // 双斜线距离分号四个空格,双斜线后始终保留一个空格

    多行注释格式

    最少三行

    前边留空一行

    /**
     * 注释内容与星标前保留一个空格
     */

    何时使用多行注释格式

    难于理解的代码段

    可能存在错误的代码段

    浏览器特殊的HACK代码

    业务逻辑强相关的代码

    想吐槽的产品逻辑, 合作同事

    文档注释

    各类标签 @param @method 等 参考 http://usejsdoc.org/

    用于:方法、构造函数、对象

    /**
     * here boy, look here , here is girl
     * @method lookGril
     * @param {Object} balabalabala
     * @return {Object} balabalabala
     */

    括号对齐

    标准示例 括号前后有空格,花括号起始不另换行,结尾新起一行

    花括号必须要,即使内容只有一行

    涉及 if for while do…while try…catch…finally 的地方都必须使用花括号,即使内容只有一行

    if else 前后留有空格

    if (condition) {
        doSomething();
    } else {
        doSomethingElse();
    }

    switch

    switch和括号之间有空格,case需要缩进,break之后跟下一个case中间留一个空白行

    花括号必须要, 即使内容只有一行。

    switch 的 falling through 一定要有注释特别说明,no default 的情况也需要注释特别说明况

    switch (condition) {
        case "first":
            // code
            break;
    
        case "second":
            // code
            break;
    
        default:
        // code
    }

    for

    普通for循环, 分号后留有一个空格, 判断条件等内的操作符两边不留空格

    前置条件如果有多个,逗号后留一个空格

    for-in 一定要有 hasOwnProperty 的判断, 否则 JSLint 或者 JSHint 都会有一个 warn

    for (i=0, len=values.length; i<len; i++) {
        process(values[i]);
    }
    
    
    var prop;
    
    for (prop in object) {
        // 注意这里一定要有 hasOwnProperty 的判断, 否则 JSLint 或者 JSHint 都会有一个 warn !
        if (object.hasOwnProperty(prop)) {
            console.log("Property name is " + prop);
            console.log("Property value is " + object[prop]);
        }
    }

    变量声明

    所有函数内变量声明放在函数内头部,只使用一个 var(多了JSLint报错), 一个变量一行, 在行末跟注释, 注释啊,注释啊,亲

    函数声明

    一定先声明再使用, 不要利用 JavaScript engine的变量提升特性, 违反了这个规则 JSLint 和 JSHint都会报 warn

    function declaration 和 function expression 的不同,function expression 的()前后必须有空格,而function declaration 在有函数名的时候不需要空格,没有函数名的时候需要空格。

    函数调用括号前后不需要空格

    立即执行函数的写法, 最外层必须包一层括号

    “use strict” 决不允许全局使用, 必须放在函数的第一行, 可以用自执行函数包含大的代码段, 如果 “use strict” 在函数外使用, JSLint 和 JSHint 均会报错

    function doSomething(item) {
        // do something
    }
    
    var doSomething = function (item) {
        // do something
    }
    
    
    // Good
    doSomething(item);
    
    // Bad: Looks like a block statement
    doSomething (item);
    
    // Good
    (function() {
        "use strict";
    
        function doSomething() {
            // code
        }
    })();
    展开全文
  • <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="/static/bg.png" alt="暂无图片"> <h1 class="hello-world">...
  • 而且目前都采用前后端分离的开发模式,人多了,每个人的代码风格又不一样,这就导致了项目比较杂乱,而且后期人员离职后维护以及迭代开发都是致命的,所以团队遵循共同的规范是必须的 前言 提示:这里可以添加本文...

    现在项目开发基本都是团队一起来完成的,而且目前都采用前后端分离的开发模式,人多了,每个人的代码风格又不一样,这就导致了项目比较杂乱,而且后期人员离职后维护以及迭代开发都是致命的,所以团队遵循共同的规范是必须的。有了统一的规范,你才能确保团队做出来的项目几年以后仍然可以很方便的维护以及迭代开发。


    代码风格必须统一规范

    示例:看以下代码规范,每个vue文件中里面都有mounted和methods那么你代码就得这么写了。要保存this变量,整个团队都用vm,这是一个团队规范的统一,增强代码的可读性,为啥要保存this?因为在箭头函数以及嵌套函数调用中,this指向可能会有问题。页面数据获取团队统一在mounted里面获取,当然,你也可以在created中,但是必须有统一的规范,所有人的初始化数据都在同一个地方获取。这样做的话以后团队中的人要去用别人写的组件,他初始化就只看mounted就行了,看初始化执行了哪些方法

    mounted() {
    	let vm = this; 
    	vm.init(); // 页面初始化的数据都在这个方法里执行
    },
    methods: {
    	init() {
    		let vm = this;
    		vm.initData(); // 获取页面初始化数据
    		vm.getDetail(); // 获取页面需要的详细信息
    	},
    	// 页面中的方法命名也必须统一,见名知意,不能个性化,统一的命名规范十分方便以后维护以及功能迭代
    	initData() {
    	},
    	getDetail() {
    	}
    }
    

    另外团队项目中必须使用eslint来检验代码,从而规范所有开发者代码的格式。

    必要的方法,参数,以及自定义的flag要写上注释,提高代码可读性,降低日后维护成本。

    代码如下(示例):

    data() {
    	return {
    		routeFlag: 'add' // add为新增,review为复核,back为打回重新申请,update为更新操作,overdue为过期
    	}
    },
    methods: {
    	// 用户信息提交,type == 1,新增操作,type == 2,变更操作, type == 3,提交到其他系统审核
    	handeSubmit(type) {
    		// 过滤用户id信息
    		peopleArray.filter((item) => {
    			return item.id == fromData.id;
    		});
    	}
    }
    

    框架公共资源的封装,放置位置

    在项目开始阶段,首先得确定用那种技术,用啥框架,然后基于该框架在封装出符合企业开发需求的团队一起用的框架。就拿vue来说,它的src目录下你要建一个http.js,这个文件主要是引入axios,然后进行请求和响应拦截,以及设置公共的请求头,然后请求参数的统一处理,处理完成后最好将基于axios的get,post,getJson,postJson等方法挂载到vue的实例原型上,即vue.prototype.get = 自己封装的函数,项目中可以直接this.get调用get请求。当然,这个http.js文件要在main.js中引入。

    然后你还要在src下建一个api文件夹,地下在建一些子模块文件夹,里面编写的是每个模块所需的接口以及数据获取方法。

    src下还应该有一个utils文件夹,这里存放着系统一些公共的工具·函数,比如时间格式化函数,小数点截取,金钱转换,手机邮箱格式校验,对象克隆等常用的公共函数,开发人员要用可以直接在页面引入,避免n个开发在n个位置写了n个时间格式化函数。
    src下建的style文件夹是用来存放系统中一些公共样式的,里面建一个index.scss,在index.scss里面引入table.scss(表格公共样式)和detail.scss(详情页公共样式),也要具有模块化开发的思想。

    项目中采用vuex来对一些数据进行管理,在store中建立相应的模块化的数据,在index中引入所有模块使用,vuex中mutaions和actions最好定义大写常量代替,避免后期改动多出数据。其实在vuex中有些用户的数据是要做本地持久化的,比如用户基本信息以及token,还有用户选择的语言,因为只有js文件运行了,才有数据,但浏览器刷新时,文件重新加载,vuex中的数据消失,所以可以借助vue-persistence插件做数据持久化。

    路由文件中必须采用异步加载的方式引入组件,用require或者component: () => import(’@/views/404’),组件异步其实是函数的一个赋值过程,只有你执行到当前组件,函数才执行,组件才被引入,这种方法解决了大项目组件多,如果加载全部组件,那可能要一年(开个玩笑,主要表达组件多同步加载的话太慢了)。路由文件中对没有登陆的用户操作做全局路由守卫,代码如下:

    // 全局路由守卫
    router.beforeEach(function (to, from, next) {
      if (to.matched.length === 0) {
        // 判断此跳转路由的来源路由是否存在,存在的情况跳转到来源路由,否则跳转到404页面
        next('/404');
      } else {
        // 浏览器刷新,vuex中数据消失,从本地缓存拿
        // userInfo: JSON.parse(localStorage.getItem('userInfo')) || {}, 这是store中的userInfo获取,看本地是否有,有的话拿本地数据
        let token = store.state.userInfo.token;
        // meta标签中标记路由是否要登陆 isLogin
        if (to.meta.isLogin) {
          if (token) {
            next();
          } else {
            next('/login');
          }
        } else {
          next();
        }
      }
    });
    

    在views文件夹中写一个layout来初始化项目的sidebar,navbar和main,这个可以直接用element里面的布局,导航栏的规范编写如下(采用遍历方式拿到每个路由,路由数组可以根据用户权限请求回来的路由数组):

        <el-aside class="main_con" style="width:250px;">
          <el-menu :default-active="$store.state.treeState" unique-opened @open="handleOpen" @close="handleClose" class="el-menu-vertical-demo" :collapse="isCollapse" router text-color="#fff" background-color="#422c50">
            <template v-for="(item,index) in treeData">
              <el-submenu :index="item.router" v-if="item.childResource.length>0" :key="index">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span v-text="item.resName"></span>
                </template>
                <template v-for="(child,indx) in item.childResource">
                  <el-menu-item :index="child.router" v-if="child.childResource.length==0" :key="indx">
                    <template slot="title">
                      {{child.resName}}
                    </template>
                  </el-menu-item>
                  <el-submenu :index="child.router" v-if="child.childResource.length>0" :key="child.resName">
                    <template slot="title">
                      {{child.resName}}
                    </template>
                    <el-menu-item :index="child.router" v-for="(child,idx) in child.childResource" :key="idx">
                      {{child.resName}}
                    </el-menu-item>
                  </el-submenu>
                </template>
              </el-submenu>
              <el-menu-item :index="item.router" v-if="item.childResource.length==0" :key="index">
                <i :class="item.icon"></i>
                <span slot="title" v-text="item.resName"></span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
    
    data() {
    	return {
    		treeData: [{
    			'icon': 'el-icon-s-home',
    	        'resName': '首页',
    	        'router': '/platformManage/home/home',
    	        'childResource': []},{
            		'icon': 'el-icon-tickets',
    		        'resName': '列表',
    		        'router': '/platformManage/list/list',
    		        'childResource': [
    		          {
    		            'icon': 'el-icon-tickets',
    		            'resName': '列表页',
    		            'router': '/platformManage/list/list',
    		            'childResource': []
    		          }, {
    		            'icon': 'el-icon-tickets',
    		            'resName': '预授权码列表',
    		            'router': '/platformManage/applyOut/applyOut',
    		            'childResource': []
    		          }
    		        ]
    	        }
    	    ]
    	}
    }
    

    组件化开发的目的是为了把一些复杂功能简化,为了功能迭代以及维护简单

    在项目中要合理的利用组件,啥叫合理的利用,就比如有一百个功能的页面,你可以把它分给10个人,每人负责十个,但是如果这是个人又把它细分,每人由原来的十个变成了一百个,这无疑是把工作更复杂化了,所以要合理的利用组件化的思想,别为了使用组件而使用组件!
    如果你想成为一名高级前端开发,你得了解webpack是如何打包的,它能识别js模块,打包其他文件你的会配置loder和第三方插件plugins。webpack中引入vender.js是为了让第三方库在打包一次以后就不再打包,因为第三方库的代码一般会去改动,比如Jquery。webpack中引入happypack是为了加快打包速度,让程序可以在一个时刻同时进行多个打包!

    展开全文
  • 前端代码规范手册

    千次阅读 2018-08-15 15:43:15
    前端代码规范手册       Web Coding Guidelines     前言 本手册的愿景是码出高效,码出质量。现代软件架构都需要协同开发完成,高效 协作即降低协同成本,提升沟通效率,所谓无规矩不成方圆,无规范不...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 93,185
精华内容 37,274
关键字:

前端代码编写规范