前端开发规范总结

1、 前言
        前端开发中,不同的开发者有不同的代码编写习惯,但实际项目中有的公司是需要协同开发的,想要高效的协同,规定一个大家都能接受的规范就尤为重要。 坚持好的代码风格规范,从你我做起。
2、代码规范的好处    
(1)从根本上降低开发成本:
        提高代码整体的可读性、可维护性、可复用性。
(2)保证代码的一致性:
        软件系统中最重要的因素之一就是编码的一致性。如果编码风格一致,也更加易于维护,因       为团队内任何人都可以快速理解并修改。
(3)提升团队整体效率:
        开发人员通常需要花费大量的时间来解决代码质量问题,如果都按照规范编写,也有助于团        队尽早发现问题,这将提高整个交付过程的效率。
3、不规范代码的弊端
(1)增加团队成员间的协作负担,影响降低团队整体效率:
        由于缺乏规范,导致代码风格不一,极端情况下,某段代码只有某个人能修改。
(2)团队间协作更加困难:
        由于开发人员要适应不同的风格,会导致效率低下。 
4、命名规范
(1) 项目命名
        全部采用小写方式, 以“-”分隔。
        例: my-project
(2 )目录命名
        参照项目命名规则;有复数结构时,要采用复数命名法。
        例: pages , assets , directives , components , mixins , utils
(3)javaScript 文件命名
        通常都是驼峰式命名或者用以“-”分隔。
        例:  accountModel.js 、   account-model.js
        
(4)CSS,less,scss 文件命名
        参照项目命名规则。
        例: retina-sprites.less
(5)CSS,class,id 命名
        全部采用小写方式, 以“_”分隔,类名不能以数字开头,除了 - _ 不能带任何其他的符号,见名知意 。 
        例: retina-sprites.less
(5)HTML 文件命名
        参照项目命名规则。
        例: error-report.html
(6) 如果使用 Vue 或者 React 技术栈
        通常都是驼峰式命名或者用以“_ -”分隔。
        例: calendar_list.vue  、 calendarList.vue、calendar-list.vue 
5、引入 CSS, JS
        根据 HTML5 规范, 通常在引入 CSS 和 JS 时不需要指明 type,因为 text/css
        和 text/javascript 分别是他们的默认值。
6、 属性顺序
        属性应该按照特定的顺序出现以保证易读性;
        class
        id
        name
        data-*
        src, for, type, href, value , max-length, max, min, pattern
        placeholder, title, al
        aria-*, role
        required, readonly, disabled
         class 是为高可复用组件设计的,所以应处在第一位;
        id 具体且应该尽量少使用,所以将它放在第二位
7、 减少标签数量 实用高于完美
        在编写 HTML 代码时,需要尽量避免多余的父节点;
        很多时候,需要通过迭代和重构来使 HTML 变得更少
        尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价;
        任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
8、css
        (2)分号 缩进
                使用 soft tab(4 个空格)
                .element {
                     position: absolute;
                     top: 10px;
                     left: 10px;
                     border-radius: 10px;
                     width: 50px;
                     height: 50px;
                }
        (2)分号
                每个属性声明末尾都要加分号。
                .element {
                     width: 20px;
                     height: 20px;
                }
9、命名
        类名使用小写字母,以中划线、下划线分隔
        id 采用驼峰式命名
        less 中的变量、函数以中划线分隔命名
        /* class */
        .element-content {
                ...
        }
        /* id */
        #myDialog {
                ...
        }
        /* 变量 */
        @color-black: #000;
        /* mixins */
        .my-mixin() {
                color: black;
        }
10、属性声明顺序
        相关的属性声明按右边的顺序做分组处理,组之间需要有一个空行。
        .declaration-order {
                display: block;
                float: right;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 100;
                border: 1px solid #e5e5e5;
                border-radius: 3px;
                width: 100px;
                height: 100px
;
                font: normal 13px "Helvetica Neue", sans-serif;
                line-height: 1.5;
                text-align: center;color: #333;
                background-color: #f5f5f5;
                opacity: 1;
        }
        
        
        书写顺序前后为:
                 (1)定位属性:position display float left top right bottom overflow clear z-index
                (2)自身属性:width height padding border margin background
                (3)文字样式:font-family font-size font-style font-weight font-varient color
                (4)文本属性 text-align vertical-align text-wrap text-transform text-indent
                                        text-letter-spacing word-spacing white-space text-overflow
        目的
                 减少浏览器 reflow(回流),提升浏览器渲染 dom 的性能
                原理:浏览器的渲染流程为:
                1、解析 html 构建 dom 树,解析 css 构建 css 树:将 html 解析成树形的数据结构将                 css 解析成树形的数据结构
                2、构建 render 树:DOM 树和 CSS 树合并之后形成的 render 树。
                3、布局 render 树:有了 render 树,浏览器已经知道那些网页中有哪些节点,
                各个节点的 css 定义和以及它们的从属关系,从而计算出每个节点在屏幕中的位置。
                4、绘制 render 树:按照计算出来的规则,通过显卡把内容画在屏幕上。
                css 样式解析到显示至浏览器屏幕上就发生在 234 步骤,可见浏览器并不是一获
                取到 css 样式就立马开始解析而是根据 css 样式的书写顺序将之按照 dom 树的结
                构分布 render 样式,完成第 2 步,然后开始遍历每个树结点的 css 样式进行解
                析,此时的 css 样式的遍历顺序完全是按照之前的书写顺序。在解析过程中,一
                旦浏览器发现某个元素的定位变化影响 DOM,则需要重新渲染。
11、Scss、Less 相关
        每个模块应该有一个单独的 less, 然后每个最外层的父类 className 应该
        写在第一位,所有子 Node 的样式都写在里面,这样是为了避免命名冲突。比如
        //out: false
        .parent-name{
                .child-name{
                        ...
                }
                ...
        }
        LESS 嵌套最多不能超过 5 层;
        不允许有空的规则;
        元素选择器用小写字母;
        去掉小数点前面的 0;
        去掉数字中不必要的小数点和末尾的 0;         
        属性值'0'后面不要加单位;
        同个属性不同前缀的写法需要在垂直方向保持对齐,具体参照右边的写法;
        无前缀的标准属性应该写在有前缀的属性后面;
        不要在同个规则里出现重复的属性,如果重复的属性是连续的则没关系;
        不要在一个文件里出现两个相同的规则;
        用 border: 0; 代替 border: none;
        CSS 选择器不要超过 3 层;
        尽量少用'*'选择器
12、变量命名
        标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到 cgi 返回的数据)
        'ID'在变量名中全大写
        'Android'在变量名中大写第一个字母
        'iOS'在变量名中小写第一个,大写后两个字母
        常量全大写,用下划线连接
        构造函数,大写第一个字母
        jquery 对象必须以'$'开头命名
13、变量声明
        一个函数作用域中所有的变量声明尽量提到函数首部,用一个 var 声明,不
        允许出现两个连续的 var 声明。
14、单行注释
        双斜线后,必须跟一个空格;
        缩进与下一行代码保持一致;
        可位于一个代码行的末尾,与代码间隔一个空格。
        if (condition) {
                // if you made it here, then all security checks passedallowed();
        }
        var zhangsan = 'zhangsan'; // one space after code
15、多行注释
        最少三行, '*'后跟一个空格,具体参照右边的写法;
        建议在以下情况下使用:
        
        难于理解的代码段
        
        可能存在错误的代码段
        
        浏览器特殊的 HACK 代码
        
        业务逻辑强相关的代码
        /*
        * // 注释 ...
        */
        var x = 1;
16、数组、对象
        对象属性名不需要加引号;
        对象以缩进的形式书写,不要写在一行;
        数组、对象最后不要有逗号。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/111517.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

hue实现对hiveserver2 的负载均衡

如果你使用的是CDH集群那就很是方便的 在Cloudera Manager中,进入HDFS Service 进入Instances标签页面,点击Add Role Instances按钮,如下图所示 点击Continue按钮,如下图所示 返回Instances页面,选择HttpFS角色…

【MyBatis】mvc模式以及Mapper文件中的namespace以及ORM思想

目录 什么是MVC三层架构,初步了解? namespace的作用是什么? Mapper文件中的namespace? ORM思想(对象关系映射思想) 其中提供了一套映射规则和API 什么是MVC三层架构,初步了解? 三…

9.构造器与垃圾收集器 对象的前世今生

9.1 对象与变量的生存空间 栈与堆:生存空间 在Java中,程序员会在乎内存中的两种区域:对象的生存空间堆(heap)和方法调用及变量的生存空间(stack)。当Java虚拟机启动时,它会从底层的…

【Netty专题】【网络编程】从OSI、TCP/IP网络模型开始到BIO、NIO(Netty前置知识)

目录 前言前置知识一、计算机网络体系结构二、TCP/IP协议族2.1 简介*2.2 TCP/IP网络传输中的数据2.3 地址和端口号2.4 小总结 三、TCP/UDP特性3.1 TCP特性TCP 3次握手TCP 4次挥手TCP头部结构体 3.2 UDP特性 四、总结 课程内容一、网络通信编程基础知识1.1 什么是Socket1.2 长连…

django REST framework-使用与不使用的区别?

首先,来回顾一下传统的基于模板引擎的 django 开发工作流: 绑定 URL 和视图函数。当用户访问某个 URL 时,调用绑定的视图函数进行处理。 编写视图函数的逻辑。视图中通常涉及数据库的操作。 在视图中渲染 HTML 模板,返回 HTTP 响应…

互联网摸鱼日报(2023-10-20)

互联网摸鱼日报(2023-10-20) 博客园新闻 OPPO让折叠机超越直板旗舰成为可能 特斯拉的“大空头”,是马斯克那张嘴 逃避内卷的年轻人,盯上了老年大学的音乐课 理想市值超蔚来1倍,一场属于增程式的胜利 补足折叠屏影像短板,OPPO…

软件工程与计算总结(十七)软件构造

一.概述 1.定义 软件构造是以编程为主的活动,类似于软件实现。但软件构造又不止编程这么简单,除了核心的编程任务之外,还设计详细设计(数据结构与算法设计)、单元测试、集成与集成测试以及其他活动~ 2.软件构造是设计…

redis,mq如何解决重复支付问题

重复支付问题可以通过以下方式解决: Redis解决重复支付问题:Redis可以使用它的原子性操作来避免重复支付问题。可以将每个订单的订单号作为一个key存储在Redis中,并设置一个过期时间。当客户付款时,先检查该订单号在Redis中是否存…

【Android】BRVAH多布局实现

前言 基于3.0.4版本的BRVAH框架实现的 实现方法 1.创建多个不同类型的布局(步骤忽略) 2.创建数据实体类 数据类要实现【MultiItemEntity】接口 class MyMultiItemEntity(//获取布局类型override var itemType: Int,var tractorRes: Int? null,va…

简单谈谈我参加数据分析省赛的感受与体会

数据分析省赛的感受与体会 概要考试前的感受与体会考试注意事项小结 概要 大数据分析省赛指的是在省级范围内举办的大数据分析竞赛活动。该竞赛旨在鼓励和推动大数据分析领域的技术创新和人才培养,促进大数据技术与应用的深度融合,切实解决实际问题。参…

win32-注册表-32位-64位-读写值-Qt-C++

文章目录 1.32访问64位和64位访问32位2.在Qt中qsetting的使用3.总结 1.32访问64位和64位访问32位 32位的应用程序想访问64位的注册表视图的标志是KEY_WOW64_64KEY,该标志的值是0x0100。64位的应用程序想访问32位的注册表视图的标志是KEY_WOW64_32KEY。以上两个标志…

Android中级——MVVM

MVVM MVVM是什么?MVVM实现前提ModelViewModelView MVVM是什么? Model-View-ViewMode架构,可看作MVP改进版,将此前Presenter的逻辑操作交给ViewMode中的Binder去处理 Mode:封装数据存储及相关操作逻辑,与MV…

URL、域名和网址的区别

网址、域名和URL 都用于描述在互联网上定位资源的标识符,通常它们可以互换使用,但严格来说有区别: URL(Uniform Resource Locator):URL是统一资源定位符的缩写,它是一个包含地址信息的完整字符串…

Kali Linux 安装搭建 hadoop 平台 详细教程

1)前期环境准备:(虚拟机、jdk、ssh) 2)SSH相关配置 安装SSH Server服务器:apt-get install openssh-server 更改默认的SSH密钥 cd /etc/ssh mkdir ssh_key_backup mv ssh_host_* ssh_key_backup 创建新…

【C++进阶(八)】C++继承深度剖析

💓博主CSDN主页:杭电码农-NEO💓   ⏩专栏分类:C从入门到精通⏪   🚚代码仓库:NEO的学习日记🚚   🌹关注我🫵带你学习C   🔝🔝 继承 1. 前言2. 继承的基本概念3. 继承关系和访…

酷开会员值得回味的经典老剧还记得吗?酷开系统家庭影院带你重温

那些年,大家的娱乐生活主要集中在那一台9寸的黑白电视机中;那些年,家家户户的孩子们晚上都会聚到电视机前欢声笑语;那些年,是诸多经典的电视剧陪伴了很多人的闲暇时光……那些年陪伴我们成长,在记忆中熠熠生…

下笔如有神:用VS Code写markdown

文章目录 Markdown All in One快捷键指令 输出PDFMarkdown Preview Enhancedmarkdown基本语法 Markdown All in One VS Coode中最推荐的Markdown插件是Markdown All in One,下文简称为mdAIO。千万别搜完markdown后下一个叫Markdown的插件,这个插件的名字…

新年学新语言Go之四

一、前言 任何编程语言都有类型系统,类型系统解决了数据的存取问题,它决定了使用这个类型需要开辟内存空间大小以及数据是如何存放的,也解决如何读出数据,因为在内存中相同二进制值不同类型的含义是不一样的,关于Go基…

Oracle的立场:官网更换首页与以色列站在一起

Oracle公司的官网,更换了首页内容,明确表明立场:Oracle与以色列站在一起。 声明指出: Oracle谴责针对以色列及其公民的恐怖袭击。Oracle将为其员工、以色列政府和国防机构提供一切必要的支持。 Magen David Adom是一家为以色列公民…

MySQL 数据库类型介绍及使用场景

INT、TINYINT、SMALLINT、MEDIUMINT、BIGINT(整数类型) 整数类型又称数值型数据,数值型数据类型主要用来存储数字。不同的数据类型提供不同的取值范围,可以存储的值范围越大,所需的存储空间也会越大。 MySQL 主要提供…