前端的开发规范

本文从目录构建、命名、工作及开发文档书写等方面概述前端开发规范。目录构建从命名原则等方面进行;命名规范涵盖CSS和JavaScript;开发文档书写规范包括HTML、CSS和JS规范,如标签属性顺序、代码注释、命名规则等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文主要从以下几个方面来概述前端的开发规范

  1. 目录构建规范
  2. 前端命名规范
  3. 前端工作规范
  4. 开发文档的书写规范

1. 前端目录构建规范

我们从命名原则、根目录、业务逻辑等方面进行目录构建

1.1 命名原则:

- 简洁明了(如下:)
  * src 源代码   
  * img  图片资源    image images
  * js  JavaScript脚本  
  * dep 第三方依赖包     development package
- 不使用复数(如下:)
  * 不使用 imgs   docs  

1.2 根目录(root)结构按职能划分(如下:)

-  src 源代码(逻辑)
-  doc  文档 
-  dep  第三方依赖包
-  test 测试

1.3 根据业务逻辑进行文件夹的划分(如下:)

- src目录名词解释:
  - common 公共资源
  - public/static 静态资源
  - component 组件
  - view/tpl 模板文件
src
  common  公共资源 
    img
      logo.png
      sprites.png
    css
      reset.css
    js
      conf.js  项目的配置文件
  public/static 静态资源
    js
    css
    tpl
      index.html
      shopcar.html
    img
  component   组件 
    home 
    shopcar
    login
    register
    user
    list
    detail
  view/tpl   项目模板           tpl  是  template 的缩写

1.4 总结:

以上目录开发规范有两种使用途径
  1. 使用前端工程化工具如webpack、gulp等进行手动打造
  2. 利用框架提供的脚手架工具进行修改

2. 前端命名规范

这部分内容我从以下两个方面来进行讲解

  • CSS命名规范
    • BEM规范
    • OOCSS规范
  • javaScript编写规范
    • jslint
    • eslint

2.1 css命名规范

2.1.1 BEM规范
 - 概念:   
  Block Element Modifier,它是一种前端命名方法,旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码。

 - BEM是定义了一种css class的命名规范,每个名称及其组成部分都是存在一定的含义。

 - 由拉丁字母, 数字, - 组成css的单个名称.
    - Block	Element	Modifier
      - 独立且有意义的实体, e.g. header, container, menu, checkbox, etc.	
      - Block的一部分且没有独立的意义, e.g. header title, menu item, list item, etc.	
      - Blocks或Elements的一种标志,可以用它改变其表现形式、行为、状态. e.g. disabled, checked, fixed, etc.
- Naming
  
  由拉丁字母, 数字, -组成css的单个名称.

- Block

  使用简洁的前缀名字来命名一个独立且有意义的抽象块或组件。
    ```css
      <!-- e.g. -->

      .block

      .header

      .site-search
    
    ```

- Element

  使用__(两个_)连接符来连接Block 和 Element。

  ```css
    <!-- e.g. -->

    .block__element

    .header__title
    
    	<div class = "header">
    		<h3 class = "header__title"></h3>
    	</div>

    .site-search__field
  • Modifier

    使用–连接符来连接Block 或 Element 和 Modifier。

      <!-- e.g. -->
    
      .block--modifier
    
      .block__element--modifier
    
      .header--hide
    
      .header__title--color-red
    
      .site-search__field--disabled
      
      <form class = "user">
      	<input type = "text" class = "username"/>
      	<input type = "text"/>
      	<input type = "text"/>
      	<input type = "button" class = "user__submit"/>
      </form>
      .user__submit--disabled: {
          background: #ccc;
      }
    
  • 实例

​```html

​``` ​```css

.form {}

.form–theme-xmas {}

.form–simple {}

.form__input { }

.form__submit {}

.form__submit–disabled {}
​```

  • Buttons实例
    ​```html
Normal button Success button Danger button ​``` ​```css

.button {
display: inline-block;
border-radius: 3px;
padding: 7px 12px;
border: 1px solid #D5D5D5;
background-image: linear-gradient(#EEE, #DDD);
font: 700 13px/18px Helvetica, arial;
}
.button–state-success {
color: #FFF;
background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
border-color: #4A993E;
}
.button–state-danger {
color: #900;
}
​```


#### 2.1.2 OOCSS规范 

最典型的oocss规范使用案例:  bootstrap

  • 概念
    Object Oriented CSS,面向对象的CSS,旨在编写高可复用、低耦合和高扩展的CSS代码。
    OOCSS是以面向对象的思想去定义样式,将抽象和实现分离,抽离公共代码。

  • 总结:
    将重用的东西当做一个对象来看, 然后将不同的属性 放到另一个类名去

      <!-- 举例:  -->
      .list{
        background: #fff;
      }
      .list-width{
        width: 300px;
      }
      .list-height{
          
      }
      .list-color{
          
      }
    
      ul.list
       li.list-item
       li a.list-link
       li h3.list-title
       li p.list-text
       li button.list-btn-success
       li button.list-btn-danger
     ```

注意: 以上css命名规范: 解决命名冲突

2.2 js编写代码规范

4. 开发文档的书写规范

这部分内容从以下几个部分进行说明

  • html规范
  • css规范
  • js规范

4.1 html规范

  1. 标签上属性的顺序建议如下:
    class ( class 是为高可复用组件设计的,所以应处在第一位)
    id name (id 更加具体且应该尽量少使用,所以将它放在第二位)
    data-*
    src for type href value
    placeholder title alt
    aria-* role
    required readonly disabled

  2. id/class 命名规则: BEM OOCSS SMACSS(扩展)

  3. 注释规范(最好用英文)

        <div class="container">
           <!-- header--start -->
           <header></header>
           <!-- header--end -->
    
           <!-- content--start -->
           <div class="content">
             
           </div>
           <!-- content--end -->
           
           <!-- footer--start -->
           <footer>
    
           </footer>
           <!-- footer--end -->
         </div>
    

4.2 css规范

  1. 属性顺序

    • 位置属性 ( position top right z-index display float etc.)

    • 大小 ( width height padding margin etc.)

    • 文字系列 ( font line-height letter-spacing color text-align ect.)

    • 背景 ( background border etc.)

    • 其他 ( animation transition etc.)

    • 以及注释的写法

        <!-- 举例:  -->
            .go--top{
              position: fixed;
              right:20px;
              bottom: 50px;
              z-index: 1000;
              display:block;
              
              width: 50px;
              height: 200px;
      
              font-size: 16px;
      
              background: #ccc;
      
              opactiy: 0.5;
              transition: all 0.5s;
      
              <!-- 注释 -->
            }
      
  2. 尽量不使用选择器 (css3选择器)

    .content ul.first-child

    <!-- 举例:   -->
        <div class="content">
          <ul>
            <li>
              <a href=""></a>
              <a href=""></a>
              <a href=""></a>
            </li>
          </ul>
          <ul>
            <li>
              <a href=""></a>
              <a href=""></a>
              <a href=""></a>
            </li>
          </ul>
        </div>
    
  3. 属性使用缩写:

      <!-- 举例:  -->
          body{
            margin: 10px 0;
            background: url('./img.png') center;
          }
    
  4. 去掉小数点前面的 0

    body{
      margin: 10px .8px;
      background: url('./img.png') center;
    }
    

4.3 Js规范

  1. 语言规范
    • 声明变量必须加上 let 关键字.不要再使用 var
    • 优先使用箭头函数
    • 使用模板字符串取代连接字符串 `` ‘’+’’
  2. 使用分号
  • 如果仅依靠语句间的隐式分隔,有时会很麻烦,使用分号更能清楚哪里是语句的起止,而且有些情况下,漏掉分号会出 BUG
  1. 块内函数声明

    • 不要在块内声明一个函数,e.g.

        if (x) {
            function zxm() {}
        }
      
    • 如果确实需要,使用函数表达式来初始化变量

        if (x) {
            let foo = function() {}
        }
      
  2. 循环注意

    • forEach
    • map
    • filter
    • every
    • some
    • for…in
    • for…of
    • for循环 while
    • do…while
  3. 命名规范:

    • camel 表示驼峰命名法 pascal表示 首字母大写 FatherTitle backgroundColor
    • 变量名: 必须使用 camel 命名法
    • 参数名: 必须使用 camel 命名法
    • 函数名: 必须使用 camel 命名法
    • 方法/属性: 必须使用 camel 命名法
    • 私有 ( 保护 ) 成员: 必须以下划线开头
    • 常量名: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API
    • 类名: 必须使用 pascal 命名法
    • 枚举名: 必须使用 pascal 命名法
    • 枚举的属性: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API
    • 命名空间: 必须使用 camel 命名法
    • 语义: 命名同时还需要关注语义
  4. 声明:

    • var let const 应该放在function 已进入函数的时候

    • 注释变量的功能及代表的含义,且应以字母顺序排序.每个变量单独占一行以便添加注释

      <!-- 举例: -->
        var totalPrice = 1; //totalPrice表示商品购物车的总价   √
        var num = 10,totalNum = 100 ;           不建议
      
  5. 回调函数规范:

    回调函数统一使用 Promise 函数,回调成功的参数统一为 res,错误参数为 err

        let callback = new Promise((resolve, reject) => {
            if (/* 异步操作成功 */){
                resolve(value);
            } else {
                reject(err);
            }
        });
    
        callback.then((res) => {
            console.log('成功回调!', res);
        }).catch((err) => {
            console.log('失败回调!', err);
        });
    
    
  6. 标点规范

    js中统一使用反引号(``)或是单引号(’’), 不使用双引号("")

  7. 函数默认值

    函数默认值写在其他参数后面

      function zxm(a,b,name = 'zxm'){
          console.log(name)
      }
    
标题基于SpringBoot+Vue的学生交流互助平台研究AI更换标题第1章引言介绍学生交流互助平台的研究背景、意义、现状、方法与创新点。1.1研究背景与意义分析学生交流互助平台在当前教育环境下的需求及其重要性。1.2国内外研究现状综述国内外在学生交流互助平台方面的研究进展与实践应用。1.3研究方法与创新点概述本研究采用的方法论、技术路线及预期的创新成果。第2章相关理论阐述SpringBoot与Vue框架的理论基础及在学生交流互助平台中的应用。2.1SpringBoot框架概述介绍SpringBoot框架的核心思想、特点及优势。2.2Vue框架概述阐述Vue框架的基本原理、组件化开发思想及与前端的交互机制。2.3SpringBoot与Vue的整合应用探讨SpringBoot与Vue在学生交流互助平台中的整合方式及优势。第3章平台需求分析深入分析学生交流互助平台的功能需求、非功能需求及用户体验要求。3.1功能需求分析详细阐述平台的各项功能需求,如用户管理、信息交流、互助学习等。3.2非功能需求分析对平台的性能、安全性、可扩展性等非功能需求进行分析。3.3用户体验要求从用户角度出发,提出平台在易用性、美观性等方面的要求。第4章平台设计与实现具体描述学生交流互助平台的架构设计、功能实现及前后端交互细节。4.1平台架构设计给出平台的整体架构设计,包括前后端分离、微服务架构等思想的应用。4.2功能模块实现详细阐述各个功能模块的实现过程,如用户登录注册、信息发布与查看、在线交流等。4.3前后端交互细节介绍前后端数据交互的方式、接口设计及数据传输过程中的安全问题。第5章平台测试与优化对平台进行全面的测试,发现并解决潜在问题,同时进行优化以提高性能。5.1测试环境与方案介绍测试环境的搭建及所采用的测试方案,包括单元测试、集成测试等。5.2测试结果分析对测试结果进行详细分析,找出问题的根源并
内容概要:本文详细介绍了一个基于灰狼优化算法(GWO)优化的卷积双向长短期记忆神经网络(CNN-BiLSTM)融合注意力机制的多变量多步时间序列预测项目。该项目旨在解决传统时序预测方法难以捕捉非线性、复杂时序依赖关系的问题,通过融合CNN的空间特征提取、BiLSTM的时序建模能力及注意力机制的动态权重调节能力,实现对多变量多步时间序列的精准预测。项目不仅涵盖了数据预处理、模型构建与训练、性能评估,还包括了GUI界面的设计与实现。此外,文章还讨论了模型的部署、应用领域及其未来改进方向。 适合人群:具备一定编程基础,特别是对深度学习、时间序列预测及优化算法有一定了解的研发人员和数据科学家。 使用场景及目标:①用于智能电网负荷预测、金融市场多资产价格预测、环境气象多参数预报、智能制造设备状态监测与预测维护、交通流量预测与智慧交通管理、医疗健康多指标预测等领域;②提升多变量多步时间序列预测精度,优化资源调度和风险管控;③实现自动化超参数优化,降低人工调参成本,提高模型训练效率;④增强模型对复杂时序数据特征的学习能力,促进智能决策支持应用。 阅读建议:此资源不仅提供了详细的代码实现和模型架构解析,还深入探讨了模型优化和实际应用中的挑战与解决方案。因此,在学习过程中,建议结合理论与实践,逐步理解各个模块的功能和实现细节,并尝试在自己的项目中应用这些技术和方法。同时,注意数据预处理的重要性,合理设置模型参数与网络结构,控制多步预测误差传播,防范过拟合,规划计算资源与训练时间,关注模型的可解释性和透明度,以及持续更新与迭代模型,以适应数据分布的变化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值