编码格式规范你注重过吗?稀烂的代码格式你敢给别人看?

  • 时间:2018-06-17 21:00 作者:web前端助手 来源:web前端助手 阅读:102
  • 扫一扫,手机访问
摘要:论文件命名的重要性在开发项目中,良好的命名规范和规整的格式能让代码看起来更整洁,它同样也表现了开发者良好的职业素养。对于文件的命名和代码的组织并没有绝对的形式,但是无论是什么代码,它都要遵循一个准则:在同一个项目中代码的组织结构肯定要清晰,文件的命名规则必需统一并且命名要有意义。想要学习web前台的

论文件命名的重要性

在开发项目中,良好的命名规范和规整的格式能让代码看起来更整洁,它同样也表现了开发者良好的职业素养。对于文件的命名和代码的组织并没有绝对的形式,但是无论是什么代码,它都要遵循一个准则:在同一个项目中代码的组织结构肯定要清晰,文件的命名规则必需统一并且命名要有意义。想要学习web前台的同学,关注小编头条号,私信【学习】就可免费领取一整套系统的web前台学习教程!

HTML命名规范以及格式规范

所有的标签名和属性都应该为小写,属性值最好用双引号闭合

对于id和class的命名需要根据语义和DOM树的层级关系来定义合适的名称,名称中一律用小写,id名称中的关键词用下划线_连接,class中的关键词用中划线-连接,从而最大限度的保证了命名的不重复。假如某个标签的class只是为了作为js调使用的钩子,能在名称中加入js-前缀

对于层级中的class类命名,能用连缀的形式,不过连缀最长不要超过三个。如下:

编码格式规范你注重过吗?稀烂的代码格式你敢给别人看?

CSS命名规范以及格式规范

在CSS中设置类样式时,类名和{左括号间隔一个空格

多个css类单独放一行,如下:

编码格式规范你注重过吗?稀烂的代码格式你敢给别人看?

类样式定义能按照板块划分,比方头部,内容和尾注,一个css文件最好不要过大,控制在200行以内,假如是在过大,能分板块,比方将它分成三个文件(头部,内容和尾注)

编码格式规范你注重过吗?稀烂的代码格式你敢给别人看?

JS命名规范以及格式规范

js局部变量命名采使用首字母小写,其他单词首字母大写,形如mainHeadContainer,命名需要有意义,不使用担心变量名太长而使js脚本文件变大,能在发布阶段通过js脚本混淆压缩等手段来缩小文件

建议将js面向对象编程,准则上公有接口的命名为首字母大写,而私有接口的命名首字母小写,如下:

编码格式规范你注重过吗?稀烂的代码格式你敢给别人看?

对于jQuery框架,其定义的jQuery变量前面应该都增加上$前缀

对于用代码块的地方,不论代码块中的代码有多少行,都最好加上{},即便只有一行

编码格式规范你注重过吗?稀烂的代码格式你敢给别人看?

在JS代码中,假如注释未占有多行,优先考虑用//而不是/**/。注释应该单独占使用一行,而不是写在和代码相同一行的右边

前台代码重构概念

代码重构指的是在不改变代码外部行为的情况下进行源代码修改。重构之前最主要考虑的问题是如何才可以保证外部行为不改变

重构的过程

删除无使用代码以精简代码

前台代码规范化:包括前面说的html、css和js的命名规范和格式规范,还有更改标准已不推荐的标签,比方等,该为由css控制的等;统一标签的命名,以便于板块化划分;在js中集中定义局部变量,并把部分全局变量转变为局部变量,缩小变量的作使用域

整理基础类库:网站初期为了加快开发进度引入了多个框架,其中有些框架可可以重复的功可以较多,比方ExtJS和jQuery,这是重构的内容主要是统一UI插件的用,统一基础方法的用

前台代码板块化:主要是将前台的js和css代码进行功可以划分,以便于后期维护和升级

提高页面加载性可以:将部分不影响页面展现的js文件推迟到页面加载后加载(置于body中的内容后面);页面中的部分图片进行推迟加载;给静态文件设置缓存;通过CSS Sprite技术合并页面背景图片,减少http请求次数等

想要学习web前台的同学,关注小编头条号,私信【学习】就可免费领取一整套系统的web前台学习教程!

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】PHP和Python实战bcrypt算法(2019-02-01 20:47)
【系统环境|服务器应用】PostgreSQL数据库安装Version10.5(2019-02-01 20:47)
【系统环境|服务器应用】Notepad++快速选中多行(2019-02-01 20:47)
【系统环境|服务器应用】Clover支持目录多标签页(2019-02-01 20:47)
【系统环境|服务器应用】计算机视觉 OpenCV Android | Mat像素操作(2019-02-01 20:46)
【系统环境|服务器应用】PHP | 运算符 知识梳理与运用实例(2019-02-01 20:46)
【系统环境|服务器应用】人工智能通识-数学-零基础矩阵运算(2019-02-01 20:46)
【系统环境|服务器应用】Android-打包AAR步骤以及最为关键的注意事项!(2019-02-01 20:46)
【系统环境|服务器应用】回转寿司你肯定吃过!——Android消息机制(构造)(2019-02-01 20:46)
【系统环境|服务器应用】Android中不规则形状View的布局实现(2019-02-01 20:46)
手机二维码手机访问领取大礼包
返回顶部