前端开发规范:1-通用规范

前端开发规范:1-通用规范
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说前端开发规范:1-通用规范,希望能够帮助大家进步!!!

关于规范和风格
风格规范没有绝对的对错,应该根据每个开发团队的业务和习惯来制定。

随着技术、硬件设备及浏览器平台等环境的更新换代,几年前的一些规范可能就会变成了不适用的/错误的,切忌生搬硬套。

开发时应更多的考虑代码的可读性,开发的便捷性, 团队成员的习惯等因素,而不是过于考虑性能问题。

关于命名
以英文字母开头,不能使用数字开头,不使用无意义的字母拼接,不使用拼音命名
文件/url资源的字母使用全小写,单词使用横杠-来分隔
压缩过的文件以.min.css、.min.js、[hash].css等后缀命名
只使用class添加样式,而不是id, id预留给js操作
js常量使用全大写以下划线间隔:const = MAIN_COLOR,js变量或方法以驼峰大小写方式命名: function getList () {}, let curPage = 'home'
js的命名避免与关键字/保留字/原生方法冲突。
命名词意的拼接顺序,尽量不超过3个词拼接,否则名字太长使用起来过于累赘。
class使用全小写,单词拼接以横杠或下划线间隔
class命名词意组成:模块+描述+操作
js命名词意组成:操作+模块
不推荐的文件命名格式

comScipt.js
comStyle.css
top_head.css
233-home.js
style-min.css
推荐的文件命名格式

com-scipt.js
com-style.css
top-head.css
home-233.js
style.min.css
推荐的css/function/变量的命名格式

  • <li class="edit-item" @click="openItem(item.id)" v-for="item in list" v-bind:key="item.id" v-bind:class="{'cur': item.id === curItem.id}" v-if="!searchKey">

{
{ item.title }}

<tags :value="item.tags" v-if="!isLoading">

引入资源的协议

不要指定引入资源所带的具体协议

当引入图片、样式、脚本等静态文件时,不要带http://或https://协议,除非这两个协议都不可用

不推荐

.example {

background: url(http://static.xxx.com/img/head-bg.jpg);
}
推荐

.example {

background: url(//static.xxx.com/img/head-bg.jpg);
}
文本缩进
不同编辑器对tab实现不同,有些是4空格有些8空格。

个人认为4个空格太长了,使用2个空格代码更整齐紧凑一些,阅读体验更好。

缩进使用两个空格或把编辑器tab键设置自动替换为2个空格。

vscode编辑器配置: 文件 > 首选项 > 设置

"editor.tabSize": 2
注释写什么
多写注释,但是不要滥写注释。

规范的结构命名和条理清晰,比注释更重要。

如果使用WebPack开发,可以安装一些自动去注释的插件,在编译时会自动去掉注释,无需担心代码冗余问题。

如果业务逻辑复杂,注释应写为什么这样做,以及与之相关的逻辑思考,而不是只写这样做的结果得到什么,可以附带网上的参考链接,如https://stackoverflow.com/ 等技术文章作为备注

注释应该写在对应内容的上面一行。

JS代码检查
编辑器安装如ESLint等JS代码检查工具,帮助及时发现错误,改正不规范写法

关注点分离
关注点主要指的是:信息(HTML 结构)、外观(CSS)和行为(JavaScript)。为了使它们成为可维护的干净整洁的代码,减少团队开发中的冲突,我们要尽可能的将它们分离开来。

严格地保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。

就是说,尽量在文档和模板中只包含结构性的 HTML;所有表现代码,移入样式表中;所有动作行为,移入脚本之中。

精简的HTML标签
HTML标签专注于内容的展现,在视觉方面尽量使用css伪元素来代替一个空的标签占位。

UI的边框圆角等简单效果,多使用纯css实现。如果确实需要图片效果,则使用css的background属性引入而不占用一个img标签,等多媒体标签只在展现内容的时候使用。

单引号与双引号
在HTML/CSS中尽量使用双引号而不是单引号。

在JS中双引号应该在单引号的外层,如果需要在JS加入html字符,则使用`符号包裹。

let aNode = <div class="modal-wrap">模态框</div>

转载于:https://www.cnblogs.com/unclefang/p/11180429.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29672

发表评论