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

  • 时间:2018-06-17 21:00 作者:web前端助手 来源:web前端助手 阅读:158
  • 扫一扫,手机访问
摘要:论文件命名的重要性在开发项目中,良好的命名规范和规整的格式能让代码看起来更整洁,它同样也表现了开发者良好的职业素养。对于文件的命名和代码的组织并没有绝对的形式,但是无论是什么代码,它都要遵循一个准则:在同一个项目中代码的组织结构肯定要清晰,文件的命名规则必需统一并且命名要有意义。想要学习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)
最新发布的资讯信息
【系统环境|】Java开发人员的就业优势在哪里?看完你心动了吗?(2019-09-25 21:31)
【系统环境|】学HTML5开发前景怎么样?Web前端和Java谁的薪水高?(2019-09-20 16:22)
【系统环境|】web前端开发需要学习哪些技术(2019-09-17 18:00)
【系统环境|】学习web前端开发是正确的选择(2019-09-15 16:55)
【系统环境|】干货整理!零基础html5网站开发学习步骤方法(保存不后悔)(2019-09-10 16:27)
【系统环境|】「前端入门」前端基本概念(2019-09-07 21:36)
【系统环境|】小白入门学习web前端,这些干货不能少(2019-09-05 20:59)
【系统环境|】不是计算机专业,哪个专业更适合学习web前端(2019-09-03 20:31)
【系统环境|】入行web前端开发可以做什么工作(2019-09-02 20:51)
【系统环境|】什么是Web前端呢?为什么说web前端开发人员的薪资高、前景好呢?(2019-08-31 20:55)
手机二维码手机访问领取大礼包
返回顶部